美文网首页
Gulp 导出任务

Gulp 导出任务

作者: 暖A暖 | 来源:发表于2021-07-20 22:23 被阅读0次

Gulp 中的任务可以是可以分为 public(公有)和 private (私有)类型。

  • 公有任务:从 gulpfile 中被导出的任务称为公有任务,可以通过 gulp 命令直接调用。
  • 私有任务:在内部使用,通常作为 series()parallel() 组合的组成部分。

一个私有类型的任务在外观和行为上和其他任务是一样的,但是不能够被用户直接调用。如果需要将一个任务注册为公有类型的,只需要从 gulpfile.js 文件中将任务通过 export 导出即可。

如何导出任务

我们可以在 gulpfile.js 文件中,使用 export 命令导出任务,这样这个被导出的任务变为了一个公有任务(public task),可以被 gulp 命令直接调用。

示例:

看下面这个例子:

const { series } = require('gulp');

// clean函数并未被导出,因此clean是私有任务,可以被用在 series() 组合中
function clean(cb) {
  cb();
}

// build 函数被导出了,因此它是一个公有任务,可以被 gulp 命令直接调用,它也可用在series()组合中
function build(cb) {
  cb();
}

// 导出 build 函数
exports.build = build;
exports.default = series(clean, build);

执行 gulp --tasks 命令:

在以前的 gulp 版本中,task() 方法用来将函数注册为任务。虽然这个 API 依旧是可以使用的,但是导出将会是主要的注册机制,除非遇到 export 不起作用的情况。

组合任务

Gulp 提供了两个强大的组合方法: series()parallel() 方法,这两个方法允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务(task)函数或已经组合的操作。series()parallel() 方法可以互相嵌套至任意深度。

如果需要让任务按顺序执行,可以使用 series() 方法。

示例:
const { series } = require('gulp');

function one(cb) {
  console.log("one")
  cb();
}

function two(cb) {
  console.log("two")
  cb();
}

exports.build = series(one, two);

执行 gulp build 命令:

可以看到图片中,按照任务的执行完毕的先后顺序为 one > two > build

如果希望以最大并发来运行的任务,可以使用 parallel() 方法将它们组合起来:

const { parallel } = require('gulp');

function one(cb) {
  console.log("one")
  cb();
}

function two(cb) {
  console.log("two")
  cb();
}

exports.build = parallel(one, two);

series()parallel() 被调用时,任务被立即组合在一起。这就允许在组合中进行改变,而不需要在单个任务中进行条件判断。

示例:
const { series } = require('gulp');

function one(cb) {
  cb();
}
function two(cb) {
  cb();
}
function three(cb) {
  cb();
}
if (process.env.NODE_ENV === 'production') {
  exports.build = series(two, one);
} else {
  exports.build = series(two, three);
}

上述代码中表示如果在生产环境下执行,则运行 exports.build = series(two, one),否则运行 exports.build = series(two, three),我们看一下执行结果:

series()parallel() 可以被嵌套到任意深度:

const { series, parallel } = require('gulp');

function one(cb) {
  cb();
}
function two(cb) {
  cb();
}
function three(cb) {
  cb();
}
function four(cb) {
  cb();
}
function five(cb) {
  cb();
}

exports.build = series(
  one,
  parallel(
    two,
    series(three, four)
  ),
  five
);

执行命令:

相关文章

  • Gulp 导出任务

    Gulp 导出任务 Gulp 中的任务可以是可以分为 public(公有)和 private (私有)类型。 公有...

  • Gulp 导出任务

    Gulp 中的任务可以是可以分为 public(公有)和 private (私有)类型。 公有任务:从 gulpf...

  • gulp初识 - 导出任务+异步类型

    本篇是了解基础,照着官方文档按部就班的敲了几行代码而已,,当然学习了如何使用gulp的src、dest来生成dis...

  • Gulp的几个常用功能

    npm 安装 Gulp 常用方法 gulp.task -- 定义任务 gulp.src -- 找到需要执行任务的文...

  • Gulp4(一)——基本使用及核心原理

    目录 GlupGulp的使用步骤Gulp的基本使用安装起步默认任务gulp4.0之前的任务注册Gulp的组合任务G...

  • npm install gulp --save-dev

    全局安装了gulp,项目也安装了gulp 全局安装gulp是为了执行gulp任务 本地安装gulp则是为了调用gu...

  • gulp学习

    Gulp API主要包括4个顶级函数。如下 gulp.task(name, deps, fn)定义任务 gulp....

  • gulp入门

    1.gulp环境配置 阮一峰gulp教程 2.gulp常用的方法 1.gulp.task -- 定义任务 2.gu...

  • gulp备忘

    gulp接口gulp.src 待处理文件gulp.dest 输出结果gulp.task 设置一个任务名及其依赖gu...

  • ES6 项目构建

    任务自动化gulp

网友评论

      本文标题:Gulp 导出任务

      本文链接:https://www.haomeiwen.com/subject/eetdmltx.html