gulp

安装

需要全局安装 cli

npm install --global gulp-cli

项目本身安装 gulp

npm install --save-dev gulp

在项目里用 gulp --version 看到两者版本

CLI version 2.0.1
Local version 4.0.0

入口文件(gulpfile)

在项目根目录创建 gulpfile.js 作为 gulp 入口文件。gulpfile.js 中除了可以写 gulp 本身 api,JavaScript 和 node 也可以正常书写。但如果用到其他 ts 或 es6 则需要编译一下。

api

先讲一下 gulpfile 的基本结构，文件需要暴露一些 task。其中 default 会直接调用。

var gulp = require('gulp');
function defaultTask(cb) {cb();
}
exports.default = defaultTask

假如暴露的是其他 task，则命令则需要用 gulp 加对应 task 名称启动。

var gulp = require('gulp');
function defaultTask(cb) {cb();
}
exports.copy = defaultTask

以上任务用 gulp copy 调用。用 gulp --tasks 可以查看所有 task;

src(globs, [options])

gulp 中文件处理的是 Vinyl 对象。src()是文件的入口，创建 Vinyl 对象。第二个参数 option 是配置对象。

dest(directory, [options])

创建一个用于将 Vinyl 对象写入到文件系统的流。

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

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

exports.copy = copy;

会先找到 input 文件夹下后缀名为 js 的所有文件，然后复制一份到 output 下。

watch(globs, [options], [task])

监听 globs 并在发生更改时运行任务。任务与任务系统的其余部分被统一处理。用 on 可以监听不同的事件

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

const watcher = watch(['input/*.js']);

watcher.on('change', function(path, stats) {console.log(`File ${path} was changed`);
});

watcher.on('add', function(path, stats) {console.log(`File ${path} was added`);
});

watcher.on('unlink', function(path, stats) {console.log(`File ${path} was removed`);
});

watcher.close();

globs

src()的第一个参数称为 globs。不同于正则他有自己的规则。
glob 是由普通字符和 / 或通配字符组成的字符串，用于匹配文件路径。可以利用一个或多个 glob 在文件系统中定位文件。
主要信息：

1. src 可以传入一个 glob,src("input.js")。也可以传多个，会按顺序执行。src(["input.js","input1.js"])。
2. 在 glob 中，分隔符永远是 / 字符。\\ 字符被保留作为转义符使用。
3. 避免使用 Node 的 path 类方法来创建 glob。
4. *在一个字符串片段中匹配任意数量的字符，包括零个匹配。对于匹配单级目录下的文件很有用。
5. **在多个字符串片段中匹配任意数量的字符，包括零个匹配。对于匹配嵌套目录下的文件很有用。
6. !取反。跟在目标 glob 后，一个取反对应一个 glob。表述在匹配的 glob 中排除什么。

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

创建任务

gulp 有分公开任务和私有任务。公开任务就是正常的使用方式。私有任务是在 gulpfile 内部通过 series() 或 parallel() 自己组合的任务。
series()让任务（task）按顺序执行。parallel()以最大并发来运行的任务。两者可以组合使用。

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

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

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

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

exports.build = series(clean, parallel(css, javascript));