【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}
回到顶部