1、什么是自动化构建
自动化构建指的是自动的将源代码构建为浏览器可执行的代码的过程。其中涉及到代码的打包、依赖的整合、以及兼容性处理等内容。
例如，我们使用npm run script 命令来执行某个任务，比如将sass文件转化为css文件（这其实就是构建中的一个步骤）。我们可以按照顺序一个命令一个命令的来执行自动化构建的过程，但是这显然相当繁琐。所以自动化构建工具应运而生，它可以整合这些命令，让构建变得自动化。
2、自动化构建工具有哪些
（1）Grunt：最早的构建工具，磁盘读写，速度慢。
（2）Gulp：内存读写，速度快，且支持同时执行多个任务。比较流行。
（3）Fis：大而全，内部集成了很多构建需求。
为什么没有webpack？
因为webpack是模块化打包工具，和他们本质上不是一个东西，这三个只是任务执行器，执行什么任务靠你编写的任务函数来决定，而webpack目的很明确就是打包项目。
Gulp和webpack的区别
2.1 Grunt
// 在根本录下创建一个gruntfile.js文件，这个文件是Grunt的入口文件，用于定义一些需要Grunt执行的任务。例如：
module.export = grunt => {
grunt.registerTash('foo', () => { // 注册一个任务
console.log('foo');
})
}
// 这样我们就可以使用yarn grunt foo 命令来执行foo这个任务了，当然foo这个任务里面可以指定多个命令，从而实现自动化构建的功能。
2.2 Gulp
和Grunt类似，需要定义一个入口文件:gulpfile.js.在这个文件中去定义构建任务。
exports.taskName = (done) => {
done() // 因为最新的gulp约定每个任务都是异步任务，所以需要手动调用done这个函数来标识这个任务结束了
}
// 运行`yarn gulp taskName`命令来执行这个任务。如果taskName是`default`的话就表示这是一个默认任务，也就是不指定任务名称时执行的任务。
2.2.1 创建组合任务
const {series, parallel} = require('gulp');
exports.foo1 = series(t1, t2); // 串行任务
exports.foo2 = parallel(t1, t2); // 并行任务
2.2.2 Gulp异步任务结束方式
前面我们使用过done函数去结束gulp异步任务，实际上我们不只可以这样结束异步任务，有四种方式可以做到。
（1）调用done()
（2）手动返回一个Promise对象，此对象的状态决定了异步任务的状态
（3）async await方式
（4）返回一个文件流的方式，文件流内部有end事件标志异步任务的结束。这也是最常用的方式。
2.2.3 Gulp使用实例
上图中我们创建了两个任务，分别是style（转换scss文件为css）和script。其中src和dest方法是gulp提供的文件流读取和写入方法。中间sass和babel是转换文件流的方法。Gulp本身只是一个任务执行器，需要配合各种插件去完成构建任务。
那么我们现在知道了如何去编写gulp任务，也知道如何去组合这些任务。现在有一个问题，就是这些任务的书写很复杂，并且基本上每个项目都需要去做这些操作，那么我们肯定需要保存编写好的gulpfile.js文件，在下一项目需要使用的时候直接复制粘贴即可。但是这样做还会带来新的问题，那就是无法和别人共享，也很难在多个项目中维护。那么解决的办法就是我们可以把gulpfile和gulp封装成一个npm模块，这样在需要的时候直接去安装这个模块就可以了。我们只需要去维护这个npm模块就可以同步到各个项目中了。
2.3 Fis
Fis已经停止维护了，简单来说其实和Gulp类似，但是Fis内部封装了很多内置的任务，也就不需要我们手动去创建，比较方便。
