优化小程序包体积：gulp构建工具实践

本文主要讲述了在一家公司早期开发的小程序项目中，由于对开源框架的信任问题，团队采用了自建的基于webpack的框架。然而，这个框架在处理依赖时存在文件重复打包的问题，导致小程序包体积过大，影响了开发效率。面对这个问题，项目经理分配了一个任务给作者，要求编写一个专门用于构建小程序的工具，以优化包体积并提升开发体验。 作者意识到，由于公司的基础库版本较低（1.9.8），不支持npm构建，因此需要特别处理node_modules中的依赖。为此，他们开发了一个名为babel-plugin-copy-npm的定制化Babel插件，以便在转换过程中正确处理这些依赖。gulp作为单文件编译的强大工具，被作者视为实现目标的理想选择。 构建过程包括以下步骤： 1. 清除dist目录：首先，通过`del`模块删除dist目录中的所有文件，除了那些不在node_modules内的内容，确保每次构建都是从干净的环境开始。 2. 编译 TypeScript：使用gulp和`gulp-load-plugins`模块加载Babel插件，执行TypeScript到JavaScript的转换，因为小程序需要的是纯JavaScript代码。 3. 转换 Sass 到 WXML：利用gulp，将Sass文件转换为微信小程序支持的WXML样式语言。 4. 处理 JSON 和 WXML 文件：原生格式的JSON和WXML无需转换，保持不变。 5. 使用 babel-plugin-copy-npm 处理node_modules依赖：将需要的依赖复制到dist目录，确保不会被混淆或遗漏。 6. 监听文件变化并执行增量更新：开发模式下，gulp会实时监听文件改动，仅重新编译已修改的部分，大大加快了开发速度。 7. 生产环境压缩文件：在发布阶段，对dist目录下的文件进行压缩，进一步减小包体积。 整个流程通过gulp的自动化能力，实现了高效、精确的构建，解决了早期框架带来的体积问题，提高了团队的开发效率。项目成果已经开源在GitHub上，供有兴趣者参考：https://github.com/m-Ryan/ry-wx。