关于浏览器同步：如何过滤 gulp watch，它监视 CSS 更改，以便让 browserSync 仅流式传输实际修改的文件


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

我有一个 gulp watch 任务：

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

这个任务监听css文件的变化并启动"css"任务。

css 任务，使用 browserSync 流式传输更改：

1
2
3
4
5
6
7
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)，并使用 web-sockets 在浏览器中为所有文件流式传输更改。

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

即使我只更改 custom2.css

也会发生这种情况

现在，问题是：

如何过滤 gulp watch 或 CSS 任务，以便让 browserSync 仅流式传输实际修改的文件？并不是所有的……

有什么想法吗？

您可以使用 glob 和回调调用 gulp.watch()，并使用传递给回调的事件来准确了解哪个 css 文件发生了更改。

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

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