“构建工具是将本地源文件按照一定的逻辑规范，编译打包成浏览器识别的文件，然后推送到相应服务器环境下供展示的一种前端工具，工具的目的就是帮助开发者降低开发成本，使开发者更加专注业务逻辑开发本身。”
何为构建？
把源代码生成可执行应用程序的过程自动化的程序，构建包括编译、连接跟把代码打包成可用的或可执行的形式。
前端的构建一般包括：
- JS转码（使用Babel转ES6或TypeScript自转等）
- CSS转码（Less或Sass转Css）
- 代码或资源的合并与压缩
- 基础检查和各类测试
- ……
举例说明： - 用 CoffeeScript/ES6 代替Javascript，但是浏览器对这些语言是不支持或者支持得不完整的，需要将其编译成Javascript(ES5)
- 用Less去写CSS
- 用Jade去写HTML
- 用Browserify去模块化
- 为非覆盖部署的资源加MD5戳等
三类构建工具
- 模块化打包类：Webpack
- 任务流构建类 ：Gulp
- 集合型工具类（脚手架）：React CLI | Vue CLI | Angular CLI
本文主要介绍构建工具
- Npm Scripts
- Gulp
- Webpack
1.Npm Scripts（NPM脚本）
NPM是安装Node时附带的一个包管理器，脚本功能是 npm 内置的最强大、最常用的功能之一。Npm Scripts（NPM脚本）是一个任务执行者。
什么是NPM脚本？
定义在package.json里面的脚本，就称为 npm 脚本。
举例说明：
在 package.json 文件里面使用 scripts 字段定义任务
{
"scripts":{
"dev": "node dev.js",
"pub": "node build.js"
}
}
上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段Shell脚本。
以上代码定义了两个任务，dev 和 pub。
命令行下使用npm run命令，就可以执行这段脚本。
$ npm run pub
# 等同于执行
$ node build.js
优点：
npm scripts 的优点是内置，无需安装其他依赖
缺点：
功能太简单，虽然提供了 pre 和 post 两个钩子，但不能方便的管理多个任务之间的依赖。
npm使用指南：
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
2. Gulp
Gulp是一个基于流的自动化构建工具。除了可以管理任务和执行任务，还支持监听文件、读写文件。Gulp 被设计的非常简单，只通过下面5个方法就可以支持几乎所有构建场景：
- 通过
gulp.task注册一个任务； - 通过
gulp.run执行任务； - 通过
gulp.watch监听文件变化； - 通过
gulp.src读取文件； - 通过
gulp.dest写完文件。
特点
引入了流的概念，同时提供了一系列常用插件去处理流，流可以在插件之间传递
优点：
好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。
缺点：
集成度不高，要写很多配置后才可以用，无法做到开箱即用。
3. WebPack
Webpack 是一个打包模块化的JavaScript的工具，在Webpack里一切文件皆模块，通过 loader 转换文件，通过Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。
一切文件，如JavaScript、CSS、SCSS、图片、模板，对于Webpack 来说都是一个个模块
四大核心要素：
entry： 配置入口文件，即产生依赖关系图的入口
output：文件的产出位置配置
loader：匹配文件的编译过程
plugins：针对整个构建打包流程的插件处理（文件压缩，dev环境的热加载）
举例说明：
module.exports = {
// 所有模块的入口，webpack从入口开始递归解析出所有依赖的模块
entry: './app.js',
output: {
// 将入口所依赖的所有模块打包成一个文件 bundle.js 输出
filename: 'bundle.js'
}
}
优点：
- 专注于处理模块化的项目，能做到开箱即用、一步到位；
- 可通过 Plugin 扩展，完整好用又不失灵活性；
- 使用场景不局限于Web开发；
- 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
- 良好的开发体验；
缺点：
只能用于采用模块化开发的项目。
网友评论