gulp watch resulting in an endless loop after upgrading to gulp 4 - gulp-watch

Question

I have upgraded my gulpfile.js to gulp 4. gulp dev is working fine. But whenever I am editing any file the reload and inject tasks are entering into an endless loop.
My gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
symlink = require('gulp-symlink'),
jshint = require('gulp-jshint'),
browserSync = require('browser-sync').create(),
concat = require('gulp-concat'),
useref = require('gulp-useref'),
replace = require('gulp-replace'),
templateCache = require('gulp-angular-templatecache'),
gulpif = require('gulp-if'),
gulpUtil = require('gulp-util'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-clean-css'),
merge = require('merge-stream'),
clean = require('gulp-clean'),
inject = require('gulp-inject'),
svgSprite = require('gulp-svg-sprite'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer');
webfonts = require('gulp-font');
/* DEV */
gulp.task('dev-serve', function () {
browserSync.init({
server: './'
});
gulp.watch('app/**/*.scss', gulp.parallel('sass'));
gulp.watch('app/**/*.html', gulp.series('inject', 'reload'));
gulp.watch('app/**/*.js', gulp.parallel('inject', 'reload'));
gulp.watch('app/images/svg-sprite/*', gulp.parallel('svg-sprite', 'reload'));
gulp.watch('app/images/**/*', gulp.parallel('reload'));
gulp.watch('app/fonts/*', gulp.parallel('reload'));
});
/* PROD */
gulp.task('prod-serve', function () {
browserSync.init({
server: './www'
});
gulp.watch('app/**/*.scss', gulp.parallel('sass', 'build-html'));
gulp.watch('app/**/*.html', gulp.parallel('inject', 'minify-scripts', 'reload'));
gulp.watch('app/**/*.js', gulp.parallel('inject', 'minify-scripts', 'reload'));
gulp.watch('app/images/**/*', gulp.parallel('copy-images', 'reload'));
gulp.watch('app/fonts/*', gulp.parallel('copy-fonts', 'reload'));
});
// SVG SPRITE
gulp.task('svg-sprite', function () {
var svgPath = 'app/images/svg-sprite/*.svg';
return gulp.src(svgPath)
.pipe(svgSprite({
shape: {
spacing: {
padding: 0
}
},
mode: {
css: {
dest: './',
layout: 'diagonal',
sprite: 'app/images/sprite.svg',
bust: false,
render: {
scss: {
dest: 'app/styles/tools/_sprite.scss',
template: 'app/styles/tools/_sprite-template.tpl'
}
}
}
},
variables: {
mapname: 'icons'
}
}))
.pipe(gulp.dest('./'));
});
// SCSS
gulp.task('sass', function (done) {
gulp.task('sass', function () {
return gulp.src('app/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest('app'))
.pipe(browserSync.stream());
});
done();
});
// INJECT
gulp.task('inject', function () {
return gulp.src('app/index.html')
.pipe(inject(gulp.src(['app/**/*.module.js', 'app/**/*.js', '!app/vendor/**/*.js'], {read: false}), {relative: true}))
.pipe(gulp.dest('./app'));
});
// HTML
gulp.task('build-html', function () {
return gulp.src('app/index.html')
.pipe(replace('href="/app/"', 'href="/"')) // replace base href
.pipe(useref())
.pipe(gulpif('*.js', uglify().on('error', gulpUtil.log)))
.pipe(gulpif('*.css', minifyCss()))
.pipe(gulp.dest('www'));
});
// IMAGES
gulp.task('copy-images', function () {
return gulp.src(['app/images/*'])
.pipe(gulp.dest('www/images'));
});
// FONTS
gulp.task('copy-fonts', function () {
return gulp.src(['app/fonts/*'])
.pipe(gulp.dest('www/fonts'));
});
// TEMPLATES
gulp.task('bundle-templates', function () {
return gulp.src(['app/**/*.html', '!app/index.html'])
.pipe(gulpif('*.html', templateCache({module: 'jibbar'})))
.pipe(concat('templates.min.js'))
.pipe(gulp.dest('www/tmp'));
});
// COMPONENTS
gulp.task('bundle-components', function () {
return gulp.src(['app/**/*.module.js', 'app/**/*.js', '!app/vendor/**/*.js'])
.pipe(concat('script.min.js'))
.pipe(gulp.dest('www'));
});
// MERGE TEMPLATES AND COMPONENTS
gulp.task('merge-templates-and-components', gulp.parallel('bundle-templates', 'bundle-components'), function () {
return gulp.src(['www/script.min.js', 'www/tmp/templates.min.js'])
.pipe(concat('script.min.js'))
.pipe(gulp.dest('www'))
});
// MINIFY SCRIPTS
gulp.task('minify-scripts', gulp.parallel('merge-templates-and-components', 'bundle-templates', 'bundle-components'), function () {
return gulp.src('www/script.min.js')
.pipe(uglify().on('error', gulpUtil.log))
.pipe(gulp.dest('www'))
});
// CLEAN TEMP
gulp.task('clean', gulp.parallel('bundle-templates', 'bundle-components', 'merge-templates-and-components'), function () {
return gulp.src('www/tmp', {read: false})
.pipe(clean());
});
// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function () {
browserSync.reload();
});
//COPY IFRAME
gulp.task('copy-iframe', function () {
return gulp.src('app/components/builder/iframe/*')
.pipe(gulp.dest('www/app/components/builder/iframe'));
});
//COPY TINYMCE
gulp.task('copy-tinymce', function () {
return gulp.src('app/vendor/tinymce/**/*')
.pipe(gulp.dest('www/app/vendor/tinymce'));
});
//COPY VENDOR FILES
gulp.task('copy-vendor-files', function () {
return gulp.src(['app/vendor/angular.js','app/vendor/bootstrap.css','app/vendor/tooltip.css','app/vendor/jquery.js'])
.pipe(gulp.dest('www/app/vendor'));
});
//COPY APP IMAGES
gulp.task('copy-app-images', function () {
return gulp.src(['app/images/builder-image.svg','app/images/builder-dimensions.svg','app/images/info_icon.svg'])
.pipe(gulp.dest('www/app/images'));
});
gulp.task('dev', gulp.series(
'inject',
'svg-sprite',
'sass',
'dev-serve'
));
gulp.task('prod', gulp.series(
'inject',
'sass',
'copy-iframe',
'copy-tinymce',
'copy-vendor-files',
'copy-app-images',
'build-html',
'copy-images',
'copy-fonts',
'minify-scripts',
'clean',
'prod-serve'
));
The following image shows the endless loop
Can anyone please help me to find out what I am doing wrong here.
Thanks in advance.

Answer 1

In addition to my comment above, this is probably a problem:
// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function () {
browserSync.reload();
});
In your watch statements you call inject and reload, and then in the reload task you call inject first which updates your html files (timestamp if nothing else) and so the html watch is retiggered which calls inject and reload again, etc.
Just use:
// RELOAD BROWSER
gulp.task('reload', function () {
browserSync.reload();
});
and change all your watch's to gulp.series. Since you call reload last there is no need to call inject within the reload task again.
/* PROD */
gulp.task('prod-serve', function () {
browserSync.init({
server: './www'
});
gulp.watch('app/**/*.scss', gulp.series('sass', 'build-html'));
gulp.watch('app/**/*.html', gulp.series('inject', 'minify-scripts', 'reload'));
gulp.watch('app/**/*.js', gulp.series('inject', 'minify-scripts', 'reload'));
gulp.watch('app/images/**/*', gulp.series('copy-images', 'reload'));
gulp.watch('app/fonts/*', gulp.series('copy-fonts', 'reload'));
});
and do the same for your 'dev-serve' task.
[Edit to fix will only run once]
Change to:
// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function (done) {
browserSync.reload();
done();
});
Also I'm pretty sure you need to use this form:
// RELOAD BROWSER
//--------------------------------------|
gulp.task('reload', gulp.series('inject', function (done) {
browserSync.reload();
done();
}));
// another ) at the end above too.
See how the last anonymous function is included in the gulp.series call. You need to make that change in quite a few of your tasks.