Gulp.js在监听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任务出了什么问题，并帮助我在错误被修复后运行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');
    });
});

- turbalan

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')时，一切都运行得很完美。

- turbalan

---

这一部分对我来说需要重新观看，即 this.emit('end')。感谢您的帖子！ - ctong

Answer 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');
    });
});

- donnywals

---

我也使用这个工具。它可以在流中捕获错误，避免它们破坏流程。 - Alex McCabe

Answer 3

我刚为自己的个人项目设置了这个。根据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);
});

源自此评论的改编。

- Tom

---

如果这个答案有效，那么我的答案是从这个问题中改编而来的：https://dev59.com/72Eh5IYBdhLWcg3w321G - Tom

问题依旧。此外，“gulp-util”未将错误记录到控制台。 - turbalan

@PavelKuts - 我想我找到了你的问题。看看我的更新答案。 - Tom

你编辑后的文件中没有包含我的建议 - 发生了什么变化？ - Tom

是的，这很奇怪。我在我的一个项目中使用几乎相同的代码，我可以得到所有的日志...希望你能解决它 - 祝你好运！ :) - Tom

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;

}

- lmx_xml