浏览器同步 - 如何过滤监视 CSS 更改的 gulp 手表，以便让 browserSync 仅流式传输实际修改的文件

Question

我有一个吞咽监视任务：

 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），并使用 web-sockets 在浏览器中流式传输所有文件的更改。

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

即使我只更改自定义2，也会发生这种情况.css

现在，问题来了：

如何过滤gulp手表或CSS任务，以便让browserSync仅流式传输实际修改的文件？ 而不是全部...

有什么想法吗？

Answer 1

您可以使用 glob 和回调调用 gulp.watch（），并使用传递给回调的事件来确切地知道哪个 css 文件发生了变化。

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

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