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'.

It's seems that gulp-compass doesn't have support for 'watching'. — nikoskip, Apr 21 '14 at 14:23
I just realized if I comment the three last lines of 'compass' task, the watch function in combination with 'compass' task works perfect. Very odd. — nikoskip, Apr 21 '14 at 14:48

score 0 · Answer 1 · answered Apr 21 '14 at 14:03

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

When would I use clean? I cannot see any difference in the documentation. — Tim, Jun 24 '14 at 20:48

score 0 · Accepted Answer · answered Apr 21 '14 at 15:00

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' }));
});

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

2 Answers2