How to filter a gulp watch, which watches for CSS changes, in order to let browserSync stream only the actual modified files

Question

I have a gulp watch task:

 gulp.watch([
        basePath+'/css/**/*.css'
    ], ['css']);

This task listens to changes of css files and starts the "css" task.

The css task, uses browserSync to stream the changes:

var gulp = require('gulp'),
        browserSync = require('browser-sync');

    gulp.task('css', function() {
        return gulp.src(basePath+'/css/**/*.css', {'read': false})
            .pipe(browserSync.stream());
    });

The problem is, when I change only 1 css file, browserSync see's all the css files in the folder (due to gulp.src) and, using web-sockets, streams the changes in the browser for all the files.

[BS] 3 files changed (custom.css, custom2.css, main.css)

This happens even if I change only custom2.css

Now, the question:

How to filter the gulp watch, or CSS task, in order to let browserSync stream only the actual modified files? and not all of them...

Any ideas?

Answer 1

You can invoke gulp.watch() with a glob and callback and use the event passed to the callback to know exactly which css file changed.

gulp.watch(basePath+'/css/**/*.css', function(event) {
  gulp.src(event.path, {read: false})
    .pipe(browserSync.stream());
});

After changing your watch to this, the css task in your example wouldn't be needed.