Gulp.js перестает компилировать LESS при просмотре после того, как в файлах LESS произошла ошибка

Question

У меня проблема с gulp. Я бегу gulp-watch вместе с gulp-less и gulp-clean. Все работает отлично.

Когда я редактировать somefile.less и я сохранить его с запятой отсутствует или, может быть, я случайно оставить заднюю ;s, просто ошибки в своем коде при сохранении, gulp-less регистрирует ошибку в консоли. После того, как я исправить это, gulp-watch продолжает просмотр файлов, но gulp-less не запускается и не компилируется. Когда я останавливаю gulp и запускаю его снова в терминале, все возвращается к норме.

Вот мой gulpfile.js:

var gulp = require('gulp'); 
var clean = require('gulp-clean'); 
var gutil = require('gulp-util'); 
var less = require('gulp-less'); 
var watch = require('gulp-watch'); 
var path = require('path'); 

gulp.task('clean', function() { 
    return gulp.src('src/main/webapp/styles/build', {read: false}) 
    .pipe(clean().on('error', gutil.log)) 
}); 

gulp.task('less', function() { 
    return gulp.src(['src/main/webapp/styles/main.less'], {base: 'src/main/webapp/styles/'}) 
    .pipe(less().on('error', gutil.log)) 
    .pipe(gulp.dest('src/main/webapp/styles/build')) 
    .on('error', gutil.log); 
}); 

gulp.task('watch', function() { 
    watch('src/main/webapp/styles/**/*.{less, css}', function() { 
     gulp.start('less') 
     .on('error', gutil.log); 
    }) 
}); 

gulp.task('default', ['clean'], function() { 
    gulp.start(['less', 'watch']) 
    .on('error', gutil.log); 
}); 

А вот мой devDependencies:

"devDependencies": { 
    "gulp": "^3.8.10", 
    "gulp-clean": "^0.3.1", 
    "gulp-less": "^2.0.1", 
    "gulp-util": "^3.0.2", 
    "gulp-watch": "^3.0.0" 
} 

Наконец, вот сообщение в консоли:

[10:21:03] imports/productSearchPage.less was changed 
[10:21:03] Starting 'less'... 
[10:21:03] { [Error: Unrecognised input. Possibly missing something in file /src/main/webapp/styles/imports/productSearchPage.less line no. 1008] 
    type: 'Parse', 
    filename: '/src/main/webapp/styles/imports/productSearchPage.less', 
    index: 19127, 
    line: 1008, 
    callLine: NaN, 
    callExtract: undefined, 
    column: 0, 
    extract: [ '', '', undefined ], 
    message: 'Unrecognised input. Possibly missing something in file /src/main/webapp/styles/imports/productSearchPage.less line no. 1008', 
    stack: undefined, 
    lineNumber: 1008, 
    fileName: '/src/main/webapp/styles/imports/productSearchPage.less', 
    name: 'Error', 
    showStack: false, 
    showProperties: true, 
    plugin: 'gulp-less', 
    __safety: { toString: [Function] } } 
[10:21:04] imports/productSearchPage.less was changed 
[10:21:08] imports/productSearchPage.less was changed 
^C 

Можете ли вы сказать мне что не так с задачей gulp-watch и помогите мне ke он запускает gulp-less после устранения ошибок, без перезапуска gulp.

EDIT: отредактированные gulp-less задачу

gulp.task('less', function() { 
    return gulp.src(['src/main/webapp/styles/main.less'], {base: 'src/main/webapp/styles/'}) 
    .pipe(less().on('error', gutil.log)) 
    .pipe(gulp.dest('src/main/webapp/styles/build')) 
    .on('error', function(err) { 
     gutil.log(err); 
     this.emit('end'); 
    }); 
}); 

Answer 1

Он работает сейчас! Вот моя последняя, ​​и работа, gulp-less задачи:

gulp.task('less', function() { 
    return gulp.src(['src/main/webapp/styles/main.less'], {base: 'src/main/webapp/styles/'}) 
    .pipe(less().on('error', function(err){ 
     gutil.log(err); 
     this.emit('end'); 
    })) 
    .pipe(gulp.dest('src/main/webapp/styles/build')) 
}); 

Проблема заключалась в том, что, когда произошла ошибка в LESS задача все еще продолжала и построила файл назначения. Кроме того, я поместил функцию регистрации ошибок и emit('end') в качестве обратного вызова на gulp.dest.

Теперь, когда обратный вызов less() является журналом ошибок и emit('end') все работает отлично.

Answer 2

Я просто установить это для моего личного проекта. Согласно Gulp docs, вы можете просто использовать gulp.watch:

gulp.task('watch', function() { 
    gulp.watch('src/main/webapp/styles/**/*.{less, css}', ['less']) 
     .on('error', gutil.log); 
}); 

EDIT: Если это не помогает, изменить less задачу:

gulp.task('less', function() { 
    return gulp.src(['src/main/webapp/styles/main.less'], {base: 'src/main/webapp/styles/'}) 
    .pipe(less()) 
    .on('error', function (err) { 
     gutil.log(err); 
     this.emit('end'); 
    }) 
    .pipe(gulp.dest('src/main/webapp/styles/build')) 
    .on('error', gutil.log); 
}); 

Адаптировано из this comment.

Answer 3

Я всегда использую gulp-plumber для моей ошибки. Работает очень легко и регистрирует ошибку на консоли.

Пример:

gulp.task('less', function() { 
    return gulp.src(['src/main/webapp/styles/main.less'], {base: 'src/main/webapp/styles/'}) 
    .pipe(plumber()) 
    .pipe(less().on('error', gutil.log)) 
    .pipe(gulp.dest('src/main/webapp/styles/build')) 
    .on('error', function(err) { 
     gutil.log(err); 
     this.emit('end'); 
    }); 
}); 

Answer 4

лучшее решение, которое я пробовал; https://github.com/gulpjs/gulp/blob/master/docs/recipes/combining-streams-to-handle-errors.md

var combiner = require('stream-combiner2'); 
gulp.task('multi:less', function(done) { 
    var combined = combiner.obj([ 
     gulp.src(srcs), 
     less(), 
     autoprefixer({ 
      browsers: ['last 6 versions'], 
      cascade: false 
     }), 
     isDev ? null : cleanCss(), 
     gulp.dest(targetDir + 'css/multi/'), 
    ].filter(v => v)); 

    // any errors in the above streams will get caught 
    // by this listener, instead of being thrown: 
    combined.on('error', console.error.bind(console)); 
    combined.on('end',() => {}); //done have been call when return combined; 
    return combined; 

}