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中仅更改空格或格式，并调用{{ 1}}没有发生。如果缓存中的版本不同（未命中），则将内容写入磁盘。

Gulp Changed不起作用

1 个答案: