使用 babel 和 browserify + 捕获错误的 Gulp 任务

Question

我的 gulp 文件：

var gulp = require('gulp');
var babel = require('gulp-babel');
var browserify = require('gulp-browserify');

gulp.task('precompile', function () {
  return gulp.src('app/assets/react/app.react.js')
    .pipe(babel())
    .pipe(gulp.dest('app/assets/javascripts/'))
});

gulp.task('browserify', ['precompile'], function () {
  return gulp.src(['app/assets/javascripts/app.react.js'])
    .pipe(browserify())
    .pipe(gulp.dest('app/assets/javascripts/'));
});

gulp.task('watch', function() {
  gulp.watch('app/assets/react/app.react.js', ['browserify']);
});

如果可能的话，我该如何改进？可能我只能用 browserify + transform (babelify) + console.log on errors 编写一个任务吗？ 此时，如果我有解析错误 - gulp watch 崩溃了。

Answer 1

试试水管工

var plumber = require('gulp-plumber');

/**
 * Helper function to amend the pipe when a build task fails
 * see https://github.com/hughsk/vinyl-transform/issues/1
 * and: https://github.com/gulpjs/gulp/issues/259
 * @param {string} err  the error string
 */
function onError (err) {
    gutil.beep();
    console.log(err);
    this.emit('end');
}

return gulp.src('app/assets/react/app.react.js')
    .pipe(plumber({
            errorHandler: onError
        }))
    .pipe(babel());

gulp-browserify 也被列入黑名单。您可以按照本教程进行更多设置：https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623