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

问题描述

我以前使用过的gulp随我的JS一起更改没有问题.但是，现在我尝试在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.

Ergo:

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中仅空格或格式被更改，并且对不会发生.如果缓存中的版本不同(未命中)，则将内容写入磁盘.

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屋！