如何使用Gulp进行小程序的构建流程优化？

本文共计1269个文字，预计阅读时间需要6分钟。

目前市面上，对于构建小程序，类似Taro这样的框架已经非常成熟和完善，无需再另起炉灶。然而，我的小程序是早期开发的，负责人员当时对这类框架的信心不足。

目前来说，对于构建小程序的，类似taro这些框架，生态已经挺完善的了，没有什么必要再搞一套来折腾自己。但是，我司的小程序，是很早之前就开发的，我们负责人当时信不过这些开源的框架，于是自己用webpack搞了一套框架，但有一个比较严重的问题，有一些文件依赖重复打包了，导致小程序包体积比较大。

持续了一个多月，主包体积在2M左右徘徊，开发都很难做下去。我们负责人终于受不了了，给了我个任务，让我写一个构建小程序的工具，减少小程序包体积。

我们现在的框架对比一下原生小程序，其实差别不大，无非就是

ts => js sass=>wxss wxml=>wxml json=>json

由于我司小程序基础库是1.9.8的，不支持构建npm，所以node_modules的依赖包以及依赖路径需要自己处理，于是写了一个babel插件 babel-plugin-copy-npm。
这么一想，其实不难，而且单文件编译，那不是gulp的强项吗！！！

最终效果：

而且由于增量更新，只修改改变的文件，所以编译的速度非常快。

项目地址：github.com/m-Ryan/ry-wx

最终流程大概如下：清除dist目录下的文件 => 编译文件到dist目录下=> 开发模式监听文件更改，生产环境压缩文件。