前端工程化（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。

对比

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

（图片来自网络）