在LESS文件中出现错误后观察Gulp.js停止编译LESS [英] Gulp.js stops compiling LESS when watched after there has been an error in the LESS files

问题描述

我遇到 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'）; 
 $ b $ gulp.task（'clean'，function（）{
 return gulp.src（'src / main / webapp / styles / build'，{read：false}）
。（干净（）。on（'error'，gutil.log））
}）; 
 $ b 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）; 
}）; 
 $ b $ 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]开始'少'... 
 [10:21:03] {[错误：无法识别的输入。可能缺少文件/src/main/webapp/styles/imports/productSearchPage.less行号。 1008] 
类型：'Parse'，
文件名：'/src/main/webapp/styles/imports/productSearchPage.less'，
索引：19127，
行：1008 ，
 callLine：NaN，
 callExtract：undefined，
 column：0，
 extract：[''，''，undefined]，
 message：'无法识别的输入。可能缺少文件/src/main/webapp/styles/imports/productSearchPage.less行号。 1008'，
 stack：undefined，
 lineNumber：1008，
 fileName：'/src/main/webapp/styles/imports/productSearchPage.less'，
 name：'Error '，
 showStack：false，
 showProperties：true，
插件：'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'）; 
 $ b .pipe（gulp.dest（'src / main / webapp / styles / build'））
}）; 
  

问题在于，当 LESS 该任务仍然继续并构建目标文件。最重要的是，我将错误记录函数和发出（'end'）作为回调给 gulp.dest
$ b 现在，当 less（）的回调是错误日志并且 emit（'end'）一切正常。

I'm having a problem with gulp. I run gulp-watch along with gulp-less and gulp-clean. Everything is running perfectly.

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.

Here is my 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);
});

And here are my 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

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.

EDIT: My edited 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', gutil.log))
    .pipe(gulp.dest('src/main/webapp/styles/build'))
    .on('error', function(err) {
        gutil.log(err);
        this.emit('end');
    });
});

解决方案

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

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.

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

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