Gulp 第一个Gulp任务

本节我们开始学习如何创建 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 命令，会先执行数组中的任务，我们来看一下任务的执行顺序：

链接：https://www.9xkd.com/