0

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).

Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
Adavo
  • 865
  • 3
  • 11
  • 21

1 Answers1

3

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'));
});
Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
  • Very well explained. I have to assume that I didn't really take the time to understand precisely how gulp-changed / gulp-remember / gulp-cached works. I just saw some tutorial explaining that gulp-changed is nice and some code sample and I totally misunderstand the basis. Your explanation is very clear and precise, thank you very much for the time that you take to answer me. It works, but I will improve my knowledge of this cached/remember in order to avoid issues with it later ;-) – Adavo May 10 '16 at 01:35