Как отфильтровать gulp watch, который отслеживает изменения CSS, чтобы позволить browserSync передавать только фактически измененные файлы

У меня есть задача наблюдения за глотком:

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

Эта задача прослушивает изменения в файлах css и запускает задачу "css".

Задача css использует browserSync для потоковой передачи изменений:

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

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

Проблема в том, что когда я меняю только 1 файл css, browserSync видит все файлы css в папке (из-за gulp.src) и, используя веб-сокеты, передает изменения в браузере для всех файлы.

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

Это происходит, даже если я меняю только custom2.css

Теперь вопрос:

Как отфильтровать gulp watch или задачу CSS, чтобы позволить browserSync передавать только фактически измененные файлы? и то не все...

Любые идеи?


gulp browser-sync
person Dany D    schedule 20.06.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете вызвать gulp.watch() с помощью glob и обратный вызов и используйте событие, переданное обратному вызову, чтобы точно узнать, какой файл css был изменен.

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

После смены часов на это задача css в вашем примере не понадобится.

person psalaets    schedule 20.06.2015