gulp流程控制

烂笔头

很久没有写博客了。 记得最近的实习生活都颇有收获,一直想着记下什么,当真正想写的时候,才发现什么都不记得了。 所有,上周刚刚有了一点小收获,赶紧得记下来。

情况

周一在打包一个文件的时候,打包引入后,发现文件报错了。 大致是因为我打算将关于webpack的部分整合到gulp里面的(用的是webpack-stream,我也是最近才知道,webpack-streamgulp-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);
  });
  
  流程终于成功了,一切都按照自己预想的进行了。

结尾

遇到问题,就有收获

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏七夜安全博客

go go go - beego

在上一篇文章What!!! so fast中,我介绍了golang这种语言,并使用golang开发了一个端口扫描工具。现在我的主要工作是做网络安全方面的开发与策...

3142
来自专栏Java架构

2018年一线互联网公司Java高级面试题总结JVM分布式专题架构福利

4144
来自专栏小特工作室

工作流组件示例(全部开源)

1.概述 1.1简介 本文档旨在帮助开发人员快速使用工作流组件,完成OA或审批等涉及到工作流组件的系统开发工作 1.2组件构成 1.2.1组件层次图 ? 组...

72510
来自专栏MongoDB中文社区

完美数据迁移-MongoDB Stream的应用

尽管如此,目前还是有许多企业踏上了服务化改造的道路,这其中则免不了”旧改”的各种繁杂事。

1112
来自专栏云之翼

在虚拟机上容器环境性能--动态测试问题分析总结(二)

在上一篇中,介绍了静态测试场景,本文介绍动态性能测试的差异分析,希望大家可以借鉴。

1290
来自专栏Youngxj

emlog文章短网址版权插件

1956
来自专栏腾讯大数据的专栏

大型web系统数据缓存设计

1. 前言 在高访问量的web系统中,缓存几乎是离不开的;但是一个适当、高效的缓存方案设计却并不容易;所以接下来将讨论一下应用系统缓存的设计方面应该注意哪些...

4346
来自专栏CSDN技术头条

SQL事务隔离实用指南

您可能已经在数据库的文档中看到了隔离级别,感到有些手足无措。很少有日常使用事务的例子真正提到了隔离。大多数使用数据库的默认隔离级别,并希望获得最好的隔离级别。这...

1958
来自专栏SDNLAB

OpenStack L版本network troubleshooting

目前已经有很多介绍OpenStack新特性以及OpenStack网络详解等文章,但是对于Liberty的Network_Troubleshooting的文章还是...

30210
来自专栏SDNLAB

DLUX组件扩展上篇-原理

作者: M.S-Group.皮皮熊,M.S-Group组织主要成员之一,数通行业老兵,精通传统数通网络技术,SDN/NFV新技术的狂热拥护者!

1124

扫码关注云+社区

领取腾讯云代金券