常见的构建工具及对比

构建工具将源代码转换成可执行的javascript、css、html代码，包括
代码转换：将TS转换成JS，将SCSS、LESS编译成CSS等。
文件优化：压缩JS、CSS、html代码，压缩合并图片等。
代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有许多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前，需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
构建其实就是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。
历史上先后出现了一系列构建工具，他们各有各的优缺点。

1.NPM Script
Npm是node安装时候自带的包管理器，Npm Script是Npm内置的一个功能，允许在package.json文件里使用scripts字段定义任务：
{
"scripts":{
"dev":"node dev.js"
}
}
NPM Script的优点是内置，无需安装其他依赖。缺点是功能太简单，虽然提供了pre和post两个钩子，但是不能方便的管理多个任务之间的依赖。

2.Grunt
Grunt（https://gruntjs.com）和Npm Script类似，也是一个任务执行者。Grunt有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化地执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js里
Grunt的优点是：
灵活，它只负责执行我们定义的任务
大量的可复用插件封装好了常见的构建任务。
Grunt的缺点是集成度不高，要写很多配置后才可以用，无法做到开 箱即用。
Grunt相当于进化版的NPM Script，它的诞生其实是为了弥补NPM Script的不足。

3.gulp
gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。gulp被设计的非常简单，只通过下面5种方法就可以支持几乎所有构建场景：
通过gulp.task注册一个任务
通过gulp.run执行任务
通过gulp.watch监听文件的变化
听过gulp.src读取文件
通过gulp.dest写文件
gulp的最大特点是引入了流的概念,同时提供了一系列常用的插件去处理流,流可以在插件之间传递.
gulp的优点是好用又不失灵活,即可以单独完成构建,也可以和其他工具搭配使用.
缺点和grunt类似,集成度不高,要写很多配置后才能使用,无法做到开箱即用
可以把gulp看作grunt的加强版。相对于grunt，gulp增加了监听文件、读写文件、流式处理的功能。

4.Fis3
Fis3是来自百度的国产构建工具，相对于grunt，gulp这些只提供了基本功能的工具，Fis3集成了web开发中常用的购将功能，
读写文件：通过fis.match读文件,release配置文件的输出路径
资源定位：解析文件之间的依赖关系和文件位置。
文件指纹：在通过useHash配置输出文件时为文件Url加上md5戳，来优化浏览器的缓存。
文件编译：通过parser配置文件解析器做文件转换，例如将ES6编译成ES5。
压缩资源：通过optimizer配置文件压缩方法
图片合并：通过spriter配置合并CSS里导入的图片到一个文件中，来减少HTTP请求数。
Fis3的优点是集成了各种web开发所需的构建功能，配置简单、开箱即用。
缺点是官方不在更新和维护，不支持最新版本的node.js
Fis3是一种专注于web开发的完整解决方案，如果将grunt、gulp比作汽车的发动机，那可以将Fis3比作一辆完整汽车。

5.Webpack
webpack是一个打包模块化JS的工具，在webpack里一切文件都是模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。
一切文件如JS、CSS、SCSS、图片、模板，对于webpack来说都是一个个模块，这样的好处是能够清晰的描述各个模块之间的依赖关系，以方便webpack对模块进行组合和打包。经过webpack的处理，最终会输出浏览器能使用的静态资源。
webpack具有很大的灵活性，能配置处理文件的方式，使用方法大致如下：
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
}
}
webpack的优点是：
专注于处理模块化的项目，能做到开箱即用，一步到位
可以通过plugin扩展，完整好用又不失灵活
使用场景不局限于web开发
社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
良好的开发体验
webpack的缺点是只能用于采用模块化开发的项目。
6.Rollup
Rollup是一个和webpack很类似但专注于ES6的模块打包工具，它的亮点在于，能针对ES6源码进行Tree Shaking，以去除那些已被定义但没使用的代码并进行Scope Hoisting（作用域提升），以减小输出文件的大小和提升运行性能。然而Rollup的这些亮点随后就被webpack模仿和实现。由于rollup的方法和webpack差不多，所以说一下他们的差别：
Rollup是在Webpack流行后出现的替代品
Rollup生态链不完整，体验不如Webpack
Rollup的功能不如webpack完善，但其配置和使用更简单
Rollup不支持Code Spliting，但好处是在打包出来的代码中没有webpack那段代码的加载、执行和缓存的代码。
Rollup在用于打包JS代码库时比webpack更有优势，因为其打包出来的代码更小、更快。但它的功能不够完善，在很多场景下找不到现成的解决方案。

为什么选择Webpack？
NPM Screipt和Grunt时代，web开发要做的事情变多，流程复杂，自动化思想被引入，用于简化流程。
在Glup时代，开始出现一些新语言用于提高开发效率，流失处理思想的出现是为了简化文件转换的流程，例如将ES6转化为ES5
在Webpack时代，由于单页应用的流行，网页的功能和实现代码变得复杂、庞大，web开发向模块化改进。

这些构建工具都有各自的定位和专注点，它们之间既可以单独完成任务，也可以互相搭配来弥补各自的不足。在了解这些常见的构建工具后，我们需要根据自己的需求去判断应该如何选择和搭配它们才能更好的满足自己的需求。
经过多年发展，webpack已经成为构建工具中的首选，这是有原因的：
大多数团队在开发新项目时，会采用紧跟时代的技术，这些技术几乎都会采用“模块化+新语言+新框架”，webpack可以为这些新项目提供一站式的解决方案。
webpack有良好的生态链和维护团队，能提供良好的开发体验并保证质量。
webpack被全世界大量的web开发者使用和验证，能找到各个层面所需的教程和经验分享。