問題描述

我遇到了 gulp 的問題.我運(yùn)行 gulp-watch 以及 gulp-less 和 gulp-clean.一切運(yùn)行良好.

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

當(dāng)我編輯 somefile.less 并保存它時缺少分號，或者我不小心留下了尾隨 ;s，我的代碼中出現(xiàn)錯誤時保存時，gulp-less 在控制臺中記錄一個錯誤.在我修復(fù)它之后 gulp-watch 繼續(xù)觀看文件，但 gulp-less 不會觸發(fā)并且它不會編譯.當(dāng)我停止 gulp 并在終端中再次運(yùn)行它時，一切恢復(fù)正常.

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 任務(wù)有什么問題，并幫助我在刪除錯誤后使其運(yùn)行 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 任務(wù)

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

推薦答案

現(xiàn)在可以了！這是我最后的工作，gulp-less 任務(wù):

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

問題是，當(dāng) LESS 中出現(xiàn)錯誤時，任務(wù)仍然繼續(xù)并構(gòu)建目標(biāo)文件.最重要的是，我放置了錯誤記錄函數(shù)和 emit('end') 作為對 gulp.dest 的回調(diào).

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.

現(xiàn)在，當(dāng) less() 的回調(diào)是錯誤日志并且 emit('end') 一切正常.

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

這篇關(guān)于在 LESS 文件中出現(xiàn)錯誤后，Gulp.js 停止編譯 LESS的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！