Gulp watch and compile less files with @import
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.