Gulp.js stoppt die Kompilierung weniger, wenn beobachtet, nachdem ein Fehler in den WENIGER Dateien

Question

Ich habe ein Problem mit gulp. Ich laufe gulp-watch zusammen mit gulp-less und gulp-clean. Alles läuft perfekt.

Wenn ich somefile.less bearbeiten und ich spare es mit einem Semikolon fehlt oder vielleicht versehentlich lasse ich ein nachlauf ;s, nur Fehler in meinem Code haben beim Speichern, meldet gulp-less einen Fehler in der Konsole. Nachdem ich es behoben habe gulp-watch weiterhin beobachtet die Dateien, aber gulp-less feuert nicht und es kompiliert nicht. Wenn ich gulp stoppe und es wieder im Terminal laufe geht alles wieder normal. Hier

ist mein 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); 
}); 

Und hier sind meine 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" 
} 

Schließlich, hier ist die Nachricht in der Konsole:

[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 

Können Sie mir bitte sagen, mir was ist los mit der gulp-watch Aufgabe und hilf mir ma ke it run gulp-less, nachdem die Fehler entfernt wurden, ohne neu zu starten gulp.

EDIT: Meine bearbeitet gulp-less Aufgabe

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

Answer 1

Es funktioniert jetzt! Hier ist mein letzter und Arbeits, gulp-less Aufgabe:

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

Das Problem war, dass, wenn es war ein Fehler in den LESS die Aufgabe noch auf ging und baute die Zieldatei. Außerdem habe ich die Fehlerprotokollierungsfunktion und die emit('end') als Rückruf an gulp.dest platziert.

Jetzt, wenn der Rückruf von less() ist das Fehlerprotokoll und emit('end') alles funktioniert perfekt.

Answer 2

Ich habe dies nur eingestellt für mein persönliches Projekt auf. Nach dem Gulp docs, können Sie einfach gulp.watch verwenden:

gulp.task('watch', function() { 
    gulp.watch('src/main/webapp/styles/**/*.{less, css}', ['less']) 
     .on('error', gutil.log); 
}); 

EDIT: Wenn dies nicht hilft, ändern Sie Ihre less Aufgabe:

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

Angepasst von this comment.

Answer 3

Ich verwende immer gulp-plumber für meinen Fehler zu fangen. Funktioniert sehr einfach und protokolliert den Fehler auf der Konsole.

Beispiel:

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

Answer 4

die beste Lösung, die ich ausprobiert habe; 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; 

}