gulp流程控制
烂笔头
很久没有写博客了。 记得最近的实习生活都颇有收获，一直想着记下什么，当真正想写的时候，才发现什么都不记得了。 所有，上周刚刚有了一点小收获，赶紧得记下来。
情况
周一在打包一个文件的时候，打包引入后，发现文件报错了。
大致是因为我打算将关于webpack的部分整合到gulp里面的(用的是webpack-stream，我也是最近才知道，webpack-stream是gulp-webpack的进阶版)，整合完成后，进行打包。
原来的打包文件是这样写的：
gulp.task('dev',function(){
//希望'webpack_test','devconcatcss','devsass'顺序执行
gulp.run('webpack_test','devconcatcss','devsass'/*,...*/);
});
我是将webpack打包放在打包列表的首位的，结果看cmd里面的打包流程序列，webpack任务最先开始，然后其他任务很快跟上（毫秒级），所有任务都完成后，
webpack打包结果才出来，我意识到是控制流程有问题。而且系统提示gulp.run过旧了。于是打算修改控制流程。
gulp流程控制
我们期待的结果是
//webpack_test先执行，任务彻底结束后，执行devconcatcss，任务彻底结束后，执行devsass...利用 gulp.task 依赖
一开始是打算使用依赖关系
gulp.task('dev',['webpack_test','devconcatcss','devsass'/*,...*/]function(){
console.log('dev finish')
});dev在最后才执行,但是依然是dev finish后，webpack打包结果才出现，所以控制失败。gulp.task 添加 return
查阅资料后发现，我们之前的任务编写有问题
//之前我们是这样编写的
gulp.task('webpack_test', ()=>{
gulp.src('')
//...
})
//而别人是这样子写的
gulp.task('webpack_test', ()=>{
return gulp.src('')
//...
}) 划重点,一个return有什么用呢？ 原来 return gulp.src...是通过返回一个stream，来让控制程序知道当前任务的进行情况。
这样就可以知道当前依赖任务是否完成，执行下一任务。
于是我就给所有任务加上了return
流程中发生了好的情况。
webpack_test任务在 dev任务之前结束了，但是[数组]中的任务没有先后依赖关系。
如果我通过
gulp.task('before1', 'before2')
gulp.task('before2', 'before3')
...这样的方式一个个加控制，就太麻烦了。
引入插件 gulp-sequence
于是我 引入了新的组件gulp-sequence。
gulp.task('dev',['clean', 'webpack_test'],function(cb){
/*
流程说明：
clean,webpack_test 同时执行，执行完成后，执行 gulpSequence
gulpSequence： devconcatcss->devsass->...->images顺序执行
*/
gulpSequence(
'devconcatcss',
'devsass'
/*, ... */
)(cb);
});
流程终于成功了，一切都按照自己预想的进行了。结尾
遇到问题，就有收获
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录