Gulp Changed doesn't work
I have previously used gulp with my JS with no problem. But now I'm trying to use gulp-changed
, and gulp-newer
in my files scss
, not finding a file was modified.
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))
});
When the scss file is changed, it will output that there have been changes, but none have changed scss
[BS] Watching files...
[09:26:13] Starting 'sass'...
[09:26:14] Finished 'sass' after 180 ms
Clock
gulp.task('watch', ['setWatch', 'browserSync'], function () {
gulp.watch('./stylesheets/**/*.scss', ['sass']);
});
Expected output file and has not been modified since yesterday.
How can I get scss to only compile the changed files.
source to share
This has annoyed me for the past few days as well, and I think I have found an alternative solution. I saw above that you worked it out, but I thought I could share it as well in case it helps someone.
This requires gulp-cached
(which I already used, but I couldn't get gulp-changed
or gulp-newer
work). I first tried to cache at the beginning of my compilation pipeline, how does it work changed|newer
(should it?), But that didn't work either. After a minute, I realized my obvious mistake: cache operations should happen after all processing and output files are ready to be written to the target directory, but before that they actually happen.
Ergo:
gulp.watch('path/to/**/*.scss')
.pipe(sass())
<<... rename, minify, etc ...>>
.pipe(cached('sass_compile'))
.pipe(gulp.dest('path/to/dest/'));
What is it. The cache is empty when the Gulp process starts, so all Sass files are compiled, their compiled versions (CSS) are added to the cache, and then written to disk.
Then when you edit and save the SCSS file, Sass will recompile again whatever matches the src step, but if the content matches (cache hit), then only spaces or formatting have been changed in SCSS and the call gulp.dest
does not occur. If the version in the cache is different (skip), the contents are written to disk.
source to share