We Keep Coding

Gulp watch causes infinite build loop

my gulp watch keeps on a rebuild after saving js file, the Scss file working well, the problem is when saving other files inside the project folder, changing or replacing images, triggers the rebuild to start and finish building dist folder.
only while saving Scss files, the build starts and finishes as accepted.
terminal output:
[17:53:11] Starting 'js-build'...
[17:53:11] Finished 'js-build' after 452 ms
[17:53:11] Starting 'js-build'...
[17:53:12] Finished 'js-build' after 614 ms
[17:53:12] Starting 'js-build'...
please advice?
my gulp code:
var gulp = require('gulp'),
autoprefixer = require('autoprefixer'),
babel = require('gulp-babel');
uglify = require('gulp-uglify-es').default,
cssnano = require('gulp-cssnano'),
plumber = require('gulp-plumber'),
gcmq = require('gulp-group-css-media-queries'),
rename = require('gulp-rename'),
pngquant = require('imagemin-pngquant'),
cache = require('gulp-cache'),
concat = require('gulp-concat'),
del = require('del'),
sass = require('gulp-sass'),
scss = require('gulp-scss'),
browserSync = require('browser-sync'),
server = browserSync.create(),
fileinclude = require('gulp-file-include');
function reload(done) {
server.reload();
done();
}
function serve(done) {
server.init({
server: {
baseDir: './dist'
}
});
done();
}
gulp.task('html', function() {
return gulp.src('*.html')
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('dist'))
});
var scssFiles = [
'./scss/**/*.scss',
'!./node_modules/**',
'!./dist/**',
];
var jsFiles = [
'**/*.js',
'!./node_modules/**',
'!gulpfile.js',
'!./dist/**',
];
var imgFiles = [
'**/*.{jpg,png,jpeg,svg,gif,ico}',
'!./node_modules/**',
'!./dist/**',
];
var fontFiles = [
'fonts/**/*.*',
'!./node_modules/**',
'!./dist/**',
];
gulp.task('scss', function() {
var postCSSplugins = [
autoprefixer({ browsers: ['last 2 version'] }),
];
return gulp.src(scssFiles)
.pipe(sass())
// .pipe(concat('app.css'))
.pipe(plumber()) //if need unoptimezed file - comment this line
.pipe(gcmq()) //if need unoptimezed file - comment this line
.pipe(cssnano()) //if need unoptimezed file - comment this line
.pipe(gulp.dest('dist/css/'))
.pipe(server.stream()) //if need unoptimezed file - comment this line
});
gulp.task('js-build', function () {
return gulp.src(jsFiles)
.pipe(plumber())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
});
gulp.task('img', function() {
return gulp.src(imgFiles)
.pipe(gulp.dest('dist/'))
});
gulp.task('font', function() {
return gulp.src(fontFiles)
.pipe(gulp.dest('dist/fonts'))
});
gulp.task('watch', function() {
gulp.watch(scssFiles, gulp.series('scss'), reload);
gulp.watch('*.html', gulp.series('html'));
gulp.watch(jsFiles, gulp.series('js-build'));
gulp.watch(imgFiles, gulp.series('img'));
});
gulp.task('clean', function() {
return del('./dist');
});
gulp.task('build', gulp.parallel('scss', 'html', 'js-build', 'img', 'font'));
gulp.task('serve', gulp.parallel('watch', serve));
gulp.task('default', gulp.series('clean', 'build', 'serve'));

Gulp build task CSS paths and JS compilation

