Gulp watch and compile less files with @import

Question

I'm trying to get my head around gulp to watch and compile a .less project + livereload. I have a style.less file which use @import. When i run the gulp task it doesn't seem to understand the imports. When I modify the main less file, gulp compiles the file and refresh the browser but if i modify only an import, the changes are ignored.

Here is my gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');

gulp.task('default', function() {
    return gulp.src('./style.less')
        .pipe(watch())
        .pipe(plumber())
        .pipe(less({
          paths: ['./', './overrides/']
        }))
        .pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
        .pipe(gulp.dest('./'))
        .pipe(livereload());
});

I tried not specifying the main file name in gulp.src('./*.less') but then all of the less files are compiled indvidually.

Thanks

Answer 1

Right now you are opening the single gulp.src file, and watching After you open the file with gulp. The following will split the watching and src into two tasks, allowing for separate file and src watching.

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var prefix = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');

gulp.task('less', function() {
    return gulp.src('./style.less')  // only compile the entry file
        .pipe(plumber())
        .pipe(less({
          paths: ['./', './overrides/']
        }))
        .pipe(prefix("last 8 version", "> 1%", "ie 8", "ie 7"), {cascade:true})
        .pipe(gulp.dest('./'))
        .pipe(livereload());
});
gulp.task('watch', function() {
    gulp.watch('./*.less', ['less']);  // Watch all the .less files, then run the less task
});

gulp.task('default', ['watch']); // Default will run the 'entry' watch task

When Any of the files found with *.less are altered it will then run the task which will compile just the src file. The @imports should be 'included' correctly, if not check the import settings.

Answer 2

You can use gulp-watch-less to this.