Can't get gulp-less to run only if file has changed

Question

I can't get gulp-less to not process everything, everytime. I've tried:

1. updating my version of gulp
2. using gulp-changed
3. using gulp-newer

It works with gulp-ngmin, but not with gulp-less

So this processes test.js only if I change test.js:

var SRC = 'test.js';
var DEST = 'dist';

gulp.task('test', function () {
    return gulp.src(SRC)
        .pipe(changed(DEST))
        // ngmin will only get the files that
        // changed since the last time it was run
        .pipe(ngmin())
        .pipe(gulp.dest(DEST));
});

But everytime I run this task, it computes the less

What is wrong here?

var SRC = 'test.less';
var DEST = 'dist';

gulp.task('test', function () {
    return gulp.src(SRC)
        .pipe(changed(DEST))
        .pipe(less({
                paths: [path.join(__dirname, 'less', 'includes')]
            }))
        .pipe(gulp.dest(DEST));
});

Answer 1

Actually Nikita's statement is false, it does work and it is it's purpose, just make sure you are setting it up correctly. In my case I have this:

var gulp         = require('gulp');
var less         = require('gulp-less');
var changed      = require('gulp-changed');

gulp.task('less', function () 
{  
    gulp.src('./src/less/pages/*.less')
        .pipe(changed( 'outputDir/css', {extension: '.css'}))
        .pipe(less({
            paths: [ './src/less/' ]
        }))
        .pipe(gulp.dest( 'outputDir/css') );
});

My gulp.src points to the folder where I have my main LESS files (files which import other LESS files) and I want them all compiled into the destination folder.

In .pipe(changed()) you must have the same target as you have in .pipe(gulp.dest()).

You can specify the extension to be compared to make it speedier ({extension: '.css'}) in pipe(changed()).

Perhaps you need to double check your paths: [path.join(__dirname, 'less', 'includes')]. In my case, I just placed there the root folder of all my less files. Some of my LESS files are in src/less/globals and others in src/less/common. The files I want to compile are in src/less/pages. So I used src/less/pages/*.LESS in gulp.src() and src/less/ in less pipe(less({paths: []})).

Answer 2

You can use gulp-less-changed package, it will check the less file compilation hierarchy, considering the @imports used

var gulp = require('gulp');
var lessChanged = require('gulp-less-changed');
var rename = require('rename');
var less = require('gulp-less');

var outputPat = "dest";

gulp.task('less', () => {
    return gulp.src('src/*.less')
        .pipe(lessChanged({
            getOutputFileName: file => rename(file, { dirname: outputPath, extname: '.css' })
        }))
        .pipe(less())
        .pipe(gulp.dest(outputPath));
});