gulp-changed with gulp-concat not working

Question

I want to compile only the .less files that have changed in order to speed up my debug/coding workflow.

Here is my gulp task:

gulp.src('core/**/*.less')
  .pipe(changed('core'))
  .pipe(less().on('error', handleError))
  .pipe(autoprefixer('last 2 version'))
  .pipe(remember())
  .pipe(concat('main.min.css'))
  .pipe(gulp.dest('core'))
  .on('end', resolve)
  .on('error', reject);

I used gulp-changed and because it didn't work at first, I tried to use gulp-remember as well, but with no effect. The watch works, it compiles super fast, but it has no effect at all.

If I remove changed('core') and remember() it works, but it's slower (around 16 seconds).

Answer 1

gulp-changed is a poor fit for your use case, since it is meant to compare input files with output files on disk.

Say you have an input file core/foo/bar.less that you pipe through changed('dist'). What this does is to look for an output file dist/foo/bar.less. If the input file is newer than the output file, it is passed through. Otherwise it is filtered out.

That means using changed('core') cannot possibly work. It compares the input file core/foo/bar.less with the output file core/foo/bar.less. But they're the same file. That means the input file can never be newer than the output file and is never passed through.

There's another problem. You don't have one output file for each input file. All your .less files are compiled into one main.min.css file. While you can make this work using a custom comparator it doesn't work out of the box.

What you actually want is gulp-cached. Instead of comparing each input file with an output file on disk it compares each input file with a previous version of the same file that has been cached in memory.

var cached = require('gulp-cached');

gulp.task('css', function() {
  return gulp.src('core/**/*.less')
    .pipe(cached('less'))
    .pipe(less())
    .pipe(autoprefixer('last 2 version'))
    .pipe(remember('less'))
    .pipe(concat('main.min.css'))
    .pipe(gulp.dest('core'));
});