gulp學習

前提安裝node環境
使用npm安裝gulp命令行工具
安裝之前，如果已經安裝了，爲了學習，可以卸載

npm rm --global gulp

執行如下命令進行安裝

npm install --global gulp-cli

創建一個項目，來練習使用gulp

npm init

安裝gulp，作爲項目開發時的依賴

npm install --save-dev gulp

創建gulpfile.js 文件
文件內容如下：

function defaultTask(){
    console.log("hello huangbaokang")
}

exports.default = defaultTask

執行gulp命令，如下：

以上就算gulp入門了，學好這個工具，重在掌握各個api接口，然後結合各大工具調試，如代碼壓縮，代碼修改監控，掌握其自動化構建的原理。

Gulpfile 詳解

gulpfile 是項目目錄下名爲 gulpfile.js （或者首字母大寫 Gulpfile.js，就像 Makefile 一樣命名）的文件，在運行 gulp 命令時會被自動加載。在這個文件中，你經常會看到類似 src()、dest()、series() 或 parallel() 函數之類的 gulp API，除此之外，純 JavaScript 代碼或 Node 模塊也會被使用。任何導出（export）的函數都將註冊到 gulp 的任務（task）系統中。

Gulpfile 轉譯

你可以使用需要轉譯的編程語言來書寫 gulpfile 文件，例如 TypeScript 或 Babel，通過修改 gulpfile.js 文件的擴展名來表明所用的編程語言並安裝對應的轉譯模塊。

對於 TypeScript，重命名爲 gulpfile.ts 並安裝 ts-node 模塊。
對於 Babel，重命名爲 gulpfile.babel.js 並安裝 @babel/register 模塊。
針對此功能的高級知識和已支持的擴展名的完整列表，請參考 gulpfile 轉譯 文檔。

創建任務
每個 gulp 任務（task）都是一個異步的 JavaScript 函數，此函數是一個可以接收 callback 作爲參數的函數，或者是一個返回 stream、promise、event emitter、child process 或 observable類型值的函數

任務分公開任務和私有任務，公開任務可以通過gulp命令直接調用，私有任務不能直接調用，可以從gulpfile中導出即可。

const {series} = require('gulp')
function defaultTask(){
    console.log("hello huangbaokang")
}

function privateTask(cb){
    console.log("private task")
    cb()
}

function publicTask(cb){
    console.log("public  task")
    cb()
}

exports.publicTask = publicTask;
exports.default = series(privateTask,publicTask)

執行結果可以看出，publicTask可以直接調用（因爲exports了），而privateTask沒有被exports，所以不能直接調用，但是可以用於內部組合中

以上series是組合中的一種，這種按順序執行，如果希望以最大併發來運行任務，可以使用parallel()

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

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

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

exports.build = parallel(javascript, css);

異步執行

任務完成通知
當從任務（task）中返回 stream、promise、event emitter、child process 或 observable 時，成功或錯誤值將通知 gulp 是否繼續執行或結束。如果任務（task）出錯，gulp 將立即結束執行並顯示該錯誤。

當使用 series() 組合多個任務（task）時，任何一個任務（task）的錯誤將導致整個任務組合結束，並且不會進一步執行其他任務。當使用 parallel() 組合多個任務（task）時，一個任務的錯誤將結束整個任務組合的結束，但是其他並行的任務（task）可能會執行完，也可能沒有執行完。

返回stream

const { src,dest } = require("gulp")

function streamTask(){
    // 把當前目錄下的所有js文件寫入到output目錄，沒有這個目錄，將自動創建
    return src("*.js").pipe(dest('output'));
}

exports.default = streamTask;

返回promise

function promiseTask(){
    return Promise.resolve("hello huangbaokang");
}

exports.default = promiseTask;

返回event emitter

const {EventEmitter} = require("events")
function eventEmitterTask(){
    const emitter = new EventEmitter();
    setTimeout(()=> emitter.emit("finish"),2500);
    return emitter;
}

exports.default = eventEmitterTask;

返回子進程（child process）

const {exec} = require('child_process')

function childProcessTask(){
    return exec('date');
}

exports.default = childProcessTask;

返回callback
如果任務（task）不返回任何內容，則必須使用 callback 來指示任務已完成。

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

exports.default = callbackTask;

如需通過 callback 把任務（task）中的錯誤告知 gulp，請將 Error 作爲 callback 的唯一參數。

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

exports.default = callbackError;