Gulp watch and compile less files with @import
gulp, gulp-less, javascript, livereload
Solution
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.
Problem
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