提到前端工程的自動化構建，gulp是其中很重要的一個工具，gulp是一種基於stream的前端構建工具，相比於grunt使用臨時檔案的策略，會有較大的速度優勢。本文會對gulp的主要部分進行詳細剖析，期待本文能夠幫助讀者更好地在工程中實踐gulp。
gulp等前端構建指令碼並不是一種全新的思想，早在幾十年前，gnu make已經在各種流行語言中風靡，並解決了相關的各種問題，可以簡單的認為gulp是JavaScript語言的“make”。
Gulp 核心模組
gulp其中兩大核心模組，任務管理和檔案
本文通過對Orchestrator任務管理模組的原始碼進行分析，理清gulp是如何進行任務管理的。
通過檢視gulp原始碼（3.x及之前的版本），可以看到，gulp所有任務管理相關的功能都是直接從Orchestrator模組繼承的，而且可以發現gulp官網對相關任務管理介面的描述，和Orchestrator模組的描述幾乎完全一樣。
// gulp/index.js
...
var Orchestrator = require('orchestrator');
...
function Gulp() { // 建構函式直接呼叫Orchestrator
Orchestrator.call(this);
}
util.inherits(Gulp, Orchestrator); // 從Orchestrator繼承而來
Gulp.prototype.task = Gulp.prototype.add; // task方法直接使用Orchestrator中的add
...複製程式碼所以下面就一起來分析一下Orchestrator模組。
Orchestrator 模組
Orchestrator github主頁中對自身的描述
A module for sequencing and executing tasks and dependencies in maximum concurrency.
簡單翻譯就是
一個能夠以最大併發性對任務及其依賴任務進行排序執行的模組。
Orchestrator模組主要就是新增管理執行任務，並對任務的執行提供非同步支援，分別對應
add - 新增任務
add用於新增任務，傳入任務task的名字，依賴陣列，以及任務回撥函式。
orchestrator中使用核心屬性tasks物件儲存各個任務start - 執行任務
start用於執行之前定義的任務，如果傳入多個任務，start會進行合併，依次放入到任務陣列，然後對任務陣列序列按照依賴關係進行去重排序，最終對排序的任務陣列依次執行
下面是具有完整註釋的原始碼。
// Orchestrator/index.js
/*jshint node:true */
"use strict";
var util = require('util');
var events = require('events');
var EventEmitter = events.EventEmitter;
var runTask = require('./lib/runTask');
/*
建構函式裡面
首先呼叫node中事件模組的建構函式EventEmitter，
EventEmitter.call(this);
這是一種典型的用法，直接掛載Event模組例項屬性及方法。
接下來初始化了Orchestrator最核心的幾個屬性：
doneCallback 是所有任務執行完成後的回撥
seq 是排序後的任務佇列，對任務及其依賴的排序是通過seqencify模組進行的，後面會介紹。
tasks 儲存了所有定義的任務，通過add原型方法新增任務。
isRunning 標識當前是否有任務正在執行
*/
var Orchestrator = function () {
EventEmitter.call(this);
this.doneCallback = undefined; // call this when all tasks in the queue are done
this.seq = []; // the order to run the tasks
this.tasks = {}; // task objects: name, dep (list of names of dependencies), fn (the task to run)
this.isRunning = false; // is the orchestrator running tasks? .start() to start, .stop() to stop
};
/*
* 繼承Event模組
*/
util.inherits(Orchestrator, EventEmitter);
/*
* 重置Orchestrator模組，即重置orchestrator例項的相應狀態和屬性
*/
Orchestrator.prototype.reset = function () {
if (this.isRunning) {
this.stop(null);
}
this.tasks = {};
this.seq = [];
this.isRunning = false;
this.doneCallback = undefined;
return this;
};
/*
add前面主要是對引數進行了一些校驗檢測，最後將任務task的名字，依賴，回撥新增到核心屬性tasks中
*/
Orchestrator.prototype.add = function (name, dep, fn) {
if (!fn && typeof dep === 'function') {
fn = dep;
dep = undefined;
}
dep = dep || [];
fn = fn || function () {}; // no-op
if (!name) {
throw new Error('Task requires a name');
}
// validate name is a string, dep is an array of strings, and fn is a function
if (typeof name !== 'string') {
throw new Error('Task requires a name that is a string');
}
if (typeof fn !== 'function') {
throw new Error('Task '+name+' requires a function that is a function');
}
if (!Array.isArray(dep)) {
throw new Error('Task '+name+' can\'t support dependencies that is not an array of strings');
}
dep.forEach(function (item) {
if (typeof item !== 'string') {
throw new Error('Task '+name+' dependency '+item+' is not a string');
}
});
this.tasks[name] = {
fn: fn,
dep: dep,
name: name
};
return this;
};
/*
如果只給了task的名字，則直接獲取之前定義task，否則通過add新增新的task
*/
Orchestrator.prototype.task = function (name, dep, fn) {
if (dep || fn) {
// alias for add, return nothing rather than this
this.add(name, dep, fn);
} else {
return this.tasks[name];
}
};
/*
判斷是否已經定義了某個task
*/
Orchestrator.prototype.hasTask = function (name) {
return !!this.tasks[name];
};
/*
* 開始執行任務
* 首先會判斷傳入引數最後一個是否為函式，如果是，則作為所有任務
* 結束後的回撥，否則也會將其當做一個任務
*
* 依次迴圈收集最後一個引數之前的所有引數（如果最後一個引數不是
* 函式，也將其收集），放入任務陣列；
*
* 對任務陣列序列按照依賴關係進行去重排序
*
* 呼叫runStep依次執行排序後的任務陣列
*/
Orchestrator.prototype.start = function() {
var args, arg, names = [], lastTask, i, seq = [];
args = Array.prototype.slice.call(arguments, 0);
if (args.length) {
lastTask = args[args.length-1];
if (typeof lastTask === 'function') {
this.doneCallback = lastTask;
args.pop();
}
for (i = 0; i < args.length; i++) {
arg = args[i];
if (typeof arg === 'string') {
names.push(arg);
} else if (Array.isArray(arg)) {
names = names.concat(arg); // FRAGILE: ASSUME: it's an array of strings
} else {
throw new Error('pass strings or arrays of strings');
}
}
}
if (this.isRunning) {
// reset specified tasks (and dependencies) as not run
this._resetSpecificTasks(names);
} else {
// reset all tasks as not run
this._resetAllTasks();
}
if (this.isRunning) {
// if you call start() again while a previous run is still in play
// prepend the new tasks to the existing task queue
names = names.concat(this.seq);
}
if (names.length < 1) {
// run all tasks
for (i in this.tasks) {
if (this.tasks.hasOwnProperty(i)) {
names.push(this.tasks[i].name);
}
}
}
seq = [];
try {
this.sequence(this.tasks, names, seq, []);
} catch (err) {
// Is this a known error?
if (err) {
/* sequencify模組會根據以下兩種不同情況丟擲異常，
* 一種為任務未定義；另一種為任務序列出現迴圈依賴
*/
if (err.missingTask) {
this.emit('task_not_found', {message: err.message, task:err.missingTask, err: err});
}
if (err.recursiveTasks) {
this.emit('task_recursion', {message: err.message, recursiveTasks:err.recursiveTasks, err: err});
}
}
this.stop(err);
return this;
}
this.seq = seq;
this.emit('start', {message:'seq: '+this.seq.join(',')});
if (!this.isRunning) {
this.isRunning = true;
}
this._runStep();
return this;
};
/* 停止orchestrator例項，根據結束型別的不同，丟擲不同的訊息
* 如果定義了回撥，則執行回撥
*/
Orchestrator.prototype.stop = function (err, successfulFinish) {
this.isRunning = false;
if (err) {
this.emit('err', {message:'orchestration failed', err:err});
} else if (successfulFinish) {
this.emit('stop', {message:'orchestration succeeded'});
} else {
// ASSUME
err = 'orchestration aborted';
this.emit('err', {message:'orchestration aborted', err: err});
}
if (this.doneCallback) {
// Avoid calling it multiple times
this.doneCallback(err);
} else if (err && !this.listeners('err').length) {
// No one is listening for the error so speak louder
throw err;
}
};
/*
* 引入任務及其依賴任務的排序模組
*/
Orchestrator.prototype.sequence = require('sequencify');
/*
簡單的迴圈判斷是否所有的任務都已經執行完畢
*/
Orchestrator.prototype.allDone = function () {
var i, task, allDone = true; // nothing disputed it yet
for (i = 0; i < this.seq.length; i++) {
task = this.tasks[this.seq[i]];
if (!task.done) {
allDone = false;
break;
}
}
return allDone;
};
/*
* 重置task，重置相應的狀態和屬性
*/
Orchestrator.prototype._resetTask = function(task) {
if (task) {
if (task.done) {
task.done = false;
}
delete task.start;
delete task.stop;
delete task.duration;
delete task.hrDuration;
delete task.args;
}
};
/*
* 迴圈遍歷重置所有的task
*/
Orchestrator.prototype._resetAllTasks = function() {
var task;
for (task in this.tasks) {
if (this.tasks.hasOwnProperty(task)) {
this._resetTask(this.tasks[task]);
}
}
};
/*
* 迴圈遍歷重置task，並遞迴重置所依賴的task
*/
Orchestrator.prototype._resetSpecificTasks = function (names) {
var i, name, t;
if (names && names.length) {
for (i = 0; i < names.length; i++) {
name = names[i];
t = this.tasks[name];
if (t) {
this._resetTask(t);
if (t.dep && t.dep.length) {
this._resetSpecificTasks(t.dep); // recurse
}
//} else {
// FRAGILE: ignore that the task doesn't exist
}
}
}
};
/* 逐個執行任務，當所有任務都結束後，停止orchestrator例項 */
Orchestrator.prototype._runStep = function () {
var i, task;
if (!this.isRunning) {
return; // user aborted, ASSUME: stop called previously
}
for (i = 0; i < this.seq.length; i++) {
task = this.tasks[this.seq[i]];
if (!task.done && !task.running && this._readyToRunTask(task)) {
this._runTask(task);
}
if (!this.isRunning) {
return; // task failed or user aborted, ASSUME: stop called previously
}
}
if (this.allDone()) {
this.stop(null, true);
}
};
/* 判斷當前任務是否能執行，迴圈判斷其所有依賴任務是否執行結束，
* 只要有一個未定義或未結束，則不能執行
*/
Orchestrator.prototype._readyToRunTask = function (task) {
var ready = true, // no one disproved it yet
i, name, t;
if (task.dep.length) {
for (i = 0; i < task.dep.length; i++) {
name = task.dep[i];
t = this.tasks[name];
if (!t) {
// FRAGILE: this should never happen
this.stop("can't run "+task.name+" because it depends on "+name+" which doesn't exist");
ready = false;
break;
}
if (!t.done) {
ready = false;
break;
}
}
}
return ready;
};
/* 設定任務的執行時間，重置任務的執行和結束標記 */
Orchestrator.prototype._stopTask = function (task, meta) {
task.duration = meta.duration;
task.hrDuration = meta.hrDuration;
task.running = false;
task.done = true;
};
/* 停止任務後收集相關的引數（任務名字，執行時間，型別，是否正常結束等丟擲訊息 */
Orchestrator.prototype._emitTaskDone = function (task, message, err) {
if (!task.args) {
task.args = {task:task.name};
}
task.args.duration = task.duration;
task.args.hrDuration = task.hrDuration;
task.args.message = task.name+' '+message;
var evt = 'stop';
if (err) {
task.args.err = err;
evt = 'err';
}
// 'task_stop' or 'task_err'
this.emit('task_'+evt, task.args);
};
/*
* 開始執行任務，並新增任務屬性，args，running等
* 最終通過runTask完成任務回撥的執行並最終結束任務
* runTask接受任務的回撥，以及function(err, meta){...}回撥函式為引數
* gulp.task文件中聲稱對非同步任務的支援，正是在runTask中完成的
* runTask中首先會執行任務的回撥函式
*
* 第一種對非同步支援的方式可以通過向任務回撥函式傳入一個callback，
* 執行callback就會呼叫runTask傳入的第二個回撥函式引數，進而結束任務
*
* 其他方式，如果沒有傳入callback，runTask中會對任務回撥函式的執行
* 結果進行三種判斷，分別為promise，stream流，以及正常同步函式；
* 對於promise和stream流，同樣屬於非同步任務，promise會在其resolve/rejected
* 後，呼叫runTask的第二個回撥引數，結束任務；對於stream流，則會在
* 流結束時刻呼叫runTask的第二個回撥引數，結束任務；
*
* 對於正常同步函式，則直接呼叫runTask的第二個回撥引數，結束任務
*/
Orchestrator.prototype._runTask = function (task) {
var that = this;
task.args = {task:task.name, message:task.name+' started'};
this.emit('task_start', task.args);
task.running = true;
runTask(task.fn.bind(this), function (err, meta) {
that._stopTask.call(that, task, meta);
that._emitTaskDone.call(that, task, meta.runMethod, err);
if (err) {
return that.stop.call(that, err);
}
that._runStep.call(that);
});
};
// FRAGILE: ASSUME: this list is an exhaustive list of events emitted
var events = ['start','stop','err','task_start','task_stop','task_err','task_not_found','task_recursion'];
var listenToEvent = function (target, event, callback) {
target.on(event, function (e) {
e.src = event;
callback(e);
});
};
/* 監聽events中所有型別的函式 */
Orchestrator.prototype.onAll = function (callback) {
var i;
if (typeof callback !== 'function') {
throw new Error('No callback specified');
}
for (i = 0; i < events.length; i++) {
listenToEvent(this, events[i], callback);
}
};
module.exports = Orchestrator;複製程式碼sequencify
sequencify模組主要完成的工作就是針對一個給定的任務陣列序列，分析依賴關係，最終給出一個按照任務依賴順序排列的任務陣列序列，然後依次執行各個任務
// sequencify/index.js
/*jshint node:true */
"use strict";
/*
* 四個輸入引數
* tasks: 當前定義的所有任務
* names: 需要進行依賴分析的任務陣列序列
* results: 最終得到的按照任務依賴順序排列的任務陣列序列，
* 並且這個任務序列是去重的
* nest: 記錄當前任務所處的依賴層次路徑，比如taskA依賴taskB，
* taskB依賴taskC，則分析完taskA後，按照依賴關係，對
* taskB分析的時候，nest即為['taskA']，進一步，當分析
* taskC時，nest為['taskA', 'taskB']，藉此來進行判斷是
* 否有迴圈依賴。即，如果分析一個任務時，如果其自身在
* nest存在，即存在迴圈依賴，則中斷分析，丟擲異常。
*/
var sequence = function (tasks, names, results, nest) {
var i, name, node, e, j;
nest = nest || [];
for (i = 0; i < names.length; i++) {
name = names[i];
// de-dup results
/* 任務序列去重 */
if (results.indexOf(name) === -1) {
node = tasks[name];
if (!node) {
/* 任務不存在則丟擲異常 */
e = new Error('task "'+name+'" is not defined');
e.missingTask = name;
e.taskList = [];
for (j in tasks) {
if (tasks.hasOwnProperty(j)) {
e.taskList.push(tasks[j].name);
}
}
throw e;
}
if (nest.indexOf(name) > -1) {
/* 任務序列存在迴圈依賴，丟擲異常 */
nest.push(name);
e = new Error('Recursive dependencies detected: '+nest.join(' -> '));
e.recursiveTasks = nest;
e.taskList = [];
for (j in tasks) {
if (tasks.hasOwnProperty(j)) {
e.taskList.push(tasks[j].name);
}
}
throw e;
}
if (node.dep.length) {
nest.push(name);
sequence(tasks, node.dep, results, nest); // recurse
nest.pop(name);
}
results.push(name);
}
}
};
module.exports = sequence;複製程式碼對於gulp 4.x之後的版本，gulp更換了任務管理的模組為undertaker，後續文章中會對其進一步分析，並與orchestrator進行一定的對比。
接下來的系列文章會對gulp中的stream流管理進行分析。
By Hong