前端构建工具对比

上文介绍过前端模块化的发展，但是它们都有一个共同点：源代码无法直接运行，必须通过转换后才可以正常运行。 构建就是做这件事，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容：

构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现。下面介绍一些常用构建工具：

Npm Script是Npm内置的一个功能，允许在package.json文件里使用script字段定义任务。Npm Script的优点是内置，无需要安装其他依赖。其缺点是功能太简单，不能方便地管理多个任务之间的依赖。

Grunt也是一个任务执行者。Grunt有大量现成的插件，也能管理任务之间的依赖关系，自动化地执行依赖任务，每个任务的具体执行代码和依赖的关系写在配置文件Gruntfile.js里。Grunt的缺点是集成度不高，要写很多配置文件后才可以使用，无法做到开箱即用。

Gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。Gulp被设计的非常简单，只通过下面5种方法就可以支持几乎所有的构建场景：

Gulp的最大特点是引入了流的概念，同时提供了一系列常用的插件去处理流，流可以再插件之间传递。

Fis3是一个来自百度的优秀构建工具，相对于Grunt、Gulp这些只提供了基本功能的工具，Fis3集成了Web开发中的常用构建功能。它的缺点是目前官方已经不再维护和更新了。

Webpack是一个模块化打包工具，在Webpack里面一切文件皆为模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目。
Webpack的有优点是：

Rollup是一个和Webpack类似但专注于ES6的模块打包工具。它的亮点在于，能针对ES6源码进行Tree Shaking，以除去那些已经被定义但没被使用的代码并进行Scope Hoisting,以减少输出文件的大小和性能提升。然而Rollup这些亮点随后就被Webpack模仿和实现了