Gulp自动化工具学习

Gulp自动化工具学习

任务

Gulp 可以被理解成自动化执行工具,可以执行各种各样的任务,任务是 Gulp 的最小单位,每个 gulp 任务(task)都是一个异步的 JavaScript 函数,此函数是一个可以接收 callback 作为参数的函数,或者是一个返回 stream、promise、event emitter、child process 或 observable 类型值的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const { series } = require('gulp');

// `clean` 函数并未被导出(export),因此被认为是私有任务(private task)。
// 它仍然可以被用在 `series()` 组合中。
function clean(cb) {
// body omitted
cb();
}

// `build` 函数被导出(export)了,因此它是一个公开任务(public task),并且可以被 `gulp` 命令直接调用。
// 它也仍然可以被用在 `series()` 组合中。
function build(cb) {
// body omitted
cb();
}

exports.build = build;
exports.default = series(clean, build);

私有任务和公开任务的区别在于是否导出,因为 Gulp 运行的时候就是通过导出模块运行的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// This is INCORRECT
const { series, parallel } = require('gulp');

const clean = function(cb) {
// body omitted
cb();
};

const css = series(clean, function(cb) {
// body omitted
cb();
});

const javascript = series(clean, function(cb) {
// body omitted
cb();
});

exports.build = parallel(css, javascript);

不要这么写,因为这样写导出的就是一个对象,如果有多次调用的情况出现,就会出现对象重复调用的情况,和 Vue 中的 Data 是一个函数是一个道理。如果是函数的话多次调用是不同的。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const { series } = require('gulp');

function transpile(cb) {
// body omitted
cb();
}

function bundle(cb) {
// body omitted
cb();
}

exports.build = series(transpile, bundle);

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const { parallel } = require('gulp');

function javascript(cb) {
// body omitted
cb();
}

function css(cb) {
// body omitted
cb();
}

exports.build = parallel(javascript, css);

异步执行

上面说了每个任务都是一个异步函数,将任务组合导出自动运行,如果任务不是一个 callback 回调函数,那么它一定要返回 stream、promise、event emitter、child process 或 observable 这些类型都是不同的情况下回出现的类型,stream (流,一般就是文件一类,对应于 Node.js 的管道操作,返回 Promise 就是普通的异步对象的 resolve 状态,事件、子线程、Observable 对象。

Observable 可观测对象有点类似于 Vue 的订阅-发布模式,Observable 对象可以被订阅,

如果任务(task)不返回任何内容,则必须使用 callback 来指示任务已完成。

文件处理

gulp 暴露了 src()dest() 方法用于处理计算机上存放的文件。

src() 接受 glob 参数,并从文件系统中读取文件然后生成一个 Node 流(stream)。它将所有匹配的文件读取到内存中并通过流(stream)进行处理。

src() 产生的流(stream)应当从任务(task)中返回并发出异步完成的信号,就如 创建任务(task) 文档中所述。

基本就是 Node 流的操作。

Glob

glob 是由普通字符和/或通配字符组成的字符串,用于匹配文件路径。也就是另外一种简单点的正则。

使用插件

可以在 https://gulpjs.com/plugins/ 搜索想要的插件,有好用的就可以用,没有就自己写一个呗,插件这种东西有就有,没有就自己写一个。

感觉这里的内联插件和条件插件没啥区别。

文件监控

gulp api 中的 watch() 方法利用文件系统的监控程序(file system watcher)将 globs任务(task) 进行关联。它对匹配 glob 的文件进行监控,如果有文件被修改了就执行关联的任务(task)。如果被执行的任务(task)没有触发 异步完成 信号,它将永远不会再次运行了。

默认情况下,只要创建、更改或删除文件,文件监控程序就会执行关联的任务(task)。 如果你需要使用不同的事件,你可以在调用 watch() 方法时通过 events 参数进行指定。可用的事件有 'add''addDir''change''unlink''unlinkDir''ready''error'。此外,还有一个 'all' 事件,它表示除 'ready''error' 之外的所有事件。

感觉很实用。比如修改文件后进行备份、创建分支什么的。