# 自动化构建工具 ## 何为自动化构建工具 构建工具就是做这件事，将源代码转换成可以执行的JavaScript、CSS、HTML 代码，包括如下内容： * 代码转换：将 TypeScript 编译成JavaScript、将 SCSS 编译成 CSS等。 * 文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。 * 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分代码让其异步加载。 * 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。 * 自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器。 * 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。 * 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。 * ***** 常见的构建工具：**Npm** Grunt **Gulp** Fis 3 **Webpack** Rollup