我在使用 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');
    });
});

最佳答案

现在可以了!这是我最后的工作，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') 一切正常时。

关于javascript - 在 LESS 文件中出现错误后，Gulp.js 停止编译 LESS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28166409/