Gulp安装及使用方法

概念：

gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的

安装：

全局安装：

npm i gulp@3.9.1 -g

gulp -v # 测试是否安装成功

全局安装表示在当前电脑中可以使用gulp环境了

局部安装

npm i gulp@3.9.1 --save-dev # 因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖

局部安装表示在当前项目要使用的gulp

局部安装gulp要和全局安装的gulp版本保持一致

如何创建gulpfile文件

第一种方式

​ 在项目的根目录下面直接创建一个___gulpfile.js___,然后直接在这里面进行任务和流程的编写。执行gulp命令的时候会自动查找到这个文件。

 第二种方式

 

 在项目的根目录下面，创建一个名为___gulpfile.js___的___文件夹___，在文件夹里面创建一个___index.js__，这样的话，我们直接执行gulp也会找到这个配置文件。

编写gulpfile.js文件
​ 在gulpfile.js中，我们需要编写的就是我们需要执行的任务。对于gulp来说，我们的任务，就是一个一个的JavaScript异步函数。这个任务函数可以接受一个回调函数作为参数，这个回调函数是有gulp在执行任务函数的时候传递进来的。当我们的任务函数执行之后，我们需要通知gulp当前的任务是执行成功了，还是执行失败了，gulp根据任务函数的通知来决定是否继续执行或者结束。所以，我们要在任务中返回stream、promise、event emmitter、child process或者ovservable这些类型的值，如果我们不返回这些值，那么必须要执行gulp给任务函数传递的回调函数，否则，gulp则获取不到任务函数的执行结果。

​ __注意：既然我们的任务都是函数，那么我们就可以在函数中做任何事情。我们既可以写一般的JavaScript代码，也可以在函数中使用第三方的模块。当然，我们也可以使用Gulp提供的插件。

​ 我们一起来看个例子，例子的文件名是gulpfile.js，是我们的gulp配置文件：

在这个例子中我们定义了三个任务(Task)，每个任务的写法都不太一样。

​ 在第一个任务streamTask中，我们使用了gulp提供的api：src、dest，这两个api会在后面解释，我们重点关注一下任务的返回值，和接收的回调函数。

​ 对于streamTask这个任务，我们在文件底部，通过exports.default将它设置为gulp默认的任务来执行，此时我们在命令行运行gulp命令，它将被执行：

 对于streamTaskWithoutReturn这个任务，我们将它导出为noBack这个名称的任务，我们可以看到它并没有返回stream、promise、event emmitter、child process或者ovservable这些类型之一，也没有接收和使用callback函数，执行的结果如下：

这个时候，gulp提醒我们noBack这个任务并没有完成，并且提醒我们是否忘记在异步完成的时候发信号了。像这种情况，gulp就不知道我们的任务是否完成了。所以我们在编写任务的时候，一定要返回stream、promise、event emmitter、child process或者ovservable这些类型之一，或者接收并使用callback函数了，就像streamTask或者showCallBack函数一样。

​ 对于第三个任务，showCallBack，我们可以看到，它处理了回调函数，但是并没有在文件底部导出这个任务，这个时候就不能通过*gulp [taskName]*的方式去执行这个任务了。

 如果我们去执行gulp showCallBack，gulp会提示我们，showCallBack这个任务没有被定义。

​ 如果我们在文件底部，导出这个任务，像这样：

 那么，我们就可以通过gulp showCallBack命令去执行这个任务了： 

​ 我们可以看到，任务正常执行了，并且输出了cb这个回调函数，这个函数就是gulp在执行任务的时候给我们传递的回调函数，它会移除监听，并做退出操作，这样gulp就能正常执行任务，并且可以获取任务的执行状态了。像上面这个例子，没有被导出的任务叫做__私有任务__，只能够在gulpfile.js里面使用，不能被外部使用，而通过exports导出的任务叫做__公开任务__，可以直接被gulp使用。

​ 至此，我们应该学会了如何编写gulp的单独任务。针对以上的返回类型，需要提及一下，async await函数。我们的任务也可以通过async await函数去编写，因为它会用promise对任务进行包装。大家对以上返回的类型，可能不都了解，等我吗学习完Gulp的API我们就理解了。

​ 我们说gulp在做构建的时候更偏向于流程，接下来，我们看看gulp是如何控制构建流程的。

​ 如果我们有很多个零散的任务，我们想控制执行方式，应该怎么处理呢？这个时候我们就需要使用Gulp提供的两个非常强大的方法：series() 和parallel()。为什么说强大呢，因为这两个方法可以将多个独立的任务组合成一个更大的操作。

​

 

 

 

 series 和 parallel的用法就是如此，我们还可以，任意自由组合使用这两个方法，例如：