WIKI

使用

安装与初始化

1. 安装 gulp 命令行工具

npm install -g gulp-cli

2. 创建测试项目

# 创建项目文件夹
mkdir gulp-starter
# 进入文件夹
cd gulp-starter
# npm初始化项目，创建package.json
npm init
// 安装gulp作为开发依赖
npm install -D gulp

3. 查看是否安装成功

# gulp --version
gulp -v

4. 在根目录创建 gulpfile 文件

注: export 的函数才会被gulp执行

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

exports.default = defaultTask

5. 测试任务

在命令行运行 gulp 命令

创建任务（create task）

每个任务（task）都是一个异步函数， 任务分为 私有任务 和 公开任务（export出去的）

const series = require('gulp')

function task1(cb) {
  cb()
}

module.exports = task1

Gulp 提供了两种组合任务的方式：

1. series： 顺序执行任务
2. parallel：以最大并发数来并行执行任务

它们可以互相嵌套使用（不限深度）

series和 parallel任务组在执行的时候， 其中任何一个任务失败将导致整个任务组执行结束。但是 无法判断parall 哪个任务没有执行完（因为并行）

使用TypeScript

我们可以使用 TypeScript来配置Gulp, 需要进行以下配置

1. 创建 gulpfile.ts 或将原配置文件拓展名改为 ts
2. 安装 ts-node, @types/gulp 开发依赖(devDep)
3. 在 tsconfig.json 中配置 ts-node字段

{
  "extends": "../tsconfig.json",
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

任务返回值

Gulp 任务可以返回多种数据类型
如果一个认为不返回任何内容，则必须使用callback来表明任务已完成。

• 使用callback

function callbackTask(cb) {
  // `cb()` should be called by some async work
  cb();
}

exports.default = callbackTask;

• 返回Stream

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

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

exports.default = streamTask;

• 返回Promise

function promiseTask() {
  return Promise.resolve('the value is ignored');
}

exports.default = promiseTask;

• 返回 event emitter

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)

const { exec } = require('child_process');

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

exports.default = childProcessTask;

• 返回 observable

const { Observable } = require('rxjs');

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

exports.default = observableTask;

文件处理

Gulp 提供了 src 和 dest 方法来处理文件。

• src(glob parent)

接收 glob 表达式来读取文件并生成文件流Stream。
stream 提供了 pipe 方法以供我们逐步处理文件流

• dest

接收一个输出目录作为参数，将 src 读取的文件流转换为文件写入到指定目录。

模式

src可在三种模式下工作: buffering、streaming、empty

streaming 主要用于操作无法放入内存中的大文件。

例子

比如项目打包， 我们可以先将js文件通过babel 转换，然后与其他文件一同进行混淆最后输出。

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(uglify())
    .pipe(dest('output/'));
}

// 我们还可以分阶段输出文件, 比如更改上面任务方法为
exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(dest('output/')) // 将文件写到 output 文件夹下
    .pipe(uglify()) // 压缩混淆
    .pipe(rename({ extname:　'.min.js' })
    .pipe(dest('output/))
}

文件监控

Gulp 提供了 watch方法供我们监听文件并执行任务， 我们可以监听文件的以下状态

• add
• addDir
• change
• unlink
• unlinkDir
• ready
• error
• all: 监听除 ready和 error外的全部事件

watch 监听文件默认是通过维护任务队列来执行对应任务的，如果想要并发的执行任务则需要将 queue参数设置为 false

cosnt { watch } = require('gulp')

watch('src/*.js', { queue: false }, function(cb) {
  cb()
}) 

插件

Gulp社区提供了大量插件可供在管道（pipe）中使用，如果社区没有你需要的插件，那么你可以直接写一个插件进行发布或者使用内联插件（不发布）的方式在项目中使用。

常用API

方法	作用	备注
src(globs, [options])	从文件系统中读取匹配的文件，并创建一个流	具体options参考gulp中文网
dest(dir, [options])	将文件流写入到指定目录	options详细参数
series(...tasks)	组合任务并按顺序执行
parallel(...tasks)	组合任务并按最大并发数执行
watch(globs, [options], [task])	监听符合条件的文件并执行对应任务	如果没指定events，可以使用 .on来添加事件
lastRun(task, [precision]	获取任务最后执行时间

错误速查

• File not found with singular glob

globs 参数只能匹配一个文件(如 foo/bar.js)而且没有找到匹配

• Invalid glob argument

在 globs 中给出一个无效的 glob 时，抛出一个错误

• Invalid dest() folder argument. Please specify a non-empty string or a function.

目录为空字符串或者目录不是字符串或函数

参考链接

• Gulp入门指南
• GulpJS官网