我在执行几个吞咽任务时遇到了一些麻烦。我已经尝试了一切并遵循了文档,但似乎没有任何效果。希望有人可以提供帮助。
我想做的是进行 sass 缩小,然后将结果同步到本地流浪文件夹(不是远程服务器),然后重新加载浏览器同步。
我遇到的问题是我正在与 gulp 想要一起运行所有任务的事实作斗争。我需要它们一个接一个地发生。所有任务都是独立工作的,我只是很难让它们按顺序运行。我尝试过回调并玩依赖,但我显然错过了一些东西。
我的设置很复杂,我的所有任务都在单独的 js 文件中,但我尝试将我所拥有的内容合并到这个单一的 github 要点中,以便人们可以提供帮助。感谢您的任何帮助。
https://gist.github.com/CodeStalker/9661725dcaf105d2ed6c
我让它工作的唯一方法是将 rsync 通过管道传输到 sass 放大的末尾,并使用 server: true 变量将其包装在 gulp-if 中,这样它只在知道它在虚拟机上运行时才执行 rsync。不理想。
这是人们在使用 Gulp 时遇到的常见问题,尤其是来自 Grunt 时。Gulp 是最大程度的异步,它总是希望同时做尽可能多的事情。
让任务按顺序运行的第一步是让 gulp 知道任务何时结束,这可以通过几种不同的方式完成。
1)返回一个流,gulp 将等待流的“结束”事件作为完成该任务的触发器。例子:
gulp.task( "stream-task", function(){
return gulp.src( srcGlob )
.pipe(sass())
.pipe(compressCSS())
.pipe(gulp.dest( destGlob ));
});
Run Code Online (Sandbox Code Playgroud)
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 );
});
});
});
Run Code Online (Sandbox Code Playgroud)
3) 调用任务回调,如果函数不返回任何内容,但函数签名带有参数,则该参数将是一个回调函数,您可以调用该函数来表示任务已完成。例子:
gulp.task( "cb-task", function( done ){
fs.readFile( "filename", function( err, data ){
// do stuff, call done...
done();
});
});
Run Code Online (Sandbox Code Playgroud)
大多数情况下,您将返回像示例 1 这样的流,这就是典型的 gulp 任务的样子。选项 2 和 3 更适合当您执行的操作并非真正基于传统流的 gulp 任务时。
下一件事是设置一项任务对另一项任务的“依赖性”。gulp 文档显示了这样做的方式:
gulp.task( "some-task-with-deps", [ "array-of-dep", "task-names" ], function(){ /* task body */ });
Run Code Online (Sandbox Code Playgroud)
现在我不知道当前状态,但这些依赖项任务未按正确的顺序运行存在一些问题。这最初是由 gulp 的依赖项之一(我相信是协调器)的问题引起的。NPM 领域的一位好心绅士制作了一个漂亮的小包,供在解决 bug 时临时使用。我开始用它来安排我的任务,并且没有回头。
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
);
});
Run Code Online (Sandbox Code Playgroud)
另请参考我的“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
);
});
Run Code Online (Sandbox Code Playgroud)
如果任务需要按顺序运行,则任务名称将作为其自己的参数添加,runSequence如果它们不冲突,请将它们作为数组发送,以使任务同时运行并加快构建过程。
关于监视任务需要注意的一件事!通常,监视任务无限期地运行,因此尝试从它们返回“无限”流可能会让 gulp 认为任务永远不会结束。在这种情况下,我将使用回调方法让 gulp 认为任务已经完成,即使它仍在运行,就像......
gulp.task( "watch-stuff", function( done ){
gulp.watch( watchGlob )
.on( "change", function( event ){ /* process file */ });
done();
});
Run Code Online (Sandbox Code Playgroud)
有关监视任务以及如何进行增量构建的更多信息,请查看我前几天写的答案,增量 gulp less 构建