gulp-watch endlessly compiling without changes being made to files

Question

For some reason my scripts gulp-watch task endlessly runs in a loop (so much so it's activating the fan on my MBP!), despite the fact I'm using the same gulp file in various other projects.

It just keeps compiling scripts over and over again. Tried deleting all the node modules and using npm install again. But same problem. I don't have the same issue with the sass compilation task I've setup.

I've even tried excluding compiling vendor code like jquery / other plugins. gulp.watch(['./js/*.js', '!./js/vendor/**'], ['scripts']);

But still having the same issue.

Also tried commenting out some of the scripts and reintroducing them one by one. But there doesn't seem to be a consistent offending script.

// include gulp
var gulp = require('gulp'); 


// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------

var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var changed = require('gulp-changed');


// --------------------------------------------------------------
// JS
// ---------------------------------------------------------------

gulp.task('scripts', function() {
gulp.src(['./js/script.js'])
    .pipe(include())
    .pipe(concat('script-dist.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./js/'))
    .pipe(livereload());
 });

// --------------------------------------------------------------
// Sass
// ---------------------------------------------------------------

gulp.task('styles', function() {
gulp.src('./ui/scss/styles.scss')
    .pipe(include())
    .pipe(sass({
        errLogToConsole: true
    }))
    .pipe(minifycss())
    .pipe(gulp.dest('./ui/css/'))
    .pipe(livereload());
});

gulp.task('watch', function() {

gulp.watch('./ui/scss/*.scss', ['styles']);
gulp.watch('./js/*.js', ['scripts']);});

gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);

livereload.listen();

Terminal output (path replaced with 'PATH'):

[15:49:17] Starting 'scripts'...
[15:49:17] Finished 'scripts' after 2.08 ms
[15:49:18] /_PATH_//js/script-dist.js reloaded.
[15:49:18] Starting 'scripts'...
[15:49:18] Finished 'scripts' after 2.58 ms
[15:49:19] /_PATH_//js/script-dist.js reloaded.
[15:49:19] Starting 'scripts'...
[15:49:19] Finished 'scripts' after 1.41 ms
[15:49:19] /_PATH_//js/script-dist.js reloaded.
[15:49:30] Starting 'scripts'...
[15:49:30] Finished 'scripts' after 1.42 ms
[15:49:31] /_PATH_//js/script-dist.js reloaded.
[15:49:31] Starting 'scripts'...
[15:49:31] Finished 'scripts' after 2.45 ms
[15:49:32] /_PATH_//js/script-dist.js reloaded.
[15:49:32] Starting 'scripts'...
[15:49:32] Finished 'scripts' after 1.17 ms
[15:49:33] /_PATH_//js/script-dist.js reloaded.
[15:49:33] Starting 'scripts'...
[15:49:33] Finished 'scripts' after 1.84 ms
[15:49:34] Starting 'scripts'...
[15:49:34] Finished 'scripts' after 1.1 ms
[15:49:35] /_PATH_//js/script-dist.js reloaded.
[15:49:35] Starting 'scripts'...
[15:49:35] Finished 'scripts' after 1.73 ms
[15:49:36] Starting 'scripts'...
[15:49:36] Finished 'scripts' after 1.12 ms
[15:49:36] /_PATH_//js/script-dist.js reloaded.
[15:49:36] /_PATH_//js/script-dist.js reloaded.
[15:49:36] Starting 'scripts'...
[15:49:36] Finished 'scripts' after 908 μs
[15:49:37] /_PATH_//js/script-dist.js reloaded.
[15:49:37] /_PATH_//js/script-dist.js reloaded.

Answer 1

You are watching *.js files in your js folder, and then running the scripts task.

gulp.watch('./js/*.js', ['scripts']);});

Your scripts task is then writing a .js file the js folder

.pipe(gulp.dest('./js/'))

... which then triggers the watch condition again.... and you now have a loop.