如何过滤 gulp 监视，监视 CSS 更改，以便让 browserSync 仅流式传输实际修改的文件

Question

我有一个gulp观看任务：

 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 监视或 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 监视，监视 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

browser-sync