閱讀gulp源碼小結

Rocture 發布于2019-08-21 14:05 / 3204人閱讀

摘要：源碼簡介源碼核心部分寥寥行。同時本身是直接繼承于模塊。寫在末尾閱讀代碼的這一次，是我第一次閱讀這種開源的模塊化項目。深深的被震撼到了，認識到了模塊化的巨大力量。就能完成非常復雜的事情，而不需要凡是親力親為，一行行代碼，一個個小問題依次解決。

gulp源碼簡介

gulp源碼核心部分寥寥60+行。但是通過這60+行代碼，gulp給我們帶來的確是前端自動化構建的便利。以往以為其源碼肯定蠻復雜，
卻沒想到卻是這么60+行，這60+行的背后，是來自于模塊化的支撐。

gulp的四個接口分別來源于orchestrator,vinyl-fs兩個模塊。
所以gulp的所有特性都來自于這兩個模塊。
Orchestrator是用來任務管理，以及發布一些事件，vinyl-fs 則提供代表gulp靈魂的流式文件系統。
研究清楚了這兩個模塊，也就了解了gulp。

gulp.task = Gulp.prototype.task = Gulp.prototype.add;

Gulp.prototype.src = vfs.src;

Gulp.prototype.dest = vfs.dest;

Gulp.prototype.watch = function(glob, opt, fn) { ... return vfs.watch(glob, opt, fn);};

同時gulp本身是直接繼承于Orchestrator模塊。

function Gulp() {
  Orchestrator.call(this);  // gulp直接繼承于Orchestrator模塊
}

orchestrator模塊介紹

A module for sequencing and executing tasks and dependencies in maximum concurrency

譯：以最大并發能力順序執行任務與其依賴的一個功能模塊

var Orchestrator = function () {
    EventEmitter.call(this); //繼承了EventEmitter對象
    this.doneCallback = undefined; // 當task里所有的任務完成時調用這個函數
    this.seq = []; // task以及task里依賴的執行順序，（start里會有多個task，每個task又有可能有多個依賴，每個依賴又可能有多個依賴，所以需要保存其執行順序）
    this.tasks = {}; // 任務對象，包括任務名，依賴，回調函數
    this.isRunning = false; // 表示當前是否在執行任務
};

Orchestrator利用seq這個隊列數組存儲需要執行的task，這樣如果計算機有能力執行，它就從隊列里取走一個，如果還有能力就再取走一個，
所以這其實是in maximum concurrency即以最大的并發能力來執行。

關于seq的構造，則是引入sequencify模塊遞歸計算其依賴并壓入隊列。

同時通過繼承EventEmitter對象，Orchestrator發布了一些列可訂閱的事件，用于插件以及命令行里的gulp在事件發生時輸出相應的信息。

`var events = ["start","stop","err","task_start","task_stop",
"task_err","task_not_found","task_recursion"];`

系統暴露了這些事件以供插件調用，并且提供了2個方法

listenToEvent是監聽某一個事件

onAll是不管events里的那個就監聽

vinyl-fs模塊介紹

主要依賴于vinyl與glob-watcher。后者提供監視文件變化的watch接口，
前者則在file的基礎上封裝一些屬性與方法，構造出獨特的vinyl文件對象。
Gulp使用的是Stream，但卻不是普通的Node Stream，而是基于vinyl對象的vinyl File Object Stream。

構造函數如下

function File(file) {
  if (!file) file = {};
  // 保存該文件的路徑變化記錄
  var history = file.path ? [file.path] : file.history;
  this.history = history || [];

  this.cwd = file.cwd || process.cwd(); // 當前文件所在目錄,即current work directory
  this.base = file.base || this.cwd; // 用于相對路徑，代表根目錄

  this.stat = file.stat || null; // 使用 fs.Stats得到的結果
  this.contents = file.contents || null; // 文件內容
  this._isVinyl = true; // 文件對象是否是vinyl對象，vinyl對象即對file對象封裝后的結果
}

Gulp為什么不使用普通的Node Stream呢？

普通的Node Stream只傳輸String或Buffer類型，也就是只關注內容。但Gulp不只用到了文件的內容，而且還用到了這個文件的相關信息（比如路徑）。

因此，Gulp的Stream是Object風格的，也就是Vinyl File Object了。所以需要有有contents、path這樣的多個屬性了。

寫在末尾

閱讀gulp代碼的這一次，是我第一次閱讀這種開源的模塊化項目。深深的被震撼到了，認識到了模塊化的巨大力量。正如7層計算級機網絡模型。
將層級抽象出來，每一層只需要關注自己那一層的事情，直接調用下一層提供的API。就能完成非常復雜的事情，而不需要凡是親力親為，一行行
代碼，一個個小問題依次解決。能夠解放雙手做更多的事情。

參考文檔

探究Gulp的Stream

從零單排之gulp實戰

開源Nodejs項目推薦gulp核心模塊：Orchestrator

WilsonLiu"s blog首發地址：http://blog.wilsonliu.cn

云服務器 GPU云服務器源碼閱讀 webrtc源碼閱讀 hbase源碼閱讀如何閱讀java源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87788.html

iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0
gulp小結

摘要：前兩者定位是工具，則是種模塊化解決方案。這四個都是模塊化的方案。類型默認值如果該項被設置為，那么將會以方式返回而不是文件的形式。整個工程壓縮完需要分鐘以上，使用緩存后只需要秒鐘。 gulp是什么？一個自動化構建工具，基于nodejs的自動任務運行器。為什么要使用它？易于使用，易于學習。它能自動化地完成javascript/coffee/sass/less/html/image/c...

Binguner 2019-08-23 18:13 評論0 收藏0
聊一聊前端自動化測試

摘要：在真正寫了一段時間的基礎組件和基礎工具后，才發現自動化測試有很多好處。有了自動化測試，開發者會更加信任自己的代碼。由于維護測試用例也是一大筆開銷畢竟沒有多少測試會專門幫前端寫業務測試用例，而前端使用的流程自動化工具更是沒有測試參與了。本文轉載自天貓前端博客，更多精彩文章請進入天貓前端博客查看前言為何要測試以前不喜歡寫測試，主要是覺得編寫和維護測試用例非常的浪費時間。在真正寫了...

wthee 2019-08-21 10:50 評論0 收藏0
前端構建工具整理

摘要：常見前端構建工具的分類和對比是附帶的包管理器，是內置的一個功能，允許在文件里面使用字段定義任務在這里，一個屬性對應一段腳本，原理是通過調用去運行腳本命令。前文端技術范圍不斷發展，前端開發不僅限于直接編寫html，css和javascript，Web應用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（Es6 TypeSc...

leo108 2019-08-23 10:53 評論0 收藏0
React類、ES7屬性初始化（第二部分）

摘要：組建屬性初始化默認值類型在中將下面的代碼替換成下面的代碼最后一步將初始狀態從構造函數中轉變成屬性初始化。在構造函數的后天添加正確的代碼你需要把狀態初始化代碼從構造函數中刪除。這是React和ECMAScript6結合使用系列文章的第二篇。下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類，方法綁定...

VioletJack 2019-08-20 17:59 評論0 收藏0