javascript - Gulp - 导致任务停止的错误

Question

我正在使用 Gulp 和 Browserify 建立一个项目，但我在让 watch 命令捕获错误并继续观察时遇到了一些麻烦。

我使用默认任务(下面的代码)运行“gulp”命令。此任务使用 watch 设置以捕获文件中的任何更改，然后使用 Browserify 编译我的 js 并编译我的 scss 文件。

一切顺利，除非我在我的 js 中出现语法错误。基本上，如果发生这种情况，控制台会显示错误，但不再捕获对我的 js 文件的任何更改。

我最初省略了导致整个 watch 任务失败的错误处理，但现在我在那里 - watch 任务仍在进行并且它对我的 scss 工作正常(即使我犯了语法错误)但它根本不会捕捉到我的 js 的任何变化。

var gulp        = require('gulp'),
    gutil       = require('gulp-util'),
    browserify  = require('browserify'),
    changed     = require('gulp-changed'),
    compass     = require('gulp-compass'),
    uglify      = require('gulp-uglify'),
    livereload  = require('gulp-livereload'),
    transform   = require('vinyl-transform'),
    sassSources = ['_src/sass/**/*.scss'],
    jsSources   = ['_src/js/admin.js', '_src/js/main.js'];

var onError = function (err) {
    gutil.log(gutil.colors.green(err));
};

gulp.task('js', function() {

    var browserified = transform(function(filename) {
        var b = browserify(filename);
        return b.bundle();
    });

    return gulp.src(jsSources)
        .pipe(browserified)
        .pipe(uglify())
        .pipe(gulp.dest('assets/js'))

});

gulp.task('js-dev', function() {

    var browserified = transform(function(filename) {
        var b = browserify(filename);
        return b.bundle();
    });

    return gulp.src(jsSources)
        .pipe(browserified)
            .on('error', onError)
        .pipe(gulp.dest('assets/js'))
        .pipe(livereload())

});

gulp.task('sass', function() {

    gulp.src(sassSources)
        .pipe(compass({
            style: 'compressed',
            sass: '_src/sass',
            css: 'assets/css',
            font: 'assets/fonts',
            image: 'assets/images',
            javascript: 'assets/js',
            relative: true,
            require: ['breakpoint']
        }))
        .pipe(gulp.dest('assets/css'))

});

gulp.task('sass-dev', function() {

    gulp.src(sassSources)
        .pipe(changed('assets/css'))
        .pipe(compass({
            style: 'expanded',
            sass: '_src/sass',
            css: 'assets/css',
            font: 'assets/fonts',
            image: 'assets/images',
            javascript: 'assets/js',
            relative: true,
            require: ['breakpoint']
        }))
            .on('error', onError)
        .pipe(gulp.dest('assets/css'))
        .pipe(livereload())

});

gulp.task('watch', function() {
    livereload.listen()
    gulp.watch(jsSources, ['js-dev'])
    gulp.watch(sassSources, ['sass-dev'])
    gulp.watch(['**/*.php']).on('change', function(file) { livereload.changed(file.path) })
})

gulp.task('default', ['watch', 'js-dev', 'sass-dev'])
gulp.task('build', ['js', 'sass'])

上面的代码是我的整个 gulpfile 但我正在测试的任务是默认任务 - 处理 js 的任务是“js-dev”任务。

为什么我的代码会导致 js-dev 任务失败，而我的具有相同错误处理的 sass-dev 任务不会失败？

谢谢!

Answer 1

这是一个猜测，但错误处理程序可能需要发出一个事件:

var onError = function ( err ) {
  gutil.log( gutil.colors.green( err.message ) );
  this.emit( 'end' );
};

从我自己的 gulp.js 中窃取，它以相同的方式处理浏览器化。