本篇是了解基礎(chǔ)，照著官方文檔按部就班的敲了幾行代碼而已，，當(dāng)然學(xué)習(xí)了如何使用gulp的src、dest來生成dist，主要對gulp又一個(gè)基本的接觸，下一篇才是重點(diǎn)哦。。。

• 任務(wù)（tasks）可以是 public（公開） 或 private（私有） 類型的。
  （1）公開任務(wù)（Public tasks） 從 gulpfile 中被導(dǎo)出（export），可以通過 gulp 命令直接調(diào)用。
  （2）私有任務(wù)（Private tasks） 被設(shè)計(jì)為在內(nèi)部使用，通常作為 series() 或 parallel() 組合的組成部分。

一、導(dǎo)出任務(wù)，明白gulp的運(yùn)行機(jī)制

（1）創(chuàng)建gulpfile.js文件：

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

function cbA(cb) {
    console.log('iiii')
    cb();
}
function cbB(cb) {
    console.log('3333')
    cb();
}
exports.build = parallel(cbA, cbB);
exports.default = series(cbA, cbB);

（2）終端運(yùn)行gulp:

運(yùn)行結(jié)果

查看任務(wù)

二、異步執(zhí)行類型

• 返回stream

（1）src以及dest的用法：

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

function streamTask() {
    return src('*.json') // 匹配到以.json后綴結(jié)尾的文件
    .pipe(dest('333')) // pipe（傳送）到333這個(gè)文件夾下（相當(dāng)于復(fù)制）
    .pipe(dest('oooo'));
}
exports.default = streamTask;

（2）運(yùn)行gulp后，結(jié)果如下：

pipe的結(jié)果

• 返回promise

惡補(bǔ)了一下promise機(jī)制。。。

• 返回event emitter

const { EventEmitter } = require('events');

function EventEmitterTask() {
    const emitter = new EventEmitter();
    console.log('888', emitter.emit);
    setTimeout(() => emitter.emit('finish'), 250);
    return emitter;
}
exports.default = EventEmitterTask;

運(yùn)行及console打印如下：

• 返回 child process

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

function childProcessTask() {
    console.log('888', exec);
    return exec('date');
}
exports.default = childProcessTask;

運(yùn)行及console打印如下：

• 返回observable -------？？？？？

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

function observableTask() {
    console.log('888', Observable);
    return Observable.of(1, 2, 3);
}
exports.default = observableTask;

安裝rxjs后，運(yùn)行有問題（原因是對rxjs的Observable不了解，后面需要進(jìn)行學(xué)習(xí)rxjs的相關(guān)知識）：

Observable方法調(diào)用有問題

• 使用callback

如果任務(wù)（task）不返回任何內(nèi)容，則必須使用callback來指示任務(wù)已完成。如下：

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

exports.default = callbackTask;

如需通過callback把任務(wù)（task）中的錯(cuò)誤告知gulp，請將Error作為callback的唯一參數(shù)。

function callbackError(cb) {
  // `cb()` should be called by some async work
  cb(new Error('kaboom'));
}

exports.default = callbackError;

運(yùn)行結(jié)果報(bào)錯(cuò)，應(yīng)該是正常的拋錯(cuò)：

拋錯(cuò)

檢測cb打印會不會出錯(cuò)：

function callbackError(cb) {
    // `cb()` should be called by some async work
    cb(console.log('ppp'));
  }
  
  exports.default = callbackError;
  

正常打印，說明代碼沒問題

通常，是將此callback函數(shù)傳遞給另一個(gè)API，而不是自己調(diào)用執(zhí)行它。

const fs = require('fs');

function callbackTask(cb) {
    console.log('fs', fs);
    fs.access('gulpfile.js', cb); // 判斷 文件和目錄是否存在
}
exports.default = callbackTask;

fs.acess

• 使用async/await

如果不使用前面提供的幾種方式，還可以將任務(wù)（task）定義為一個(gè)async函數(shù)，它將利用promise對此任務(wù)進(jìn)行包裝。允許使用await處理promise，并使用其他同步代碼。

const fs = require('fs');

async function asyncAwaitTask() {
  const { version } = fs.readFileSync('package.json', 'utf-8');
  console.log(fs.readFileSync('package.json', 'utf-8'));
  console.log('ppp', version);
  await Promise.resolve('some result');
}

exports.default = asyncAwaitTask;

運(yùn)行結(jié)果如下：可能是由于同步的問題，打印出來的version為undefined。

運(yùn)行g(shù)ulp