Fails to pick up changes from gulp-watch

[morioust]

I'm unable to make gulp-compass compile anything coming piped through gulp-watch.

This works:

return gulp.src('app/styles/base.scss')
    .pipe(compass({
      sass: 'app',
      css: '.tmp'
    }));

This doesn't work:

return gulp.src('app/styles/base.scss')
    .pipe(watch('app/styles/base.scss'))
    .pipe(compass({
      sass: 'app',
      css: '.tmp'
    }));

The pipe does produce a vinyl on change (I verified with gulp-debug), but gulp-compass fails to compile them, as soon as I add the watch pipe.

[morioust]

It seems the issue is in index.js:

return through.obj(collectNames, compile);

The compilation happens only when through calls the flush function. My guess is that since gulp-watch keeps the stream open, it never calls the flush function.

[dancras]

Here's a solution I'm using. You should be able to do the following:

return gulp.src('app/styles/base.scss')
    .pipe(watch('app/styles/base.scss'))
    .pipe(compassSingleFile({
      sass: 'app',
      css: '.tmp'
    }));

/**
 * Run compass on single sass files as they come down the stream.
 *
 * The gulp-compass plugin collects all files and runs compass on them when the
 * stream is over, but the stream is never over when watching.
 */
function compassSingleFile(config) {

    var source = require('vinyl-source-stream');

    return require('event-stream').map(function(file, callback) {

        var result;

        var stream = source(file.relative)
            .pipe($.compass(config))
            .on('data', function(data) {
                result = data;
            })
            .on('end', function() {
                callback(null, result);
            });

        stream.write(file);
        stream.end();
    });
}

[ghetolay]

My way was to use both compass watch and gulp-watch. It's not optimal but works.

gulp.src('path_to_scss/*.scss')
     .pipe( compass({
           sass: 'path_to_scss',
           css: './tmp',
           task: 'watch'
    }))
   .pipe( gulp.watch('./tmp/*.css'))
   .pipe( ... );

Since there is no communication possible between compass and gulp (except parsing stdout) we kinda use files to do it. Compass watch .scss files. Gulp watch .css file.

So when you modify a .scss file => compass triggered => new css file produced => gulp-watch triggered => file added to stream => wonderful things happen.