I'm trying to set up gulp to automatically refresh projects when I save changes via tutorials online.
It keeps throwing back errors every time I initiate "gulp serve"
Versions
node version - v12.13.0
npm version - 6.13.0
gulp version - 3.9.1
My gulpfile.js code:
var gulp = require('gulp');
var uglifycss = require('gulp-uglifycss');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
sass.compiler = require('node-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
gulp.task('css', function () {
gulp.src('./styles/**/*.css')
.pipe(uglifycss({
"maxLineLen": 80,
"uglyComments": true
}))
.pipe(gulp.dest('./dist/'));
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('js', function () {
return gulp.src('js/*js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('js-watch', ['js'], function (done) {
browserSync.reload();
done();
});
gulp.task('default', ['js'], function () {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("js/*.js", ['js-watch']);
});
My package.json code:
{
"name": "fifteen-projects",
"version": "1.0.0",
"description": "Project files",
"main": "gulpfile.js",
"dependencies": {
"gulp-uglifycss": "^1.1.0"
},
"devDependencies": {
"browser-sync": "^2.26.7",
"gulp": "^3.9.1",
"gulp-sass": "^4.0.2",
"node-sass": "^4.13.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/MarvinBrereton-creator/fifteen-projects.git"
},
"author": "Marvin Brereton",
"license": "MIT",
"bugs": {
"url": "https://github.com/MarvinBrereton-creator/fifteen-projects/issues"
},
"homepage": "https://github.com/MarvinBrereton-creator/fifteen-projects#readme"
}
When I initiate "gulp serve" in cmd inside the project folder where gulp is located it throws back:
fs.js:27const { Math, Object } = primordials;
ReferenceError: primordials is not defined
at fs.js:27:26
at req_ (C:\Users\kk\Documents\GitHub\fifteen-projects\node_modules\natives\index.js:143:24)
at Object.req [as require] (C:\Users\kk\Documents\GitHub\fifteen- projects\node_modules\natives\index.js:55:10)
at Object.<anonymous> (C:\Users\kk\Documents\GitHub\fifteen-projects\node_modules\vinyl- fs\node_modules\graceful-fs\fs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
I think the problems are coming from the Node_modules folder as the errors are coming from there whenever I try to initiate gulpfile.js
Any help is appreciated, thank you!
I found the best way was to use the inbuilt extension (Hot Reload) within VsCode. Gulp was outdated for what was needed.
Related
I am using gulp and browser-sync for the local development. The problem is that browser-sync (or gulp) caches the js and css resources even after i changed them. After pressing hard refreshes many times (5-7) then I can see the new code. I also tried gulp-cache to clear it but it didn't work.
package.son
{
"version": "1.0.0",
"main": "index.js",
"scripts": {
"watch": "gulp watch",
"build": "gulp build",
"build-prod": "NODE_ENV='production' gulp build --env production"
},
"babel": {
"presets": [
"#babel/env"
]
},
"browserslist": [
"last 3 version",
"> 1%",
"IE 11"
],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.27.10",
"browserify": "^17.0.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-cache": "^1.1.3",
},
}
Here is the gulpfile.js
const gulp = require("gulp");
const tap = require("gulp-tap");
const log = require("gulplog");
const cache = require("gulp-cache");
/// JS transformation
const sourcemaps = require("gulp-sourcemaps");
const browserify = require("browserify");
const babelify = require("babelify");
const buffer = require("vinyl-buffer");
const uglify = require("gulp-uglify");
const browserSync = require("browser-sync").create();
const production = environments.production;
/// COMMON
const targetClassesDestination = "...";
function browserReloadTask(done) {
browserSync.reload();
done();
}
function clearCache(done) {
gulp.task("clearCache", () => cache.clearAll());
done();
}
/// JS tasks
const jsSources = "...";
function copyJsModern(done) {
gulp
.src(jsSources, { read: false })
.pipe(
tap(function (file) {
log.info("bundling " + file.path);
file.contents = browserify({ entries: file.path, debug: true })
.transform(babelify, { presets: ["#babel/env"] })
.bundle();
})
)
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(production(uglify()))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest(targetClassesDestination));
done();
}
function watching_files() {
browserSync.init({
proxy: "localhost:8080",
});
gulp.watch(
jsSources,
gulp.series(clearCache, copyJsModern, browserReloadTask)
);
}
gulp.task("watch", watching_files);
gulp.task(
"build",
gulp.series( copyJsModern)
);
gulp.task("default", gulp.series("watch"));
I'm having a go at setting up my own gulp file. My gulp file is:
Turning SCSS -> CSS.
Minifying JS.
And watching my files.
Finally, when I run my gulp command in terminal, (which runs all the tasks above), I want to also see any errors on watch, in my JS and SCSS file.
Let's say I'm typing JavaScript and I've made an error, I'd like to see that flagged up in my terminal.
I've tried installed jshint and jscs. And I'm not getting any node errors when I run gulp. But if I deliberately type incorrect JS, in my js file, I don't see any errors flagged up in terminal.
Here's my gulpfile.js below.
What am I doing wrong? (I have looked at many stackoverflows, but there seem to be many approaches).
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
const sass = require('gulp-sass')(require('sass'));
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
// gulp sass
gulp.task('sass', function(){
return gulp.src('GULP-TEST/SCSS/style.scss')
.pipe(sass())
.pipe(cssnano())
.pipe(sourcemaps.init())
.pipe(gulp.dest('dist/css'));
});
// gulp js
gulp.task('js', function(){
return gulp.src(['GULP-TEST/js/*.js'])
.pipe(concat('all.js'))
.pipe(sourcemaps.init())
.pipe(sourcemaps.write())
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
// gulp detecterror
gulp.task('detecterror', function(){
return gulp.src(['GULP-TEST/js/*.js'])
.pipe(jshint())
.pipe(jscs())
.pipe(jshint.reporter('jshint-stylish',{
verbose:true
}));
});
// gulp watch
gulp.task('watch', function() {
gulp.watch('GULP-TEST/SCSS/style.scss', gulp.series('sass')).on('change', browserSync.reload);
gulp.watch('GULP-TEST/js/*.js', gulp.series('js')).on('change', browserSync.reload);
});
// gulp
gulp.task("default", gulp.series('sass', 'js', 'watch', 'detecterror'));
Here's also my package.json as an FYI:
{
"name": "RV",
"version": "1.0.0",
"description": "Test",
"main": "index.js",
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": "http://code.xx.xx.xx/xx/xx.git"
},
"author": "RV",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/preset-env": "^7.16.11",
"browser-sync": "^2.27.7",
"gulp": "^4.0.2",
"gulp-jscs": "^4.1.0",
"gulp-jshint": "^2.1.0",
"gulp-sass": "^5.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"jshint": "^2.13.4",
"jshint-stylish": "^2.2.1",
"sass": "^1.49.9"
},
"dependencies": {
"gulp-babel": "^8.0.0",
"gulp-cli": "^2.3.0",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.3"
}
}
I'm using gulp and angular to create a simple web application.
When I make gulp serve the application cannot find whatever I have in node_modules folder.
Here is my gulp file:
// generated on 2017-10-12 using generator-webapp 3.0.1
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const browserSync = require('browser-sync').create();
const del = require('del');
const runSequence = require('run-sequence');
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
let dev = true;
gulp.task('styles', () => {
return gulp.src('app/styles/*.css')
.pipe($.if(dev, $.sourcemaps.init()))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe($.if(dev, $.sourcemaps.write()))
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
gulp.task('html', ['styles'], () => {
return gulp.src('app/*.html')
.pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
.pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}})))
.pipe($.if(/\.css$/, $.cssnano({safe: true, autoprefixer: false})))
.pipe($.if(/\.html$/, $.htmlmin({
collapseWhitespace: true,
minifyCSS: true,
minifyJS: {compress: {drop_console: true}},
processConditionalComments: true,
removeComments: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
})))
.pipe(gulp.dest('dist'));
});
gulp.task('images', () => {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin()))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', () => {
return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
.concat('app/fonts/**/*'))
.pipe($.if(dev, gulp.dest('.tmp/fonts'), gulp.dest('dist/fonts')));
});
gulp.task('extras', () => {
return gulp.src([
'app/*',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
gulp.task('serve', () => {
runSequence(['clean'], ['styles', 'fonts'], () => {
browserSync.init({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app']
}
});
gulp.watch([
'app/*.html',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.css', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
});
});
gulp.task('serve:dist', ['default'], () => {
browserSync.init({
notify: false,
port: 9000,
server: {
baseDir: ['dist']
}
});
});
gulp.task('build', ['html', 'images', 'fonts', 'extras'], () => {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', () => {
return new Promise(resolve => {
dev = false;
runSequence(['clean'], 'build', resolve);
});
});
And my index.html inside app is something like:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>paykey</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="styles/main.css">
<script src="node_modules/angular/angular.js"></script>
</head>
<body ng-app="myApp" >
So for everything I point to node_modules is not found, and for example "styles" folder is at the same level and is found. Any idea why this is happening?
package.json:
{
"private": true,
"engines": {
"node": ">=4"
},
"devDependencies": {
"babel-core": "^6.4.0",
"babel-preset-es2015": "^6.3.13",
"babel-register": "^6.5.2",
"browser-sync": "^2.2.1",
"del": "^2.2.0",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.0.1",
"gulp-babel": "^6.1.1",
"gulp-cache": "^0.4.2",
"gulp-cssnano": "^2.0.0",
"gulp-eslint": "^3.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.0.1",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.0.1",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.0.0",
"main-bower-files": "^2.5.0",
"run-sequence": "^1.2.2",
"wiredep": "^4.0.0"
},
"eslintConfig": {
"env": {
"es6": true,
"node": true,
"browser": true
},
"rules": {
"quotes": [
2,
"single"
]
}
},
"dependencies": {
"angular": "^1.6.6",
"bootstrap": "^3.3.7",
"jquery": "^3.2.1",
"modernizr": "^3.5.0",
"popper": "^1.0.0"
}
}
Your serve:dist gulp task is serving the content from the dist directory. You need to create a new gulp task to copy over your scripts found in node_modules. Or better yet, just use Webpack.
I have a Less task in my Gulp script, but it's not working like it should:
1
It's supposed to compile less files and move them to 'build/css' folder. But for some reason it doesn't work. Why?
2
I tried to use gulp-util to log errors. It cathes wrong file name in imported less files. But it does not detect undefined classes. And it does not indicate why files are not compiled.
Any hints is much appreciated!
gulpfile.js
var gulp = require("gulp"),
util = require('gulp-util'),
minifyHTML = require("gulp-minify-html"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
cssmin = require("gulp-cssmin"),
uncss = require("gulp-uncss"),
imagemin = require("gulp-imagemin"),
sourcemaps = require("gulp-sourcemaps"),
inject = require("gulp-inject"),
less = require("gulp-less"),
filter = require("gulp-filter"),
glob = require("glob"),
browserSync = require("browser-sync"),
LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefix = new LessPluginAutoPrefix({
browsers: ["last 2 versions"]
});
var config = {
paths: {
html: {
src: "src/**/*.html",
dest: "build"
},
javascript: {
src: ["src/js/**/*.js"],
dest: "build/js"
},
css: {
src: ["src/css/**/*.css"],
dest: "build/css"
},
less: {
src: ["src/less/**/*.less", "!src/less/includes/**"],
dest: "build/css"
},
images: {
src: ["src/images/**/*.jpg", "src/images/**/*.jpeg", "src/images/**/*.png"],
dest: "build/images"
},
audio: {
src: "src/audio/**/*.mp3",
dest: "build/audio"
}
}
};
gulp.task("html", function(){
return gulp.src(config.paths.html.src)
.pipe(minifyHTML())
.pipe(gulp.dest(config.paths.html.dest));
});
gulp.task("scripts", function(){
return gulp.src(config.paths.javascript.src)
.pipe(sourcemaps.init())
.pipe(concat("app.min.js"))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(config.paths.javascript.dest));
});
gulp.task("css", function(){
return gulp.src(config.paths.css.src)
.pipe(sourcemaps.init())
.pipe(cssmin())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(config.paths.css.dest))
.pipe(browserSync.reload({stream: true}));
});
gulp.task("less", function(){
return gulp.src(config.paths.less.src)
.pipe(sourcemaps.init())
.pipe(less({
paths: ["node_modules/bootstrap/less"],
plugins: [autoprefix]
}))
.pipe(uncss({
html: glob.sync(config.paths.html.src)
}))
.pipe(concat("main.min.css"))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(config.paths.less.dest))
.pipe(filter("**/*.css"))
.pipe(browserSync.reload({stream: true}));
});
gulp.task("images", function(){
return gulp.src(config.paths.images.src)
.pipe(imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest(config.paths.images.dest));
});
gulp.task("audio", function() {
return gulp.src([config.paths.audio.src]).pipe(gulp.dest(config.paths.audio.dest));
});
gulp.task("browser-sync", function() {
browserSync({
server: {
baseDir: "./build"
}
});
});
gulp.task("build", ["html", "scripts", "css", "less", "images", "audio"]);
gulp.task("default", ["build", "browser-sync"], function(){
gulp.watch(config.paths.html.src, ["html", browserSync.reload]);
gulp.watch(config.paths.javascript.src, ["scripts", browserSync.reload]);
gulp.watch(config.paths.css.src, ["css"]);
gulp.watch(config.paths.less.src, ["less"]);
gulp.watch(config.paths.images.src, ["images", browserSync.reload]);
gulp.watch(config.paths.audio.src, ["audio", browserSync.reload]);
});
package.json
{
"name": "ofj-simon-says",
"version": "0.1.0",
"description": "Click a color sequence",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"bower": "^1.3.12",
"browser-sync": "^2.14.0",
"glob": "^7.0.6",
"gulp": "^3.8.10",
"gulp-concat": "^2.4.1",
"gulp-cssmin": "^0.1.6",
"gulp-filter": "^4.0.0",
"gulp-imagemin": "^3.0.3",
"gulp-inject": "^4.1.0",
"gulp-less": "^3.1.0",
"gulp-minify-html": "^1.0.6",
"gulp-sourcemaps": "^1.2.8",
"gulp-uglify": "^2.0.0",
"gulp-uncss": "^1.0.6",
"gulp-util": "^3.0.7",
"less-plugin-autoprefix": "^1.5.1",
"main-bower-files": "^2.4.0"
},
"dependencies": {
"bootstrap": "^3.3.7"
}
}
Seems to be a problem with gulp-uncss plugin. When I remove it, everything works. I tried to update to newest version 1.0.6 but to no avail. I'll have to look more into it more deeply before saying what the problem is. For now I'm removing uncss() from the less task:
gulp.task("less", function(){
return gulp.src(config.paths.less.src)
.pipe(sourcemaps.init())
.pipe(less({
plugins: [autoprefix]
}).on('error', util.log))
.pipe(concat('main.min.css'))
//.pipe(uncss({
// html: glob.sync(config.paths.html.src)
//}))
.pipe(nano())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(config.paths.less.dest))
.pipe(browserSync.reload({stream: true}));
});
babel compile es6 about Uncaught SyntaxError: Unexpected token import.
I use webpack + gulp ,but throw Unexpected token import.How to solve this problem?
index.jsx
'use strict';
import React from 'react';
package.json
"devDependencies": {
"babel-core": "^6.3.15",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"gulp": "^3.9.0",
"gulp-webpack": "^1.5.0",
"react": "^0.14.3",
"react-tools": "^0.13.3",
"vinyl-named": "^1.1.0",
"webpack": "^1.12.9"
}
gulpfile.js
var gulp = require('gulp');
var webpack = require('gulp-webpack');
var named = require('vinyl-named');
gulp.task('dev', function() {
return gulp.src('app/scripts/index.jsx')
.pipe(named())
.pipe(webpack({
watch : true,
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
},
output : {
filename : '[name].jsx',
},
resolve: {
alias: { localforage: 'localforage/dist/localforage.min' }
}
}))
.pipe(gulp.dest('app/dist/'));
});