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.

РЕДАКТИРОВАТЬ: Моя отредактированная задача 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');
    });
});

javascript gulp gulp-watch gulp-less
person turbalan    schedule 27.01.2015    source источник

Ответы (4)


arrow_upward
21
arrow_downward

Теперь это работает! Вот моя последняя и рабочая 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') все работает отлично.

person turbalan    schedule 28.01.2015
comment
Этот бит стал меньше пересматривать для меня this.emit('end'). Спасибо за ваш пост! - person ctong; 25.05.2015

arrow_upward
2
arrow_downward

Я всегда использую 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');
    });
});
person donnywals    schedule 27.01.2015
comment
Я тоже использую это. Он ловит ошибки в потоке, прежде чем они смогут его сломать. - person Alex McCabe; 27.01.2015

arrow_upward
0
arrow_downward

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

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

РЕДАКТИРОВАТЬ: если это не поможет, измените задачу 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);
});

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

person Tom    schedule 27.01.2015
comment
Если этот ответ работает, мой ответ был адаптирован из этого вопроса: stackoverflow.com/questions/21905875/ - person Tom; 27.01.2015
comment
Проблема остается. Кроме того, gulp-util не записывает ошибку в консоль. - person turbalan; 27.01.2015
comment
@PavelKuts - кажется, я нашел твою проблему. Смотрите мой обновленный ответ. - person Tom; 27.01.2015
comment
Посмотрите мой отредактированный вопрос, чтобы увидеть мою новую задачу gulp. gulp-less теперь работает после ошибки, но ошибка не записывается в консоль. - person turbalan; 27.01.2015
comment
В вашем отредактированном файле нет моего предложения. Что изменилось? - person Tom; 27.01.2015
comment
Я добавил this.emit(end); - person turbalan; 27.01.2015
comment
У вас есть двойная закрывающая скобка. Кроме того, код не выводит ошибки в консоль, gulp-less работает после ошибки и редактируется. Это все еще не работает. - person turbalan; 27.01.2015
comment
Ой! Сделано еще одно незначительное изменение: должно быть this.emit('end'), а «конец» должен быть строкой. - person Tom; 27.01.2015
comment
Я отмечу ответ как правильный, так как он запускает задачу gulp-less после ошибки. Но было бы неплохо увидеть разрешение, при котором ошибки выводятся в консоль. С текущим кодом логов нет. - person turbalan; 27.01.2015
comment
Да, это странно. Я использую почти идентичный код в одном из своих проектов и получаю все логи... Надеюсь, вы разберетесь - удачи! :) - person Tom; 27.01.2015
comment
Я разобрался, не без твоей помощи! Проверьте редактирование в моем вопросе, чтобы увидеть, где я ошибся, и, надеюсь, вы сможете использовать код в будущем. Ваше здоровье! - person turbalan; 28.01.2015
comment
О да! Должно было быть понятнее - ваш .on('error'...) должен идти сразу после .pipe(less()). Рад слышать, что вы разобрались! - person Tom; 28.01.2015

arrow_upward
0
arrow_downward

лучшее решение, которое я пробовал; 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;

}
person lmx_xml    schedule 06.02.2017