（28）自动化构建工具Gulp

一、自动化构建工具介绍

Grunt：它是最早的自动化构建工具，它是基于临时文件进行构建的，构建速度慢。

Gulp：它是基于内存进行构建的。是我们目前最流行最常用的自动化构建工具。构建速度快，上手更容易。

FIS：它是百度前端团队开发的构建工具，以前只是百度公司内部使用，现在开源了，这个工具插件少，目前不怎么维护了，可以看到该工具上次维护时间还是几年之前。

二、自动化构建工具的作用

简单来说就是使用工具帮我们把乱七八糟的一些文件整理成我们看起来更简洁的项目结构。可以把它当成保姆，帮我们整理项目。

三、Gulp 与 npm scripts对比

• Gulp 与 npm scripts 都能够实现自动化构建

• Gulp 语法简单

• Gulp 语法就是 JavaScript 语法

• npm scripts 语法接近 shell 脚本

• Gulp 生态完善，构建效率高，所以我们接下来要学习Gulp这款自动化构建工具

四、Gulp使用步骤

• 全局安装 gulp 客户端（ npm install -g gulp- cli ）

• 初始化项目（npm init --yes）

• 安装 gulp 包（ npm install gulp -D ）

• 新建 gulpfile 文件 （ gulpfile.js ）

• 在 gulpfile.js 中，创建 gulp 任务

• 执行 gulp 任务 （ gulp <task-name> ）

五、Gulp使用演示

1.全局安装 gulp 客户端（ npm i gulp-cli -g）

2.初始化项目（npm init --yes）

3.安装 gulp 包（ npm install gulp -D ）

注意：安装过程中有可能会出现如下错误，出现该错误是因为我们的name名称原因，我们只需要更改name名称为除gulp其他的都可以。

当我们把名称更改后，再执行gulp包安装就不会报错啦。 

4.新建 gulpfile 文件 （ gulpfile.js ）

5. 在 gulpfile.js 中，创建 gulp 任务

6.执行 gulp 任务 （ gulp <task-name> ）

当我们运行gulp任务后会出现多种报错。

第一种报错：task never defined（task从没有定义）

报错原因：该错误说明我们再定义完成gulp任务后，并没有进行导出，所以相当于为定义。

解决方法：将task1任务进行导出

当我们导出任务后，再执行gulp任务，发现虽然打印输出了，但是还是报错。

报错分析：task并没有完成，你是否忘记发出一个异步信号了？我们的gulp新版本需要再gulp任务当中需要写回调函数，所以会报错，我们gulp旧版本之前是支持同步执行的，现在新版本不支持同步执行，也就是都是异步执行的。

解决方法：我们给task1任务写一个回调函数，然后调用回调函数，即可解决该问题。

当我们写入回调函数后，我们发现没有任何报错啦！

我们继续创建第二个任务，task2，然后再导出的时候，我们添加一个default关键字，然后将task2任务写入default关键字当中，然后执行命令可以进行简写，直接书写一个gulp，那么默认执行的是task2任务。

通过如下图我们发现，不管是执行gulp简写命令方式执行，还是通过完整命令执行，都可以成功执行。

如果我们使用gulp task2命令执行，它会报错，因为我们导出的时候，再它的前面加入了default关键字，所以它会认为你没有导出，所以要想执行加入了default关键字，就只能通过gulp命令或者gulp default命令执行gulp任务。 

旧版声明任务的语法

注意：旧版声明任务的语法，不需要写任务导出，因为旧版声明任务的语法没有存放在const常量中，所以不需要导出。