我在完成一些gulp任务时遇到了一些麻烦.我已经尝试了一切,并按照文档,但似乎没有任何工作.希望有人可以提供帮助.
我想要做的是发生sass缩小,然后将结果rsync到本地vagrant文件夹(不是远程服务器),然后重新加载浏览器同步.
我遇到的问题是,我正在与gulp想要一起完成所有任务的事实作斗争.我需要他们一个接一个地发生.所有的任务都是自己工作的,我只是在顺序运行它们时遇到了麻烦.我尝试过回调和依赖玩法,但我显然错过了一些东西.
我的设置很复杂,我的所有任务都在单独的js文件中,但我试图将我所拥有的内容组合到这个单一的github gist中,以便人们可以提供帮助.谢谢你的帮助.
https://gist.github.com/CodeStalker/9661725dcaf105d2ed6c
我有这个工作的唯一方法是将rsync传输到sass放大的末尾,并将其包装在gulp中 – 如果使用server:true变量,那么只有当它知道它在VM上运行时它才会执行rsync.不理想.
最佳答案 这是人们与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将等待承诺进入已解决状态,然后再将该任务指示为已完成.示例:(不完美只是为了得到重点)
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任务的样子.当您执行的操作不是传统的基于流的gulp任务时,选项2和3更适用.
接下来的事情是将一个任务的“依赖性”设置为另一个任务. gulp docs显示这是你这样做的方式:
gulp.task( "some-task-with-deps", [ "array-of-dep", "task-names" ], function(){ /* task body */ });
现在我不知道当前的状态,但是这些依赖性任务没有以正确的顺序运行存在一些问题.这最初是由一个gulp依赖项(我相信的orchestrator)的问题引起的. 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.task( "watch-stuff", function( done ){
gulp.watch( watchGlob )
.on( "change", function( event ){ /* process file */ });
done();
});
有关观察任务的更多信息以及我如何进行增量构建,请查看我前几天写的答案,Incremental gulp less build