gulp-changed isn't filtering out non-changed files

Question

I'm attempting to use gulp-changed to prevent time consuming tasks occurring on unchanged files. My gulpfile.js has it setup like so:

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(changed("."))
        .pipe(concat(paths.concatCssDest))
        .pipe(autoprefixer({ browsers: ['> 5%'] }))  //support browsers with >5% market share
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

However each time I see everything is being ran:

[11:15:02] Starting 'min:js'...
[11:15:02] Starting 'min:css'...
[11:15:02] Finished 'min:css' after 79 ms
Process terminated with code 0.
[11:15:02] Finished 'min:js' after 121 ms
[11:15:02] Starting 'min'...
[11:15:02] Finished 'min' after 12 μs

Any reason gulp-changed isn't filtering these unchanged files?

Answer 1

First off you seem to misunderstand what it is that gulp-changed actually does. gulp-changed cannot prevent tasks from running. That means these two lines:

[11:15:02] Starting 'min:css'...
[11:15:02] Finished 'min:css' after 79 ms

will appear in gulp's log output even if not a single CSS file has changed. gulp-changed simply removes unchanged files from the stream, so that they don't reach later pipe() stages. The files are still processed up to the point where they reach changed().

(Coincidentally I wrote an answer just yesterday that also deals with gulp-changed and contrasts its mode of operation with gulp.watch() and gulp-watch. Might be of interest too.)

Secondly, how does gulp-changed know if a file has changed? It compares the source files with the destination files. If the destination files are older than the source files, the source files must have changed.

For that to work, gulp-changed must be able to map from a source file to a destination file. However you have multiple source files and just one destination file (your concatenated file). That means you would have to provide a custom hasChanged handler to map from your source files to your destination file.

Thirdly, even if you did all that your task still couldn't possibly work the way you want it to. Since gulp-changed only let's those files through that have been changed, only those files will end up in your concatenated output file.

Say you want to concatenate foo.css and bar.css into all.css. This would work fine the first time. But if you then change bar.css, only bar.css will end up in all.css.

Since you always need all of your CSS files as input, you cannot use gulp-changed in combination with gulp-concat.

That being said, if you want to speed up your min:css task when it is called from gulp.watch() you can follow the official Gulp.js incremental rebuilding recipe:

gulp.task("min:css", function () {
  return gulp.src([paths.css, "!" + paths.minCss])
    .pipe(cached('cssCache'))
    .pipe(autoprefixer({ browsers: ['> 5%'] }))
    .pipe(cssmin())
    .pipe(remember('cssCache'))
    .pipe(concat(paths.concatCssDest))
    .pipe(gulp.dest("."));
});