Search code examples
cssgulp-watchgulp-less

Gulp-less watcher breaks when a less error is encountered in a file


I want to watch a folder of less files. When one of them is changed, I want to compile only the "styles.less" file (this file contains @imports to the rest of the files like "header.less", "navigation.less", etc.) For this, I created 2 tasks. When I run the task "watchless", everything is ok, it compiles the styles.less to styles.css. But if an error is encountered, when I edit a less file, the watcher breaks, even with gulp-plumber. How can I fix this?

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

var path_less = 'templates/responsive/css/less/';
var path_css = 'templates/responsive/css/';

gulp.task('less2css', function () {
    return gulp.src(path_less + 'styles.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest(path_css))
});

gulp.task('watchless', function() {
   gulp.watch(path_less + '*.less', ['less2css']);  // Watch all the .less files, then run the less task
});

Solution

  • Finally, it worked, using the following code:

    var gulp = require('gulp');
    var gutil = require('gulp-util');
    var less = require('gulp-less');
    var watch = require('gulp-watch');
    
    var path_less = 'templates/responsive/css/less/';
    var path_css = 'templates/responsive/css/';
    
    gulp.task('less2css', function () {
        gulp.src(path_less + 'styles.less')
            .pipe(less().on('error', gutil.log))
            .pipe(gulp.dest(path_css))
    });
    
    gulp.task('watchless', function() {
        gulp.watch(path_less + '*.less', ['less2css']);  // Watch all the .less  files, then run the less task
    });