Gulp Changed 不起作用 [英] Gulp Changed doesn't work

问题描述

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

I have previously used gulp changed with my JS without a problem. However now I am trying to use gulp-changed and gulp-newer on my scss files without it detecting which file has changed.

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

When changing a scss file it will output there has been a change but not change any 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']);
});

预期的输出文件存在，并且自昨天以来没有更改.

The output file expected exists and hasn't been changed since yesterday.

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

How can I get the scss to only compile changed files.

推荐答案

这几天也一直困扰着我，我想我找到了替代解决方案.我在上面看到你让它工作了，但我想我还是分享一下，以防它对某人有帮助.

This has been annoying me for the past few days as well, and I think I've found an alternate solution. I saw above that you got it working, but I figured I might as well share anyway in case it helps someone.

它需要 gulp-cached (我已经在使用，但我无法让 gulp-changed 或 gulp-newer 到也可以工作).最初，我尝试在编译管道的开头进行缓存，例如 changed|newer (应该如何工作?)，但这也失败了.一分钟后，我意识到我的明显错误:缓存操作需要在所有处理和输出文件准备好写入目标目录之后发生，但就在实际发生之前.

It requires gulp-cached (which I was already using, but I couldn't get gulp-changed or gulp-newer to work either). Initially I tried caching at the beginning of my compile pipeline like how changed|newer (are supposed to?) work, but that failed too. After a minute I realized my obvious mistake: cache operations need to happen after all processing and output files are ready to be written to the destination directory, but right before that actually happens.

尔格:

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

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

That's it. The cache is empty when the Gulp process starts so all Sass files are compiled, their compiled versions (CSS) added to the cache, and then written to disk.

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

Then, when you edit and save a SCSS file, Sass will again recompile everything matching the src glob, but if the contents match (cache hit) then only whitespace or formatting was changed in the SCSS, and the call to gulp.dest doesn't happen. If the version in the cache differs (miss), the contents are written to disk.

这篇关于Gulp Changed 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！