gulp task

2014-09-27 jude 更多博文 » 博客 » GitHub »

原文链接 http://judes.me/tech/2014/09/27/gulp-task.html
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


阅读 gulp API,有一点要注意的就是:

gulp默认以最大并发执行任务,怎样保证某些任务按顺序(即 task A 在 task B 完成之后)执行呢?

先来看一下gulp task的形式:

gulp.task(name[,deps],fn)

gulpOrchestrator 定义一个任务,Orchestrator 是一个把任务和依赖串联起来并以最大并发执行的模块。所以gulp默认以最大并发执行任务。

name [string]

任务的名字,如果要在命令行中执行任务,name中不能有空格。

deps [Array]

任务的依赖,是由一系列任务组成的数组。用意是:要等这一系列任务执行完之后再执行定义的任务。实际上要达到这个目的,光这样写是不够的。接下来会说到。

fn

任务要执行的操作。通常形式是这样的:

function(){
    gulp.src().pipe(someplugin());
}

上面说到要让依赖先执行完毕再启动定义的任务,只在定义任务时写上依赖数组是不够的,要达到这个目的,每个依赖的任务都要是异步执行的。

如果说按顺序排行任务是同步执行的话,那么这里就是通过异步来实现同步:每个异步执行的任务在执行完之后会发一个信号告知gulp,等集齐数组所有的完成信号后再执行定义的任务。(不知道理解得对不对)

fn采取如下三种形式之一就能让任务变成异步执行:

传入回调函数

// run a command in a shell
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // build Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // return error
    cb(); // finished task
  });
});

返回一个流

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

返回一个promise

var Q = require('q');
gulp.task('somename', function() {
  var deferred = Q.defer();

  // do async stuff
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

以下是一个实现 task two 在 task two 执行完毕后再开始执行的例子:

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});

gulp.task('default', ['one', 'two']);

以上所有代码来源于 gulp API