javascript - gulp任务的先后问题

Question

在执行gulp任务的时候经常会遇到上一个任务执行完毕再执行下一个任务
不知道应该如何处理
我用了一个插件写的代码 先后顺序不对
我希望是执行顺序是 a->a完成->b->b完成->c

var gulp         = require('gulp'),
        gulpSequence = require('gulp-sequence');


gulp.task('a',function(){
     setTimeout(function(){
         console.log('task a done...')
     },300)
});

gulp.task('b',function(){
     setTimeout(function(){
         console.log('task b done...')
     },200)
});

gulp.task('c',function(){
     setTimeout(function(){
         console.log('task c done...')
     },100)
});


gulp.task('default', gulpSequence('a', 'b', 'c'));

但是结果是这样的：

Answer 1

那是你的用法不对，因为task里都是异步行为，你得通知它做完。

var gulp = require('gulp'),
    gulpSequence = require('gulp-sequence');


gulp.task('a',function(cb){
     setTimeout(function(){
         cb();
         console.log('task a done...')
     },300)
});

gulp.task('b',function(cb){
     setTimeout(function(){
         cb();
         console.log('task b done...')
     },200)
});

gulp.task('c',function(cb){
     setTimeout(function(){
         cb();
         console.log('task c done...')
     },100)
});


gulp.task('default', gulpSequence('a', 'b', 'c'));

参考资料 https://github.com/teambition/gulp-sequence
https://github.com/Platform-CUF/use-gulp

Answer 2

因为gulp的执行是异步的啊，并非阻塞。

Answer 3

注意看文档，

https://github.com/gulpjs/gulp/blob/master/docs/API.md

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

这里的 deps 是依赖，

你可以这样。

gulp.task(a, function(){
    xxxx
})

gulp.task(b,[a], function(){
   xxxx
})

这个时候 b的执行就是在 a之后，但是这种执行方式是有要求的：

Async task support

Tasks can be made asynchronous if its fn does one of the following:
Accept a callback

// 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
  });
});
Return a stream

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


Return a promise

var Q = require('q');

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

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

  return deferred.promise;
});

看你使用 setTimeout来看， 第三种方式比较适合你