本节我们开始学习如何创建 Gulp
任务。每一个 Gulp
任务都是一个异步的 JavaScript 函数,这个函数是一个可以接收回调函数 callback
作为参数的函数,或者是一个返回 stream
、promise
、event emitter
、child process
或 observable
类型值的函数。
gulp.task()方法
gulp.task()
用于创建一个 gulp
任务,语法如下所示:
gulp.task(name[, deps], fn)
-
name
: 表示任务的名称。 -
deps
:当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则省略这个参数。 -
fn
:为任务函数,我们把任务要执行的代码都写在里面。是一个可选参数。
给任务起一个唯一的名称后,我们可以通过这个名称来执行任务,例如:
> gulp 任务名
在执行任务时,如果我们不加任务名进行执行,也就是只输入 gulp
命令时 ,会执行名为 default
的默认任务,如果没有定义这个任务,将什么也不做。
创建gulpfile文件
首先我们需要在项目根目录下创建一个 gulpfile.js
文件。并在文件中引入 gulp
:
var gulp = require('gulp');
用于告诉 Node 去 node_modules
中查找 gulp
包,先在局部进行查找,找不到则去全局环境中查找。找到之后就会赋值给 gulp
变量,然后我们就可以使用它了。
示例:
例如创建一个名为 xkd
的任务:
let gulp = require('gulp');
gulp.task('xkd', done => {
console.log("你好,侠课岛!")
done()
});
执行 gulp xkd
命令,下图为运行结果:
- 运行结果第一行表示找到本地的
gulpfile.js
文件。 - 运行结果第二行表示开始运行任务
xkd
,这个xkd
是我们给任务定义的名称。 - 运行结果第三行表示运行代码内的逻辑。
- 运行结果第四行表示任务
'xkd'
运行结束,一共耗时5.27 ms
执行多个任务
gulp.task()
方法中的第二个参数为一个数组,数组中的值是任务名的集合,当执行此任务时,会先执行数组中的任务。我们来看一下例子。
示例:
下面我们定义三个任务:
const gulp = require('gulp');
gulp.task('one', done1 => {
console.log("第一个任务");
done1();
})
gulp.task('two', done2 => {
console.log("第二个任务");
done2();
})
gulp.task('test', gulp.series('one', 'two', done3 =>{
console.log("测试任务")
done3()
}))
然后将任务 one
、two
添加到任务 test
中,此时如果我们输入 gulp test
命令,会先执行数组中的任务,我们来看一下任务的执行顺序:
网友评论