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