【Gulp Tips】错误处理
发布于 15天前 作者 soliury 168 次浏览 来自 分享

前缀

我在刚开始使用gulp时，对于错误处理也没太在意，可是每次sass编写错误，然后整个gulp进程就崩掉，coffee一不小心多打了个;，进程也崩掉。好吧，我以为是简单地在流上添加个.on('error',function(err){})就行，好吧，这下一旦有错误不会导致整个进程崩掉，但是尼玛，这个gulp功能实际上就没跑了，再次改动sass，还是那个样。整来整去，这都不是我想要的。

什么是正确的错误处理

正确的错误处理应该是能遇到错误时输出错误，并且能够保证整个gulp进程不挂，而且功能还能正常用。通俗地讲，就是遇到错误时gulp能正确地输出错误信息，然后进程不挂，当改正错误以后，gulp又能继续正常运行。

如何去做

而在gulp中得错误处理，最好使用gulp-plumber，一个专门为gulp而生的错误处理库。

使用方法很简单，直接在流的最开始打个补丁就ok。例如：

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

gulp.src('./src/*.ext')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(gulp.dest('./dist'));

如果需要自己定义一个错误处理的函数，也可以这么使用：

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

gulp.src('./src/*.ext')
    .pipe(plumber({
    errorHandler：function(error){
    console.log(error.message);
    }
    }))
    .pipe(coffee())
    .pipe(gulp.dest('./dist'));

上面的只是简陋的一个错误处理，当有很多个task时，错误处理这个函数其实是可以复用的，所以可以把错误处理的函数单独做成一个模块。

例如，我的ngFast中就是这样处理的，这个也学的angularjs-gulp-browserify-boilerplate。

handleErrors.coffee

notify = require 'gulp-notify'

module.exports = (error)->
  if global.isDebug
    args = Array.prototype.slice.call arguments

    notify.onError
      title:'Compile Error'
      messages:'<%= error.message %>'
    .apply @, args

    [@emit](/user/emit) 'end'
  else
    console.log error
    process.exist 1

这里用到了gulp-notify，一个可以将发生的错误发送给系统，让后让系统发出通知。这个还是挺好用得，当出现错误后，在mac上，右上角会弹出一个错误的提示框。当然，我个人觉得还是很ok的，不过可能有些人会觉得受不了，觉得弹出小窗口太烦了。当然，这就是个人的习惯了。

上面会分两种情况，当处于debug情况下时（global.isDebug是在gulpFile.coffee中定义好的），一般来说，gulp进程是在watch文件改动，是不能杀死进程的，不然，尼玛，出现一个错误就得重启一次gulp，累死你。所以当是debug模式时，只是输出错误就行。当处于非debug模式时，一般是build任务等等，没有watch的需求，所以可以直接杀死进程。

完整例子

下面附上一个完整的错误处理的例子：（其中所用到的handleError就是上面提到的）

gulp = require 'gulp'
sass = require 'gulp-sass'
gulpif = require 'gulp-if'
handleErrors = require '../util/handleErrors'
browserSync = require 'browser-sync'
autoprefixer = require 'gulp-autoprefixer'
plumber = require 'gulp-plumber'
sourcemaps = require 'gulp-sourcemaps'
cssmin = require 'gulp-minify-css'
rename = require 'gulp-rename'
versionTag = require 'gulp-version-tag'
filter = require 'gulp-filter'


config = require '../config'


gulp.task 'styles', ->
  gulp.src config.styles.src
  .pipe plumber
    errorHandler: handleErrors
  .pipe gulpif global.isDebug, sourcemaps.init()
  .pipe sass
    sourcemap: true
    style: 'compact'
  .pipe gulpif global.isDebug, sourcemaps.write('.')
  .pipe gulpif !global.isDebug, autoprefixer "last 2 versions", "> 1%", "ie 8"
  .pipe gulpif !global.isDebug, cssmin()
  .pipe gulpif !global.isDebug, versionTag __dirname, '../../package.json',
    reuse: true
    autoTagVersion: global.autoTagVersion
    beforeText: '_v'
  .pipe plumber.stop()
  .pipe gulp.dest config.styles.dest
  .pipe filter '**/*.css'
  .pipe gulpif browserSync.active, browserSync.reload {stream: true}
回到顶部