大口大口地改变不起作用

Question

我以前使用过gulp改变我的JS没有问题。然而，现在我试图在我的scss文件上使用gulp-changed和gulp-newer，而没有检测到哪个文件已经更改。

var changed    = require('gulp-changed');
var newer = require('gulp-newer');
var SRC = './stylesheets/**/*.scss';
var DEST = './stylesheets';
gulp.task('sass', function () {   
    return gulp.src(SRC)
        .pipe(changed(DEST)) //tried newer here as well 
        .pipe(sass())
        .pipe(gulp.dest(DEST))
});

当更改scss文件时，它将输出有更改，但不更改任何scss

[BS] Watching files...
[09:26:13] Starting 'sass'...
[09:26:14] Finished 'sass' after 180 ms

gulp.task('watch', ['setWatch', 'browserSync'], function () {
    gulp.watch('./stylesheets/**/*.scss', ['sass']);
});

期望的输出文件已存在，并且自昨天以来未被更改。

如何让scss只编译更改过的文件

Answer 1

这个问题在过去的几天里也一直困扰着我，我想我已经找到了一个替代的解决方案。我在上面看到你让它工作了，但我想我还是分享一下吧，万一它能帮助到别人。

它需要gulp-cached(我已经在使用，但我不能得到gulp-changed或gulp-newer的工作)。最初，我尝试在我的编译管道开始缓存像changed|newer(应该是?)的工作，但这也失败了。一分钟后，我意识到我的明显错误:缓存操作需要在所有处理和输出文件准备好写入目标目录之后发生，但是在发生之前。

因此:

gulp.watch('path/to/**/*.scss')
    .pipe(sass())
    <<... rename, minify, etc ...>>
    .pipe(cached('sass_compile'))
    .pipe(gulp.dest('path/to/dest/'));

就是这样。当Gulp进程启动时，缓存是空的，所以所有的Sass文件都被编译，它们的编译版本(CSS)被添加到缓存中，然后写入磁盘。

然后，当您编辑并保存SCSS文件时，Sass将再次重新编译与src glob匹配的所有内容，但如果内容匹配(缓存命中)，则SCSS中仅更改空白或格式，并且不会发生对gulp.dest的调用。如果缓存中的版本不一致(miss)，则将内容写入磁盘