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