|
|
流程
關(guān)于流程，是從項(xiàng)目啟動(dòng)到發(fā)布的過程。在前端通常我們都做些什么？
- 切圖，即從設(shè)計(jì)稿中獲取需要的素材，并不是所有前端開發(fā)都被要求切圖，也不是所有前端開發(fā)都會(huì)切圖，但請(qǐng)享受學(xué)習(xí)新知識(shí)的過程吧。
- 創(chuàng)建模版（html、jade、haml）、腳本（Javascript、coffeescript）、樣式（css、less、sass、stylus）文件，搭建基礎(chǔ)的項(xiàng)目骨架。
- 文件（jade、coffeescript、less、sass…）編譯
- 執(zhí)行測(cè)試用例
- 代碼檢測(cè)
- 移除調(diào)試代碼
- 靜態(tài)資源合并與優(yōu)化
- 靜態(tài)資源通過hash計(jì)算指紋化
- 部署測(cè)試環(huán)境
- 灰度發(fā)布現(xiàn)網(wǎng)
每個(gè)流程中的過程單元，我們抽象為一個(gè)Task，即任務(wù)。把可重復(fù)規(guī)則的過程進(jìn)行工具化，如把JavaScript代碼壓縮過程工具化，而UglifyJS是具體執(zhí)行任務(wù)的工具，CSS代碼壓縮器CleanCSS是具體執(zhí)行任務(wù)的工具。
工具文化幾乎是大平臺(tái)互聯(lián)網(wǎng)公司共有的特質(zhì)，我們無法確定是工具文化驅(qū)動(dòng)了Google、Facebook這類互聯(lián)網(wǎng)公司的快速發(fā)展，還是快速發(fā)展的需要使其在內(nèi)推廣工具文化，但可以明確的是工具文化必不可少。在Facebook第二位中國籍工程師王淮的書中也提到提到：
當(dāng)時(shí)招聘他進(jìn)Facebook的總監(jiān)黃易山，是對(duì)內(nèi)部工具的最有力倡導(dǎo)者：
他極度建議，公司要把最好的人才放到工具開發(fā)那一塊，因?yàn)楣ぞ咦龊昧耍梢赃_(dá)到事半功倍的效果，所有人的效率都可以得到提高，而不僅僅是工程師。 在騰訊，工具文化雖沒有被明確指出，但大平臺(tái)公司對(duì)工具化的堅(jiān)持是一致的：凡是被不斷重復(fù)的過程，將其工具化，綁定到自動(dòng)化流程之中。技術(shù)產(chǎn)品也需要Don’t make me think的方式來推廣最佳實(shí)踐。總而言之：依靠工具，而不是經(jīng)驗(yàn)。
任務(wù)工具化是自動(dòng)化流程的基礎(chǔ)，我想你已經(jīng)聽說過任務(wù)運(yùn)行器Grunt。Grunt幫助開發(fā)者把任務(wù)單元建立連接，如代碼編譯Task執(zhí)行完后執(zhí)行檢測(cè)Task，檢測(cè)Task執(zhí)行完后執(zhí)行壓縮Task。雖然Grunt是基于Node.js平臺(tái)，但其定位是個(gè)通用任務(wù)管理器，通用往往意味著更高的學(xué)習(xí)與實(shí)施成本。專注于Web開發(fā)領(lǐng)域騰訊有Mod.js來實(shí)施前端自動(dòng)化，通過Mod.js有效的簡化Web開發(fā)自動(dòng)化流程實(shí)施成本。
Mod.js并不是簡單的任務(wù)運(yùn)行器，其內(nèi)置集成了Web前端開發(fā)常用的工具集，覆蓋了80%的前端使用場景，而另外的20%則可通過Mod.js的插件機(jī)制來擴(kuò)展。
Mod.js:https://github.com/modjs/mod 可通過NPM來安裝最新的版本， 在你來到Node.js的編程世界時(shí)已同時(shí)附帶了NPM，當(dāng)前Mod.js最新版本0. 4.x要求Node.js要求>= 0.8.0：
$ npm install modjs -g
-g 參數(shù)表示把Mod.js安裝到全局，如此mod命令將會(huì)在system path內(nèi)，方便在任何一個(gè)目錄啟動(dòng)Mod.js任務(wù)。
Mod.js通過Modfile.js文件驅(qū)動(dòng)任務(wù)執(zhí)行，可以手動(dòng)創(chuàng)建一個(gè)Modfile.js文件，也可以通過模版初始化一個(gè)Modfile.js文件：
$ mod init modfile
Modfile.js是一個(gè)Plain Node Module, 通過 Runner 對(duì)象來描述任務(wù)的具體執(zhí)行過程：
// 暴露Runner對(duì)象module.exports = {}
如是異步配置，則可通過回調(diào)模式傳遞Runner對(duì)象：
module.exports = function(options, done){ setTimeout( function(){ // 回調(diào)Runner對(duì)象 var runner = {}; done(runner); }, 1000)}
it知識(shí)庫：停不下來的前端，自動(dòng)化流程，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
