前端工程化（Gulp、Webpack）-前言

起因

随着Web开发日渐复杂化和多元化，早已不是以前写几个页面布局加上点样式，再搞几个jQuery插件就能OK的了。前端做的事情越来越多，那么为了解放我们的生产力，提高团队的写作效率，我们就迫切需要一些工具来帮我们完成一些事情：

内因

• 代码转换：有时我们会采用一些高效的语言，不会直接书写HTMLCSSJS，但是这些语言浏览器原生不支持，就需要工具将其进行转换；
• 文件优化：为了减少文件大小、服务器请求，我们需要工具对代码进行压缩、图片合并等；
• 代码审查：在团队协作中，特别是大项目，为了避免不必要的错误，减少维护成本，我们需要统一我们的代码风格；
• 模块合并与分割：现在大部分采用模块化的开发，我们需要工具能够分析我们模块的依赖关系，对其进行合理的分割和合并。
• 愉快的开发环境：在开发的时候，我们希望最大程度的解放我们的双手，把那些重复机械的工作交给工具去做，比如自动刷新、自动打包发布等

外因

得益于nodejs的快速发展，让js有了更大的能力：

• 跳出了浏览器的沙盒，能够在命令行中使用
• 能够操作本地文件

这两点是作为一个构建工具的必要条件。

发展史

1. Grunt：前端自动化小工具，基于任务的命令行构建工具；
2. Gulp：和Grunt一样，也是基于Nodejs的自动任务运行器，但是采用流的方式，利用管道思路，前一节点的输出作为下一节点的输入，最后一步才输出文件到磁盘，大大提高了构建时间和性能。
3. webpack：模块化管理和打包工具，将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载，和前面的两个有明显的区别。
4. 当然这其中也有其他的一些工具的出现，比如：Rollup（和 Webpack 很类似但专注于 ES6 的模块打包工具，但生态不如webpack），Fis3（来自百度的优秀国产构建工具，功能非常强大，但是官方已经不再维护），yeoman（脚手架自动生成工具，提供了很多项目模板），Bower（包），browserify（打包工具）
5. 最近也有一匹黑马出现-Parcel，利用缓存提升性能与速度，零配置。待生态完善后有可能超越webpack。

对比

这张图很清楚的对比了几种主流的构建工具。

（图片来自网络）