gulp-watch-less - Watch LESS @imports

I’ve recently released a new plugin aptly named gulp-watch-less, which will monitor your .less files using the excellent gulp-watch task, and output changed files to the stream whenever the file itself or any of it’s @imports have changed.

It’s usage is pretty straight forward, using the same signature as the underlying gulp-watch plugin:

var gulp = require('gulp');
var watchLess = require('gulp-watch-less');
var less = require('gulp-less');

// LESS compilter configuration
var lessConfig = {
	paths: ['../imports']
};

gulp.task('less', function () {
    return gulp.src('**/*.less')
        .pipe(watchLess('less/file.less', {
        	name: 'LESS', // For output nice-ness!
            less: lessConfig // Passed to LESS parser when generating list of @imports
        }))
        .pipe(less(lessConfig))
        .pipe(gulp.dest('dist'));
});

Running gulp less will compile all .less files, and watch for changes to those watched and their @imports. Simple! It will also monitor the original files for changes to @import statements (additions, deletions, path updates etc) to ensure the associated files are watched correctly!

You can get the plugin using the usual npm install gulp-watch-less or visit the GitHub project for more documentation or to report an issue.

Big thanks to Vsevolod Strukchinsky for the modifying his existing (and awesome!) gulp-watch plugin to make this possible.

Happy building!