Gulp API

作者: 暖A暖 | 来源:发表于2021-08-10 21:14 被阅读0次

本节我们来看一下 Gulp 中的 API 方法,如下所示:

方法 描述
src() 创建用于从文件系统读取 Vinyl 对象的流
dest() 创建一个用于将 Vinyl 对象写入到文件系统的流
symlink() 创建一个流(stream),用于连接 Vinyl 对象到文件系统
lastRun() 检索在当前运行进程中成功完成任务的最后一次时间
series() 将任务函数和/或组合操作组合成更大的操作,这些操作将按顺序依次执行
parallel() 将任务功能和/或组合操作组合成同时执行的较大操作
watch() 监听 globs 并在发生更改时运行任务
task() 在任务系统中定义任务
registry() 允许将自定义的注册表插入到任务系统中,以期提供共享任务或增强功能
tree() 获取当前任务依赖关系树——在极少数情况下需要它
Vinyl 虚拟的文件格式
Vinyl.isVinyl() 检测一个对象(object)是否是一个 Vinyl 实例
Vinyl.isCustomProp() 确定一个属性是否由 Vinyl 在内部进行管理

我们在使用 gulp 时,一般只需要用到 4 个 API,分别是 gulp.src()、gulp.dest()、gulp.task()、gulp.watch(),下面我们详细介绍一个这 4 个常用 API 的使用。

gulp.src()方法

gulp.src() 方法用于创建一个流。但是要注意的是这个流里的内容不是原始的文件流,而是一个虚拟文件对象流(vinyl files),这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。

语法如下所示:

gulp.src(globs, [options])
  • globs :文件匹配模式(类型正则表达式),用来匹配文件路径(包括文件名),也可以直接指定某个具体的文件路径。
  • options:可选参数,通常情况下不需要用到。

示例:

例如下面这个例子,将 input 文件夹中的 .js 文件复制到 output 文件夹中:

const { src, dest } = require('gulp');

function copy() {
  return src('input/*.js')
    .pipe(dest('output/'));
}

exports.copy = copy;

执行 gulp copy 命令后,文件成功被复制。

gulp.dest()方法

gulp.dest() 方法可以创建一个用于将 Vinyl 对象写入到文件系统的流。

语法如下:

gulp.dest(path[ , options])
  • path:为写入文件的路径。
  • options:可选的参数对象,通常用不到。

gulp.dest() 方法是和 gulp.src() 方法搭配使用的,例如上述这个复制文件的示例。

gulp 的使用流程一般是,首先通过 gulp.src() 方法获取我们想要处理的文件流,然后把文件流通过 pipe 方法导入到 gulp 插件中,最后把经过插件处理后的流再通过 pipe 方法导入到 gulp.dest() 中,gulp.dest() 方法则把流中的内容写入到文件中。

注意,给 gulp.dest() 传入的路径参数,只能用来指定要生成的文件的目录,而不能指定生成文件的文件名,它生成文件的文件名使用的是导入到它的文件流自身的文件名,所以生成的文件名是由导入到它的文件流决定的。

gulp.task()方法

gulp.task() 方法用于在任务系统中定义任务,然后可以从命令行和 series()、parallel()、lastrun() 等 API 访问该定义好的任务。

语法如下所示:

gulp.task( name [ , deps ] , fn )
  • name:任务名。
  • deps:是当前定义的任务需要依赖的其他的任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可以省略这个参数。
  • fn:可选参数,为任务函数,我们把任务要执行的代码都写在里面。

示例:

task() 方法的用法有下面几种:

  • 将命名函数注册为任务,其中函数名 test 就是任务名:
const { task } = require('gulp');

function test(cb) {
  console.log("命令函数")
  cb();
}

task(test);
  • 将匿名函数注册为任务:
const { task } = require('gulp');

task('test', function(cb) {
  console.log("匿名函数")
  cb();
});
  • 检索先前已注册的任务:
const { task } = require('gulp');

task('test', function(cb) {
  cb();
});

const test = task('test');

gulp.watch()方法

gulp.watch() 方法用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。

语法如下所示:

gulp.watch(glob [ , opts] , tasks)
  • glob:为要监视的文件匹配模式,规则和用法与 gulp.src()方法中的glob相同。
  • opts:为一个可选的配置对象,通常不需要用到。
  • tasks:为文件变化后要执行的任务,为一个数组。

示例:

例如使用 gulp.watch 语句监听文件变化:

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

watch(['input/*.js', '!input/one.js'], function(cb) {
  cb();
});

相关文章

  • Gulp 简诉

    gulp API gulp.src(globs[, options])gulp.dest(path[, optio...

  • gulp讲解

    一、gulp的四个主要的API gulp.src、gulp.pipe、gulp.dest、gulp.watch 二...

  • 精通gulp的关键:文件路径匹配模式globs

    简单说来,gulp的api非常简单。只有4个,他们分别是gulp.src gulp.dest gulp.task ...

  • gulp学习

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

  • gulp学习(二)-api

    学习gulp的用法,首先得学习下gulp的几个常用的api task 源码: Gulp继承Orchestrator...

  • 优秀文章收集

    html css javascript 前端框架与插件 项目总结与日常记录 前端其他 gulp gulp API ...

  • gulp API

    1 gulp.src(globs[, options]) 作用:globs可能是一个字符串或者一个数组,它包含一个...

  • Gulp API

    本节我们来看一下 Gulp 中的 API 方法,如下所示: 方法描述src()创建用于从文件系统读取 Vinyl ...

  • Gulp API

    本节我们来看一下 Gulp 中的 API 方法,如下所示: 方法描述src()创建用于从文件系统读取 Vinyl ...

  • gulp.js 的使用

    什么是 gulp.js gulp.js - 基于流的自动化构建工具。gulp.js 的 API 简单,学习成本低;...

网友评论

      本文标题:Gulp API

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