自动化构建工具简单来说就是将一些重复的事情集合，减轻开发人员负担的工具。举个例子就是浏览器对ES6、Less、TypeScript等语言并不支持，此时开发人员就需要将这些语言编译成浏览器支持的HTML、JS或CSS，此时就需要一个自动化工具，可以帮助到开发人员快速、简单地完成这个目的。
所谓地构建工具就是将源代码转换成可以执行的JavaScript、CSS、HTML代码，包括了
- 代码转换：将 TypeScript 编译成JavaScript、将 SCSS 编译成 CSS等；
- 文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等；
- 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分代码让其异步加载；
- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件；
- 自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器；
- 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过；
- 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
常见的构建工具有：Npm、Grunt、Gulp、Fis 3、Webpack、Rollup等，这里我们将以其中的gulp为例子学习。
Gulp的介绍
中文官网：www.gulpjs.com.cn/
Gulp是一个基于流的自动化构建工具。除了可以管理任务和执行任务，还支持监听文件、读写文
件。Gulp被设计的非常简单，只通过下面5个方法就可以支持几乎所有构建场景：
- 注册任务：
gulp.task； - 读取文件：
gulp.src； - 写入文件：
gulp.dest； - 监听文件变化：
gulp.watch； - 执行任务：
gulp.run。
Gulp的流
Gulp最大的特点是引入了流的概念，同时提供了一系列常用插件去处理流，流可以使用pipe在插件之间传递。
例子1：将scss文件编译成css文件
var gulp = require("gulp"); // 引入Gulp
var sass = require("gulp-sass"); // 引入scss插件
gulp.task('scss', function() { // 注册任务
gulp.src('./scss/*.scss') // 读取文件，通过流传递给scss插件
.pipe(sass()) // 插件将scss文件编译成css
.pipe(guilp.dest('./css')); // 输出文件，再通过管道流向指定目录
});
例子2：合并压缩 JavaScript 文件
var gulp = require("gulp"); // 引入Gulp
var concat = require("gulp-concat"); // 引入js插件
gulp.task('scripts', function() { // 注册任务
gulp.src('./js/*.js') // 读取文件
.pipe(concat('all.js')) // 合并
.pipe(uglify()) // 压缩
.pipe(gulp.dest('./dest')); // 输出文件
});
例子3：监听文件变化
var gulp = require("gulp"); // 引入Gulp
gulp.task('watch', function() {
// 当 SCSS 文件被编辑时执行 SCSS 任务
// 当 SCSS 文件被编辑时执行 JS 任务
gulp.watch('./scss/*.scss', ['scss']);
gulp.watch('./js/*.js', ['scripts']);
});
