成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

閱讀gulp源碼小結(jié)

Rocture / 3213人閱讀

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

gulp源碼簡介

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

gulp的四個接口分別來源于orchestrator,vinyl-fs兩個模塊。
所以gulp的所有特性都來自于這兩個模塊。
Orchestrator是用來任務(wù)管理，以及發(fā)布一些事件，vinyl-fs 則提供代表gulp靈魂的流式文件系統(tǒng)。
研究清楚了這兩個模塊，也就了解了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

譯：以最大并發(fā)能力順序執(zhí)行任務(wù)與其依賴的一個功能模塊

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

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

關(guān)于seq的構(gòu)造，則是引入sequencify模塊遞歸計算其依賴并壓入隊列。

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

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

系統(tǒng)暴露了這些事件以供插件調(diào)用，并且提供了2個方法

listenToEvent是監(jiān)聽某一個事件

onAll是不管events里的那個就監(jiān)聽

vinyl-fs模塊介紹

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

構(gòu)造函數(shù)如下

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

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

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

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

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

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

寫在末尾

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

參考文檔

探究Gulp的Stream

從零單排之gulp實(shí)戰(zhàn)

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

WilsonLiu"s blog首發(fā)地址：http://blog.wilsonliu.cn

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87788.html

相關(guān)文章

  • iconfont實(shí)踐小結(jié)

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

    bitkylin 評論0 收藏0

  • gulp小結(jié)

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

    Binguner 評論0 收藏0

  • 聊一聊前端自動化測試

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

    wthee 評論0 收藏0

  • 前端構(gòu)建工具整理

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

    leo108 評論0 收藏0

  • React類、ES7屬性初始化（第二部分）

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

    VioletJack 評論0 收藏0

發(fā)表評論

0條評論

Rocture

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<