Question

我有一个gulp watch任务：

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

此任务侦听css文件的更改并启动＆＃34; css＆＃34; 任务。

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只传输实际修改过的文件？而不是所有人......

有什么想法吗？

Answer 1

您可以调用gulp.watch() with a glob and callback并使用传递给回调的事件来确切地知道哪个css文件已更改。

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

将手表更改为此后，您的示例中的css任务将不再需要。

如何过滤gulp watch，它监视CSS的变化，以便让browserSync只传输实际修改过的文件

1 个答案: