构建工具

构建 其实是 工程化、自动化 思想在前端开发中的体现，把一系列流程用代码实现，让代码自动化地执行一系列复杂的流程。

常见功能

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
• 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
• 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

工具类型

如果把市面的工具按类型分可以分为这三类：

基于任务运行的工具

例如：Grunt、Gulp

它们会自动执行指定的任务，就像流水线，把资源放上去然后通过不同插件进行加工，它们包含活跃的社区，丰富的插件，能方便地打造各种工作流。

基于模块化打包的工具

例如：Browserify、Webpack、Rollup

有过 Node.js 开发经历的应该对模块很熟悉，需要引用组件直接一个 require 就 OK，这类工具就是这个模式，还可以实现按需加载、异步加载模块。

整合型工具

例如：Teoman、FIS、jdf、Athena、cooking、weflow

使用了很多技术栈实现的脚手架工具，好处是即开即用，缺点就是它们约束了技术选型，并且学习成本相对较高。

主流工具对比分析

NPM Script

• NodeJS 附带的包管理器（内置）
• 功能简单，不能方便地管理多个任务之间的依赖
• 配置文件：package.json
• 调用 Shell 脚本运行脚本命令

Grunt

• 灵活，只负责执行已定义任务
• 优点：大量可复用插件封装了常见任务，也能管理任务间依赖关系
• 缺点：集成度不高，很多需要配置后使用，无法做到开箱即用
• 配置文件：Gruntfile.js

Gulp

传送门：Glup 中文网

与 Grunt 类似，集成度不高，需配置使用，可堪称 Grunt 加强版

Glup 就像是一个产品的 流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。

Rollup

• 能针对 ES6 源码去除已被定义但未被使用代码 TreeShaking => ScopeHoisting 减少输出文件体积 提升运行性能
• 用于打包 JavaScript 库时比 Webpack 更有优势

Parcel

Webpack

能将许多松散的模块按照依赖和规则打包成符合生产环境的前端资源。

还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。

• 专注于处理模块化的项目，能做到开箱即用、一步到位
• 可通过 Plugin 扩展，完整好用又不失灵活
• 使用场景不局限于 Web 开发
• 社区庞大成熟

构建工具对比

参考资料

• Gulp 与 Webpack 深度对比