So I have the following basic project structure that I use throughout all my projects:
Where the src folder looks like this:
I use Pug(Jade), sass compiling and useref js compilation.
This is my Jade views structure:
And this is my Jade index file:
This is my Jade scripts file, that is included in the index:
This is my pre-build index file, which is constructed by the index.pug:
And this is the build version of the index file:
My Gulpfile looks like this:
var gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber'),
changed = require('gulp-changed'),
gutil = require('gulp-util'),
pug = require('gulp-pug'),
concat = require('gulp-concat'),
browserSync = require('browser-sync').create(),
useref = require('gulp-useref'),
uglify = require('gulp-uglify'),
gulpIf = require('gulp-if'),
cssnano = require('gulp-cssnano'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
del = require('del'),
cssAdjustUrlPath = require('gulp-css-adjust-url-path'),
runSequence = require('run-sequence');
function handleError(err) {
gutil.beep();
console.log(err.toString());
this.emit('end');
}
gulp.task('sass', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(plumber({
errorHandler: handleError
}))
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('sass-dist', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(cssAdjustUrlPath(/(url\(['"]?)[/]?(assets)/g))
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('dist/css'))
});
gulp.task('views', function buildHTML() {
return gulp.src('src/views/*.pug')
.pipe(changed('src', {
extension: '.html'
}))
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('src/'))
});
gulp.task('views-dist', function buildHTML() {
return gulp.src('src/views/*.pug')
.pipe(changed('src', {
extension: '.html'
}))
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('dist/'))
});
gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/views/**/*.pug', ['views']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/js/**/*.js', browserSync.reload);
gulp.watch('src/*.html', browserSync.reload);
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: 'src'
},
port: 3000
});
});
gulp.task('useref', function () {
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
gulp.task('useref-dist', function () {
return gulp.src('src/**/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('src/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('src/images/'));
});
gulp.task('images-dist', function () {
return gulp.src('src/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/images/'));
});
gulp.task('fonts', function () {
return gulp.src('src/fonts/**/*')
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('clean:dist', function () {
return del.sync('dist');
});
gulp.task('build', function (callback) {
runSequence('clean:dist', ['sass-dist', 'useref-dist', 'images-dist', 'fonts', 'views-dist'],
callback
);
});
gulp.task('default', function (callback) {
runSequence(['views', 'sass', 'browserSync', 'watch'],
callback
);
});
When I run the build task gulp build, all is well, except the relative/absolute paths inside the outputted CSS files, and the JS that runs the final product, whereas fonts/backgrounds/icons and JS functionality is not translated into the final build.
What is wrong with my Gulp file, and how can I fix it?

Gulp watch task with Browsersync with Jekyll does not propagate modified content

When calling gulp the site and its assets are generated correctly once. The watch tasks start, but they never register new changes nor refresh the browser with Browsersync.
My goal is to have a full automation in the build process. For example, if _config.yml changes Jekyll will rebuild itself. Same idea applies to every file.
What I have tried so far:
Creating separate gulp.watch tasks for build:scripts, build:styles, build:images and build:jekyll.
Calling .on('change', browserSync.reload) on every separate gulp.watch task
Creating .pipe(browserSync.reload({stream: true})) in build:styles, build:images, build:scripts and build:jekyll
Here are the contents of gulpfile.js:
'use strict';
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('build:styles', function() {
return gulp.src('_assets/styles/main.sass')
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream());
});
gulp.task('build:scripts', function() {
return gulp.src('_assets/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.stream());
});
gulp.task('build:images', function() {
return gulp.src('_assets/img')
.pipe(imagemin())
.pipe(gulp.dest('assets/img'));
});
gulp.task('build:jekyll', function(callback) {
// --incremental regeneration doesn't update front matter
var shellCommand = 'jekyll build';
return gulp.src('')
.pipe(run(shellCommand))
browserSync.reload();
callback();
});
gulp.task('clean', function() {
return del(['_site', 'assets']);
});
gulp.task('build', function(callback) {
return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});
gulp.task('watch', ['build'], function() {
browserSync.init({
server: {
baseDir: '_site'
},
open: true
});
gulp.watch(['_config.yml' ,
'*.html', '_layouts/*.*',
'_pages/*.*', '_assets/**/**/*.*'],
['build']).on('change', browserSync.reload);
});
gulp.task('default', ['watch']);
Why would Browsersync and Jekyll register the changes correctly?

I have managed to get Browsersync see all the changes in the needed files and reload browser with the following gulpfile.js tasks:
'use strict';
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('clean', function() {
return del(['_site', '.publish', 'assets']);
});
gulp.task('build:scripts', function() {
return gulp.src('_assets/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('assets/js'));
});
gulp.task('build:styles', function() {
return gulp.src('_assets/styles/main.sass')
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('assets/styles'));
});
gulp.task('build:images', function() {
return gulp.src('_assets/img')
.pipe(imagemin())
.pipe(gulp.dest('assets/img'));
});
gulp.task('build:jekyll', function(callback) {
// --incremental regeneration doesn't update front matter
var shellCommand = 'jekyll build';
return gulp.src('')
.pipe(run(shellCommand));
callback();
});
gulp.task('build', function(callback) {
return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});
gulp.task('rebuild', ['build'], function(){
browserSync.reload();
});
gulp.task('default', ['build'], function() {
// maybe important (injectChanges: true)
browserSync.init({
server: {
baseDir: '_site'
},
open: true
});
gulp.watch(['_config.yml' ,
'*.html', '_layouts/*.*',
'_pages/*.*', '_assets/**/**/*.*'],
['rebuild']);
});

When I run gulp, unexpected error pops up(event.js : 160)

Here is the snapshot of command prompt when I run gulp. Previously it used to work correctly but now, it is showing some weird errors.
my view folder is supposed to contain only templates, so why is it displaying bootstrap.social.css not found?
and my project folder looks like-
Project-
app-
fonts-...
images-...
scripts-
app.js
controllers.js
services.js
styles-...
index.html
views-
various html templates
bower_components-...
dist-..
node_modules-...
gulpfile.js
package.json
...
here is my gulpfile.js' code:
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
ngannotate = require('gulp-ng-annotate'),
del = require('del');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});

Why is gulp complaining about Maximum call stack size exceeded?

I am writting a gulp tasks where I take several js file , concat them , minify those.. same with scss into css etc ...normal stuffs
And, it is for Drupal 8
Here is my gulpfile. However on running this, I keep on getting the following error:
[10:00:58] Starting 'scripts'...
events.js:160
throw er; // Unhandled 'error' event
^
RangeError: Maximum call stack size exceeded
at Object.TreeWalker._visit (eval at <anonymous> (/Applications/MAMP/htdocs/novaent/node_modules/uglify-js/tools/node.js:1:0), <anonymous>:1255:21)
'use strict';
And below is my gulp file
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
// sassOptions are optional but things like sourceComments (line_comments) can be pretty handy.
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// javaScripts
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('index.js'))
.pipe(gulp.dest(config.js.dest)) // outputs *.js without min
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(config.js.dest)) // outputs *.js.min
.pipe(notify({message: 'Rebuild all custom scripts'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);

I think I have solved it as below
'use strict';
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
var uglifyOptions = {
preserveComments: 'license',
warnings: 'true'
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// Concat all js files into one index.min.js file
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('./js/index.js'))
.pipe(gulp.dest('./js/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify(uglifyOptions))
.pipe(gulp.dest('./assets/dist/'))
.pipe(notify({message: 'Rebuild all custom scripts. Please refresh your browser'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'scripts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);