Gulp Changed不起作用

Question

我之前使用gulp改变了我的JS没有问题.但是现在我正在尝试使用gulp-changed和gulp-newer我的scss文件,而不检测哪个文件已更改.

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不会发生调用.如果缓存中的版本不同(未命中),则将内容写入磁盘.