gulp.js: 'gulp.watch' is not really watching changes

Question

I'm having problem using gulp.watch for checking changes on my .scss and images files. It's only working when I create or edit a JavaScript file, so 'watch' is working, but only for JavaScript files. This is my code:

var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
compass = require('gulp-compass'),
minifyCSS = require('gulp-minify-css'),
imagemin = require('gulp-imagemin'),
notify = require('gulp-notify'),
clean = require('gulp-clean'),
filesize = require('gulp-filesize');

gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('main.js')) 
        .pipe(gulp.dest('build/dev/js'))
        .pipe(filesize())
        .pipe(uglify())
        .pipe(gulp.dest('build/production/js'))
        .pipe(filesize())
        .pipe(notify({ message: 'JavaScript task complete' }));
});

gulp.task('compass', function() {
    return gulp.src(['src/sass/**/*.scss'])
        .pipe(compass({
            css: 'src/css',
            sass: 'src/sass',
            image: 'src/images'
        }))
        .pipe(gulp.dest('build/dev/css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/production/css'))
        .pipe(notify({ message: 'Compass task complete' }));
});

gulp.task('images', function() {
    return gulp.src('src/images/**/*')
        .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
        .pipe(gulp.dest('build/dev/img'))
        .pipe(gulp.dest('build/production/img'))
        .pipe(notify({ message: 'Images task complete' }));
});

gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['scripts']);
    gulp.watch('src/sass/**/*.scss', ['compass']);
    gulp.watch('src/images/**/*', ['images']);
});


gulp.task('clean', function() {
    return gulp.src(['build/*'], {read: false})
        .pipe(clean());
});


gulp.task('default', ['clean'], function () {
    gulp.start('scripts', 'compass', 'images', 'watch');
});

All the tasks run as expected when they are called on 'default'.

Answer 1

Ok, finally the problem was the gulp-notify plugin. I just commented those lines on 'compass' and 'images' task and gulp.watch run as expected.

My compass task

gulp.task('compass', function() {
    return gulp.src('src/sass/**/*.scss')
        .pipe(compass({
            css: 'src/css',
            sass: 'src/sass',
            image: 'src/images'
        }))
        .pipe(gulp.dest('build/dev/css'))
        .pipe(minifyCSS())
        .pipe(gulp.dest('build/production/css'));
        //pipe(notify({ message: 'Compass task complete' }));
});

My images task

gulp.task('images', function() {
    return gulp.src('src/images/**/*')
        .pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
        .pipe(gulp.dest('build/dev/img'))
        .pipe(gulp.dest('build/production/img'));
        //.pipe(notify({ message: 'Images task complete' }));
});

Answer 2

A couple of hints regarding your code sample:

• There is really no need in using gulp-clean plug-in in your case (it's more suited for other scenarios). Use rimraf instead.
• Try to avoid using gulp.start(...), as it's not supposed to be used by end users and its support most likely will be dropped in future releases. You can try using existing dependency resolution mechanism. For example, if your 'scripts', 'images' and 'compass' tasks all depend on 'clean', and your 'default' class depends on 'scripts', 'images' and 'compass' then the 'clean' task will be executed only once.

You may want to look at gulpfile.js sample in this project:

https://github.com/KriaSoft/SPA-Seed.Front-end