task

  gulp.task方法用来定义任务,内部使用的是Orchestrator(用于排序、执行任务和最大并发依赖关系的模块),其语法为:

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

name 为任务名;

deps 是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数;

fn 为任务函数,我们把任务要执行的代码都写在里面。该参数也是可选的。

当你定义一个简单的任务时,需要传入任务名字和执行函数两个属性。

 
 
  1. gulp.task('greet', function () {
  2. console.log('Hello world!');
  3. });

  执行gulp greet的结果就是在控制台上打印出“Hello world”。

  你也可以定义一个在gulp开始运行时候默认执行的任务,并将这个任务命名为“default”:

 
 
  1. gulp.task('default', function () {
  2. // Your default task
  3. });

  前面已经介绍了gulp.task的语法,但是当有多个任务时,需要知道怎么来控制任务的执行顺序。

  可以通过任务依赖来实现。例如我想要执行one,two,three这三个任务,那我们就可以定义一个空的任务,然后把那三个任务当做这个空的任务的依赖就行了:

 
 
  1. //只要执行default任务,就相当于把one,two,three这三个任务执行了
  2. gulp.task('default',['one','two','three']);

  如果任务相互之间没有依赖,任务就会按你书写的顺序来执行,如果有依赖的话则会先执行依赖的任务。但是如果某个任务所依赖的任务是异步的,就要注意了,gulp并不会等待那个所依赖的异步任务完成,而是会接着执行后续的任务。例如:

 
 
  1. gulp.task('one',function(){
  2. //one是一个异步执行的任务
  3. setTimeout(function(){
  4. console.log('one is done')
  5. },5000);
  6. });
  7.  
  8. //two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行
  9. gulp.task('two',['one'],function(){
  10. console.log('two is done');
  11. });

  上面的例子中我们执行two任务时,会先执行one任务,但不会去等待one任务中的异步操作完成后再执行two任务,而是紧接着执行two任务。所以two任务会在one任务中的异步操作完成之前就执行了。

  那如果我们想等待异步任务中的异步操作完成后再执行后续的任务,该怎么做呢?

  有三种方法可以实现:

  第一:在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。

 
 
  1. gulp.task('one',function(cb){ //cb为任务函数提供的回调,用来通知任务已经完成
  2. //one是一个异步执行的任务
  3. exec(function(){
  4. console.log('one is finish');
  5. cb(); //执行回调,表示这个异步任务已经完成
  6. },5000);
  7. });
  8.  
  9. //这时two任务会在one任务中的异步操作完成后再执行
  10. gulp.task('two',['one'],function(){
  11. console.log('two is finish');
  12. });

  第二:定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。

 
 
  1. gulp.task('one',function(cb){
  2. var stream = gulp.src('client/**/*.js')
  3. .pipe(exec()) //exec()中有某些异步操作
  4. .pipe(gulp.dest('build'));
  5. return stream;
  6. });
  7.  
  8. gulp.task('two',['one'],function(){
  9. console.log('two is done');
  10. });

  第三:返回一个promise对象,例如

 
 
  1. var Q = require('q');
  2. gulp.task('one', function() {
  3. var deferred = Q.defer();
  4.  
  5. // 执行异步的操作
  6. setTimeout(function() {
  7. deferred.resolve();
  8. }, 1);
  9. return deferred.promise;
  10. });
  11.  
  12. gulp.task('two',['one'],function(){
  13. console.log('two is done');
  14. });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值