前端自动化构建工具
一、前端工程化：
前端工程化是根据业务特点，将前端开发流程规范化，标准化，它包括 开发流程，技术选型，代码规范，构建发布等，用于 提升前端工程师的开发效率和代码质量。
实现前端工程化的目的简单来说就是通过流程规范、自动化工具来提升前端的开发效率、性能、质量、多人协作以及开发体验。
优点与目标：提升开发效率、性能、质量、多人协作以及开发体验
具体实现：开发流程规范化，标准化，包括【开发流程、技术选型、代码规范、构建发布等】
二、自动化构建工具：
构建工具：将源代码转换成可以执行的JavaScript、CSS、HTML代码。
构建工具其实就是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建为前端开发注入更大的活力，解放了我们的生产力。
可实现的功能：
- 代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS。
- 文件优化：将JavaScript、CSS、HTML代码，压缩恒诚图片等。
- 代码分割：提取多个页面的公共代码，提起首屏不需要执行部分代码让其异步加载。
- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
- 自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器。
- 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
- 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。 。。。。
三、主流自动化构建工具：
- 1.Grunt（基本不用）
- 2.Gulp（github受欢迎程度第二）
- 3.Fis（官方不更新维护了）
- 4.Webpack（github受欢迎程度第一）
- 。。。。
四、构建工具的选型（在开发中如何选择以上几种构件工具）：
- a.是否符合团队的技术栈
- b.是否符合项目需求
- c.生态是否完善、社区是否活跃
五、构建工具分类：
1.基于任务运行的工具：Grunt、Gulp 它们会自动执行指定的任务，就像流水线，把资源放上去然后通过不同插件进行加工，他们包含活跃的社区，丰富的插件，能方便的打造各种工作流。
2.基于模块打包工具：Browserify、Webpack、rollup.js 有过Node.js开发经历的应该对模块很熟悉，需要引用组件直接一个require就OK，这类工具就是这个模式，还可以实现按需加载、异步加载模块。
3.整合型工具：Yeoman、FIS、jdf、Athena等 使用了多种技术栈实现的脚手架工具，好处是即开即用，缺点是他们舒服了技术选型，并且学习成本相对较高。
六、webPack优点：
- a.专注处理模块化的项目
- b.可以通过plugin扩展，完整好用不失灵活
- c.使用场景不局限web开发
- d.社区活跃，紧跟时代发展特性
- e.良好的开发体验