gulp快速上手

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