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}));
});

我发现的问题是，当罗盘运行时，我得到的输出就像下面的代码段一样：

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

即使文件 main.css 没有改变，罗盘也会以某种方式触及它，使得BrowserSync认为它已经改变了，这意味着即使只有一个文件发生了变化，整个CSS集合也是如此。文件被重新注入浏览器。

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

我们有相当多的文件，整个过程都很慢。

Answer 1

我找到了部分解决方案。我安装了从指南针到临时.out文件夹的gulp-changed和重定向输出。然后创建一个手表，当文件与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'))
});

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

1 个答案: