这是人们使用 Gulp 时经常遇到的问题,尤其是来自 Grunt 时。 Gulp 最大程度地异步,它总是想同时做尽可能多的事情。
让任务按顺序运行的第一步是让 gulp 知道您的任务何时结束,这可以通过几种不同的方式完成。
1) 返回一个流,gulp 将等待流的“结束”事件作为该任务完成的触发器。示例:
gulp.task( "stream-task", function(){
return gulp.src( srcGlob )
.pipe(sass())
.pipe(compressCSS())
.pipe(gulp.dest( destGlob ));
});
2) 返回一个 Promise,gulp 将等待 Promise 进入已解决状态,然后再发出任务完成的信号。示例:(不完美,只是为了理解这一点)
gulp.task( "promise-task", function() {
return new Promise(function(resolve, reject){
fs.readFile( "filename", function( err, data ){
if( err ){ return reject(err); }
return resolve( data );
});
});
});
3) 调用任务回调,如果函数不返回任何内容,但函数签名接受一个参数,则该参数将是一个回调函数,您可以调用它来指示任务完成。示例:
gulp.task( "cb-task", function( done ){
fs.readFile( "filename", function( err, data ){
// do stuff, call done...
done();
});
});
大多数情况下,您将返回示例 1 中的流,这是典型的 gulp 任务的样子。选项 2 和 3 更适用于您正在做的事情并非真正基于流的传统 gulp 任务。
接下来的事情是设置一个任务对另一个任务的“依赖关系”。 gulp 文档将其显示为您这样做的方式:
gulp.task( "some-task-with-deps", [ "array-of-dep", "task-names" ], function(){ /* task body */ });
现在我不知道当前状态,但是这些依赖任务没有按正确的顺序运行存在一些问题。这最初是由 gulp 的依赖项之一(我相信协调器)的问题引起的。 NPM 领域的一位好心人制作了一个不错的小包,以便在解决错误时临时使用。我开始用它来安排我的任务并且没有回头。
https://www.npmjs.com/package/run-sequence
文档很好,所以我不会在这里详细介绍。基本上run-sequence 让您明确订购 gulp 任务,请记住,如果您没有为每个任务实现上述三个选项之一,它就不起作用。
查看您的要点,在您的任务中添加一些缺少的返回语句可能会起到作用,但作为示例,这就是我的“开发”任务在我的工作项目中的样子......
gulp.task( "dev", function( done ){
runSequence(
"build:dev",
"build:tests",
"server:dev",
[
"less:watch",
"jscs:watch",
"lint:watch",
"traceur:watch"
],
"jscs:dev",
"lint:dev",
"tdd",
done // <-- thats the callback method to gulp let know when this task ends
);
});
作为参考,我的“build:dev”任务是run-sequence的另一种用法
gulp.task( "build:dev", function( done ){
runSequence(
"clean:dev",
[
"less:dev",
"symlink:dev",
"vendor:dev",
"traceur:dev"
],
done // <-- thats the callback method to let know when this task ends
);
});
如果需要运行任务以将任务名称作为自己的参数添加到runSequence,如果它们不冲突,则将它们作为数组发送以使任务同时运行并加快您的构建过程。
关于监视任务的注意事项!通常监视任务无限期地运行,因此试图从它们返回“无限”流可能会让 gulp 认为任务永远不会结束。在这种情况下,我将使用回调方法让 gulp 认为任务已完成,即使它仍在运行,类似于...
gulp.task( "watch-stuff", function( done ){
gulp.watch( watchGlob )
.on( "change", function( event ){ /* process file */ });
done();
});
有关监视任务以及我如何进行增量构建的更多信息,请查看我前几天写的答案Incremental gulp less build