3

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))
});

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

Watch

gulp.task('watch', ['setWatch', 'browserSync'], function () {
    gulp.watch('./stylesheets/**/*.scss', ['sass']);
});

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

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

Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
  • can you share ur watch task as well – harishr May 28 '15 at 08:47
  • I'll update it, but I know that is 100% working and running the sass tasks as you can see above. `Starting...` `finishing...` :) – Jamie Hutber May 28 '15 at 08:57
  • it works exact same way for me.. only difference i have is - it DEST path has ending / – harishr May 28 '15 at 10:32
  • Do you have one entry point? As in, do you you have multiple files that don't have underscores? In my current project i have more than one root scss file as it were. – Jamie Hutber May 28 '15 at 10:35
  • not clear as to what you mean by `multiple files that dont have underscores`, the `src` for me is also an array.. having more than 150 files – harishr May 28 '15 at 10:58
  • So if you use an underscore in scss it knows that this is an include for a file. Meaning it will only output one file. if you have a scss file called jamie.scss it will output jamie.css. This file can have as many includes are you like. Does your project have multiple files without underscores? But you said you're passing an array of files.. Maybe thats why its working for you? Rather than a glob like I am using. – Jamie Hutber May 28 '15 at 11:27
  • 1
    may be... nothing else i can think of.. – harishr May 28 '15 at 12:17
  • If you changed partial file, you'll need to save the root file as well. Works for me – Aris FM May 29 '15 at 06:22
  • Would you post your code? I'm saving the root files and still nothing is changing :D Thanks for helping though – Jamie Hutber May 29 '15 at 08:18
  • Check https://gist.github.com/cekerholic/9cf7504112d569e57051 – Aris FM May 29 '15 at 10:55
  • Thanks for giving me that. I now have it working, although I don't fully understand what was different about the code. I copied pasted yours. Knowing that it works for you though meant I tried harder – Jamie Hutber May 29 '15 at 11:13
  • Can you add your code as an answer please. I'll accept it. – Jamie Hutber May 29 '15 at 11:15

1 Answers1

7

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.

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/'));

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.

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.

Adrian Günter
  • 903
  • 2
  • 11
  • 23