上文介绍过前端模块化的倒退，然而它们都有一个共同点：源代码无奈间接运行，必须通过转换后才能够失常运行。 构建就是做这件事，将源代码转换成可执行的JavaScript、CSS、HTML代码，包含如下内容：
- 代码转换
- 文件优化
- 代码宰割
- 模块合并
- 主动刷新
- 代码校验
- 主动公布
构建其实是工程化、自动化思维在前端开发中的体现，将一系列流程用代码去实现。上面介绍一些罕用构建工具：
Npm Script
Npm Script是Npm内置的一个性能，容许在package.json文件里应用script字段定义工作。Npm Script的长处是内置，无须要装置其余依赖。其毛病是性能太简略，不能不便地治理多个工作之间的依赖。
Grunt
Grunt也是一个工作执行者。Grunt有大量现成的插件，也能治理工作之间的依赖关系，自动化地执行依赖工作，每个工作的具体执行代码和依赖的关系写在配置文件Gruntfile.js里。Grunt的毛病是集成度不高，要写很多配置文件后才能够应用，无奈做到开箱即用。
Gulp
Gulp是一个基于流的自动化构建工具。除了能够治理和执行工作，还反对监听文件、读写文件。Gulp被设计的非常简单，只通过上面5种办法就能够反对简直所有的构建场景：
- 通过gulp.task注册一个工作
- 通过gulp.run执行工作
- 通过gulp.watch监听文件变动
- 通过gulp.src读取文件
- 通过gulp.dest写文件
Gulp的最大特点是引入了流的概念，同时提供了一系列罕用的插件去解决流，流能够再插件之间传递。
Fis3
Fis3是一个来自百度的优良构建工具，绝对于Grunt、Gulp这些只提供了基本功能的工具，Fis3集成了Web开发中的罕用构建性能。它的毛病是目前官网曾经不再保护和更新了。
webpack
Webpack是一个模块化打包工具，在Webpack外面所有文件皆为模块，通过Loader转换文件，通过Plugin注入钩子，最初输入由多个模块组合成的文件。Webpack专一于构建模块化我的项目。
Webpack的有长处是：
- 专一于解决模块化的我的项目，能做到开箱即用
- 通过Plugin拓展，残缺好用又不失灵便
- 应用场景不局限于 Web 开发
- 社区宏大沉闷
Rollup
Rollup是一个和Webpack相似但专一于ES6的模块打包工具。它的亮点在于，能针对ES6源码进行Tree Shaking，以除去那些曾经被定义但没被应用的代码并进行Scope Hoisting,以缩小输入文件的大小和性能晋升。然而Rollup这些亮点随后就被Webpack模拟和实现了