概念:
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的用法就是如此,我们还可以,任意自由组合使用这两个方法,例如: