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

Question

我有一个 Gulp 任务设置来使用指南针编译 .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 运行时，我得到如下代码段中的输出：

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

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

有没有办法让相同/未更改的 *.css 文件保持不变，以便 BrowserSync 只能加载实际更改的文件？

我们有很多文件，使整个过程非常缓慢。

Answer 1

I've found a partial solution. I installed gulp-changed and redirected output from compass to a temporary .out folder. Then created a watch to run gulp-changed when files differ from public/css and .out version using the following task:

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