gulp-babel编译报错时，怎么能不停止node服务？

Question

使用gulp-babel在保存JS代码时自动编译到dist目录，但问题是很多程序员都习惯写两个字就ctrl+s。

这时语法肯定还是有问题的，所以babel就报错了，导致npm run dev直接就停止了node服务，就像这样：

比如我写for(var i)我就保存了，这时编译肯定报错。

怎么做到编译报错时不要停止node服务，仅仅是抛出错误，求教！

下面附上gulpfile.js

var gulp = require('gulp'),
    // sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    // jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    // rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    // concat = require('gulp-concat'),
    // notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    // livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    insert = require('gulp-insert'),
    server = lr();

var config = require('./config');
var express = require('express');
var path = require('path');
var babel = require('gulp-babel');
// Styles
gulp.task('css', function () {
    return gulp.src('src/css/**/*.css')
    // .pipe(sass({ style: 'expanded', }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        // .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        // .pipe(livereload(server))
        .pipe(gulp.dest('dist/css'))
});

//html
gulp.task('html', function () {
    return gulp.src('src/html/**/*.html')
        .pipe(gulp.dest('dist/html'))
});

// Scripts
gulp.task('js', function () {
    return gulp.src('src/js/**/*.js')
    // .pipe(jshint('.jshintrc'))
    // .pipe(jshint.reporter('default'))
    // .pipe(concat('main.js'))
        .pipe(insert.prepend('window.zm_config=' + JSON.stringify(config.root[process.env.NODE_ENV]) + ';'))
        .pipe(gulp.dest('dist/js'))
        // .pipe(rename({ suffix: '.min' }))
        .pipe(babel({
            presets: ['es2015'],
            plugins: ['transform-object-assign']
        }))
        .pipe(uglify())
        // .pipe(livereload(server))
        .pipe(gulp.dest('dist/js'))
});

// Images
gulp.task('img', function () {
    return gulp.src('src/img/**/*')
        .pipe(cache(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        // .pipe(livereload(server))
        .pipe(gulp.dest('dist/img'))
});

// Clean
gulp.task('clean', function () {
    return gulp.src(['dist/css', 'dist/js', 'dist/img'], {
        read: false
    })
        .pipe(clean());
});

// Default task
gulp.task('default', ['css', 'js', 'img', 'html', 'watch']);

// Watch
gulp.task('watch', function () {
    // Listen on port 35729
    server.listen(35729, function (err) {
        if (err) {
            return console.log(err)
        }
        ;
        var app = express();
        app.use(express.static(path.resolve('./')));
        app.listen(8000, function () {
            console.log('server is running on 8000');
        });

        // Watch .css files
        gulp.watch('src/css/**/*', function (event) {
            console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
            gulp.run('css');
        });

        // Watch .js files
        gulp.watch('src/js/**/*.js', function (event) {
            console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
            gulp.run('js');
        })

        // Watch .html files
        gulp.watch('src/html/**/*.html', function (event) {
            console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
            gulp.run('html');
        })

        // Watch image files
        gulp.watch('src/img/**/*', function (event) {
            console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
            gulp.run('img');
        });
    });
});

Answer 1

gulp中出错会中断任务流，可以使用插件gulp-plumber, 可以正常报错不中断。

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

gulp.task('js', function () {
    return gulp.src('src/js/**/*.js')
        .pipe(plumber()) //加入plumber
    // .pipe(jshint('.jshintrc'))
    // .pipe(jshint.reporter('default'))
    // .pipe(concat('main.js'))
        .pipe(insert.prepend('window.zm_config=' + JSON.stringify(config.root[process.env.NODE_ENV]) + ';'))
        .pipe(gulp.dest('dist/js'))
        // .pipe(rename({ suffix: '.min' }))
        .pipe(babel({
            presets: ['es2015'],
            plugins: ['transform-object-assign']
        }))
        .pipe(uglify())
        // .pipe(livereload(server))
        .pipe(gulp.dest('dist/js'))
});

同时你可以配合gulp-notify定义系统弹出错误提示，如:

var notify = require('gulp-notify'),
    notify.onError({
      title: 'Gulp',
      subtitle: 'Failure!',
      message: 'Error: <%= error.message %>',
      sound: 'Beep'
    })(err);
  };

gulp.task('js', function () {
    return gulp.src('src/js/**/*.js')
        .pipe(plumber({ //plumber触发错误提示
          errorHandler: onError
         }))
        .pipe(babel({
            presets: ['es2015'],
            plugins: ['transform-object-assign']
        }))
        .pipe(uglify())
        // .pipe(livereload(server))
        .pipe(gulp.dest('dist/js'))
});

Answer 2

Ctrl+S 是个好习惯，尤其是在使用 VSCode 的自动保存之后，watch 简直就是灾难……

不过一般的问题就没有搜索引擎不能解决的，如果不能就换个搜索引擎……

这里有关于错误处理的一些讨论
https://github.com/babel/gulp...

解决方案无非都是在 babel 之后加一句 on("error", .....)，然后在这个处理函数中有不同的处理方式……试试应该能找到你喜欢的。