在 LESS 文件中出现错误后，Gulp.js 停止编译 LESS-前端问题

Gulp.js stops compiling LESS when watched after there has been an error in the LESS files(在 LESS 文件中出现错误后，Gulp.js 停止编译 LESS)

本文介绍了在 LESS 文件中出现错误后，Gulp.js 停止编译 LESS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了 gulp 的问题.我运行 gulp-watch 以及 gulp-less 和 gulp-clean.一切运行良好.


I'm having a problem with gulp. I run gulp-watch along with gulp-less and gulp-clean. Everything is running perfectly.
当我编辑 somefile.less 并保存它时缺少分号，或者我不小心留下了尾随 ;s，我的代码中出现错误时保存时，gulp-less 在控制台中记录一个错误.在我修复它之后 gulp-watch 继续观看文件，但 gulp-less 不会触发并且它不会编译.当我停止 gulp 并在终端中再次运行它时，一切恢复正常.
When I edit somefile.less and I save it with a semi-colon missing or maybe I accidentally leave a trailing ;s, just have errors in my code when saving, gulp-less logs an error in the console. After I fix it gulp-watch continues watching the files, but gulp-less doesn't fire and it doesn't compile. When I stop gulp and run it again in the terminal everything goes back to normal.
这是我的 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"
}

最后，这是控制台中的消息:
Finally, here is the message in the console:
[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.

Can you please tell me what is wrong with the gulp-watch task and help me make it run gulp-less after the errors have been removed, without restarting 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 任务:

It works now! Here is my final, and working, gulp-less task:

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 的回调.

The problem was that, when there was an error in the LESS the task still went on and built the destination file. On top of that I placed the error logging function and the emit('end') as a callback to gulp.dest.

现在，当 less() 的回调是错误日志并且 emit('end') 一切正常.

Now, when the callback of less() is the error log and emit('end') everything works perfectly.

这篇关于在 LESS 文件中出现错误后，Gulp.js 停止编译 LESS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！