gulp 笔记

發表於 更新於 分類於 Disqus： 文章字數： 922 所需閱讀時間 ≈ 3 分鐘

文档学习

有中文看中文 :-)

入门

先看 node等版本

node --version
v11.8.0
npm --version
6.12.0
npx --version
10.2.0

安装

npm install --global gulp-cli

npx mkdirp my-project && cd my-project

npm init && npm install --save-dev gulp

检查版本

gulp --version
CLI version: 2.2.0
Local version: 4.0.2

创建配置 touch gulpfile.js

写入

1
2
3
4
function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

执行 gulp完成

任务

查看任务gulp --tasks

多个任务可以通过series() 和 parallel()来合并, 其中series是按顺序串行,parallel是并行,

例子

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);

可以任意深度嵌套!

异步执行

可以返回 stream、promise、event emitter、child process 或 observable ，否则使用callback

stream

1
2
3
4
5
6
7
8
const { src, dest } = require('gulp');

function streamTask() {
  return src('*.js')
    .pipe(dest('output'));
}

exports.default = streamTask;

promise

1
2
3
4
5
function promiseTask() {
  return Promise.resolve('the value is ignored');
}

exports.default = promiseTask;

event emitter

1
2
3
4
5
6
7
8
9
10
const { EventEmitter } = require('events');

function eventEmitterTask() {
  const emitter = new EventEmitter();
  // Emit has to happen async otherwise gulp isn't listening yet
  setTimeout(() => emitter.emit('finish'), 250);
  return emitter;
}

exports.default = eventEmitterTask;

child process

1
2
3
4
5
6
7
const { exec } = require('child_process');

function childProcessTask() {
  return exec('date');
}

exports.default = childProcessTask;

observable

1
2
3
4
5
6
7
const { Observable } = require('rxjs');

function observableTask() {
  return Observable.of(1, 2, 3);
}

exports.default = observableTask;

callback

1
2
3
4
5
6
function callbackError(cb) {
  // `cb()` should be called by some async work
  cb(new Error('kaboom'));
}

exports.default = callbackError;

gulp 不再支持同步任务（Synchronous tasks）了。因为同步任务常常会导致难以调试的细微错误，例如忘记从任务（task）中返回 stream。

流Stream

常见流使用:src,dest,pipe()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(dest('output/'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

Glob 详解

glob 是由普通字符和/或通配字符组成的字符串，用于匹配文件路径。可以利用一个或多个 glob 在文件系统中定位文件。

至少一个匹配项目

分隔符永远是/不分系统

\\用于转译，如 \\*表示普通的星号 不是通配符

避免使用path, __dirname,__filename来创建glob

单个星号 不能匹配层级文件夹

两个星号 能匹配任意层级文件夹

取反!

['script/**/*.js', '!scripts/vendor/', 'scripts/vendor/react.js']

['**/*.js', '!node_modules/']

注意书写 会影响执行速度

插件 plugins

https://gulpjs.com/plugins/

实质是流转换器 插件应当总是用来转换文件的。其他操作都应该使用（非插件的） Node 模块或库来实现。

条件插件 gulp-if

文件监控 watch

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

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

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

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

// 可以只关联一个任务
watch('src/*.css', css);
// 或者关联一个任务组合
watch('src/*.js', series(clean, javascript));

指定监控的事件’add’、’addDir’、’change’、’unlink’、’unlinkDir’、’ready’、’error’。此外，还有一个 ‘all’ 事件，它表示除 ‘ready’ 和 ‘error’ 之外的所有事件。

1
2
3
4
5
6
7
const { watch } = require('gulp');

// 所有事件都将被监控
watch('src/*.js', { events: 'all' }, function(cb) {
  // body omitted
  cb();
});

如需在第一次文件修改之前执行，也就是调用 watch() 之后立即执行，请将 ignoreInitial 参数设置为 false。

watch(...,{ignoreInitial:false},...)

延迟 { delay: 500 }

API

Vinyl

Vinyl 对象 (the virtual file objects)

文件元数据作为 Node 的 fs.Stats 实例提供。它是 Vinyl 实例的 stat 属性，并在内部用于确定 Vinyl 对象是否表示目录或符号链接（symbolic link）。当写入文件系统时，权限和时间值将从 Vinyl 对象的 stat 属性同步。

src()

dest()

symlink()

lastRun()

series()

parallel()

watch()

task()

registry()

tree()

Vinyl

Vinyl.isVinyl()

Vinyl.isCustomProp()

参考

https://www.gulpjs.com.cn/docs/getting-started/quick-start/