前端自动化构建工具

一、什么是自动化 构建工具

就是工程化、自动化思想在 前端开发的 体现，将一些列流程 用代码去实现，让代码自动化地执行这一系列复杂地流程，将源代码转化成可以执行地js css html;

代码转换：将 TypeScript 编译成JavaScript、将 CSS 编译成 CSS等。

文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。

代码分割：提取多个页面的公共代码，提取首屏不需要执行部分代码让其异步记在。

模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。

自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器。

代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统

 

二、构建工具地 选择

a:是否符合团队的技术栈

b:是否符合项目需求

c:生态圈是否完善、社区活跃

 

三、自动化构建工具分类

1：基于任务运行的工具：Gruntn Grunt

它们会自动执行指定的任务，就像流水线，把资源放上去然后通过不同插件进行加工，它们包含活跃的社区，丰富的插件，能方便的打造各种工作流。

 

2，基于模块化打包的工具：

Browserify、Webpack、rollup.js

有过 Node.js 开发经历的应该对模块很熟悉，需要引用组件直接一个 require 就 OK，这类工具就是这个模式，还可以实现按需加载、异步加载模块。

 

3，整合型工具：

Yeoman、FIS、jdf、Athena等

使用了多种技术栈实现的脚手架工具，好处是即开即用，缺点就是它们约束了技术选型，并且学习成本相对较高。