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

У меня проблема с 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 и помочь мне запустить ее 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');
    });
});

Ответы

Ответ 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'), все работает отлично.

Ответ 2

Я всегда использую 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');
    });
});

Ответ 3

Я только что установил это для своего личного проекта. Согласно 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);
});

Адаптировано из этот комментарий.

Ответ 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;

}