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 do

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.