构建工具的诞生背景

各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点：源代码无法直接运行，必须通过转换后才可以正常运行。
构建就是做这件事情，将源代码转换成可执行的JavaScript、css、HTML代码，包括如下内容。

  • 代码转换：将TypeScript编译成JavaScript、将scss编译成css等。
  • 文件优化：压缩JavaScript、css、HTML代码，压缩合并图片等。
  • 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
  • 自动刷新：监昕本地源代码的变化，自动重新构建、刷新浏览器。
  • 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  • 自动发布：更新代码后，自动构建出线上发布代码井传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建为前端开发注入了更大的活力，解放了我们的生产力。
历史上先后出现了一系列构建工具，它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求，所以大多数构建工具都是用Node.JS开发的。

横向对比:各个构建工具

Npm Script

Npm Script的优点是内置，无须安装其他依赖。
其缺点是功能太简单，虽然提供了pre和post两个钩子，但不能方便地管理多个任务之间的依赖。

Grunt

Grunt ( https://gruntjs.com）和NpmScript类似，也是一个任务执行者。Grunt有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化地执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js里.
代码待拷贝
Grunt的优点是：

  • 灵活，它只负责执行我们定义的任务；
  • 大量的可复用插件封装好了常见的构建任务。

Grunt的缺点是集成度不高，要写很多配置后才可以用，无法做到开箱即用。
Grunt相当于进化版的NpmScript，它的诞生其实是为了弥补NpmScript的不足。
笔者注: 看上去是相当原始的语法了.

Gulp

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

  • 通过gulp.task注册一个任务；
  • 通过gulp.run执行任务；
  • 通过gulp.watch监听文件的变化；
  • 通过gulp.src读取文件;
  • 通过gulp.dest写文件。

Gulp 的最大特点是引入了流的概念，同时提供了 系列常用的插件去处理流，流可以在
插件之间传递.
Gulp的优点是好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。
其缺点和Grunt类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用。
可以将Gulp看作Grunt的加强版。相对于Grunt,Gulp增加了监昕文件、读写文件、流式处理的功能。
笔者注: gulp最明显的一个特征就是管道.构建任务多处使用了管道的概念.例如
// 编译 scss 任务 gulp.task(‘sass’, function() { // 读取文件，通过管道喂给插件 gulp.src(‘./scss/*.scss’) // scss 插件将 scss 文件编译成 css 文件 .pipe(sass()) //输出文件 .pipe(gulp.dest(‘./css’)); }) })

Fis3

Fis3 (https ://fex.baidu.com/fis3/)是一个来自百度的优秀国产构建工具。相对于 Grunt.Gulp 这些只提供了基本功能的工具， Fis3 集成了 Web 开发中的常用构建功能,如下所示:

  • 读写文件 通过 fis .match 读文件， release 配置文件的输出路径。
    章入门
  • 资源定位：解析文件之间的依赖关系和文件位置。
  • 文件指纹：在通过 useHash 配置输出文件时为文件 URL 加上 md5 戳，来优化浏览器的缓存。
  • 文件编译：通过 parser 配置文件解析器做文件转换，例如将 ES6 编译成 ES5
  • 压缩资源 通过 optimizer 配置代码压缩方法。
  • 图片合并：通过 spriter 配置合并 ss 里导入的图片到一个文件中，来减少 HTTP请求数。

Fis3 的优点是集成了各种 Web 开发所需的构建功能，配置简单、开箱即用 。其缺点是目前官方己经不再更新和维护，不支持最新版本的 Node.js.
Fis3 种专注于 Web 开发的完整解决方案，如果将 Grunt Gulp 比作汽车的发动机，则可以将 Fis3 比作辆完整的汽车。

Rollup

Rollup (https:/ rollupjs.org ）是 个和 Webpack 很类似但专注于 ES6 的模块打包工具。它的亮点在于，能针对 S6 源码进行 Tree Shaking ，以去除那些己被定义但没被使用的代码并进Scope Hoisting ，以减小输出文件的大小和提升运行性能 。然 Rollup 的这些亮点随后就被Webpack 模仿和实现。由于 Rollup 的使用方法和 Webpack 差不多 ，所以这里就不详细介绍如何使 oll up 了，而是详细说明它们的差别：

  • Rollup 是在 Webpack 流行后出现的替代品：
  • Rollup 生态链还不完善，体验不 Webpack;
  • Rollup 的功能不如 bpack 完善，但其配置和使用更简单：
  • Rollup 不支持 Code Spliting，但好处是在打包出来的代码中没有 Webpack 那段模块
    的加载、执行和缓存的代码。

Roll up 在用于打包 JavaScript 库时比 Webpack 更有优势，因为其打包出来的代码更小,更快,但它的功能不够完善，在很多场景下都找不到现成的解决方案.
笔者: 一句话,用的人少,刚起步,谁用谁吃螃蟹,甚至要你自己去煮螃蟹

什么是Webpack

Webpack(https://webpack.js.org）是一个打包模块化 JavaScript 的工具，在 Webpack里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。 Webpack 专注于构建模块化项目。

webpack发展史以及与其他工具的异同 ---黄梦飞 - 图1
官网首页图

一切文件如 JavaScript css scss 、图片、模板，对于 Webpack 来说都是一个个模块，这样的好处是能清晰地描述各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。
Webpack 的优点是:

  • 专注于处理模块化的项目，能做到开箱即用、 一步到位：
  • 可通过 Plugin 扩展，完整好用又不失灵活;
  • 使用场景不局限于 Web 开发：
  • 社区庞大活跃 经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展：
  • 良好的开发体验

Webpack 的缺点是只能用于采用模块化开发的项目

为什么选择 Webpack

上面介绍的构建工具是按照它们诞生的时间排序的，它们是时代的产物，侧面反映出开发的发展趋势，如下所述：

  • Npm Script Grunt 时代(笔者:能跟npm script同期对比,可见grunt有多烂)， Web 开发要做的事情变多，流程复杂，自动化思想被引入，用于简化流程；
    • Gulp 时代，开始出现一些新语言用于提高开发效率，流式处理思想的出现是为了简化文件转换的流程，例如将 ES5 转换成 ES6;
    • Webpack 时代，由于单页应用的流行，网页的功能和实现代码变得复杂、庞大，Web 开发向模块化改进.

这些构建工具都有各自的定位和专注点，它们之间既可以单独完成任务，也可以相互搭配来弥补各自的不足。在了解这些常见的构建工具后，我们需要根据自己的需求去判断应该如何选择和搭配它们才能更好地满足自己的需求。
经过多年的发展， Webpack 经成为构建工具中的首选，这是有原因的：

  • 大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化＋新语言＋新框架” Webpack 可以为这些新项目提供一站式的解决方案;
  • Webpack 有良好的生态链和维护团队，能提供良好的开发体验并保证质量：
  • Webpack 被全世界大量的 Web 开发者使用和验证，能找到各个层面所需的教程和验分享。