Gulp + gulp-compass 编译，未更改的文件被重新注入到 BrowserSync

Question

我有一个 Gulp 任务设置来使用 compass 编译 .scss 文件，还有另一个正在运行的任务，它通过 BrowserSync 将更改的 CSS 注入浏览器。

gulp.task('browser-sync', function () {
    var options = {
        files: './public/css/**/*.css',
        proxy: ecs_domain,
        port: 3000
    };

    browserSync(options);
});

gulp.task('compass', function () {
    gulp.src('./scss/**/*.scss')
        .pipe(compass({
            css: cssOutput,
            sass: 'scss'
        }))
        .pipe(gulp.dest(cssOutput))
        .pipe(reload({stream: true}));
});

我发现的问题是，当 compass 运行时，我得到如下 sn-p 的输出：

identical public/css/main.css
[BS] File changed: public/css/main.css

即使文件 main.css 没有改变，compass 却莫名其妙地碰到了它，让 BrowserSync 认为它已经改变了，这意味着即使只有一个文件发生了变化，整套 CSS 文件都被改变了。重新注入到浏览器中。

有没有办法让相同/未更改的 *.css 文件不被触摸-ed，以便 BrowserSync 只能加载实际更改的文件？

我们有很多文件，所以整个过程很慢。

Answer 1

我找到了部分解决方案。我安装了 gulp-changed 并将输出从 compass 重定向到临时 .out 文件夹。然后使用以下任务创建一个监视以在文件与 public/css 和 .out 版本不同时运行 gulp-changed：

gulp.task('copy-changed-css', function () {
    gulp.src('.out/**/*.css')
        .pipe(changed('public/css', {hasChanged: changed.compareSha1Digest}))
        .pipe(gulp.dest('public/css'))
});