乐趣区

关于gulp:Gulp-第一个Gulp任务

本节咱们开始学习如何创立 Gulp 工作。每一个 Gulp 工作都是一个异步的 JavaScript 函数,这个函数是一个能够接管回调函数 callback 作为参数的函数,或者是一个返回 streampromiseevent emitterchild processobservable 类型值的函数。

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()}))

而后将工作 onetwo 增加到工作 test 中,此时如果咱们输出 gulp test 命令,会先执行数组中的工作,咱们来看一下工作的执行程序:

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

退出移动版