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