作者：戴嘉華

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接和作者信息

---

1. 前端自動(dòng)化工作流簡(jiǎn)介

每種項(xiàng)目都有自己特定的開發(fā)流程、工作流程。從需求分析、設(shè)計(jì)、編碼、測(cè)試、發(fā)布，一個(gè)整個(gè)開發(fā)流程中，會(huì)根據(jù)不同的情況形成自己獨(dú)特的步驟和流程。一個(gè)工作流的過程不是一開始就固定的，而是隨著項(xiàng)目的深入而不斷地改進(jìn)，期間甚至?xí)纬梢恍┕ぞ摺＠绠?dāng)年大神們?cè)贚inux寫C語言，覺得每次編譯好多文件好麻煩，就發(fā)明了makefile。不同代碼的管理好麻煩，然后就發(fā)明了git、SVN等等。

一個(gè)工作流程的好壞會(huì)影響你開發(fā)的效率、開發(fā)的流程程度，然后間接影響心情，打擊編碼積極性。所以我認(rèn)為開發(fā)一個(gè)項(xiàng)目的時(shí)候，編碼前把工作流程梳理清楚確定下來是一個(gè)非常重要的步驟。并且這個(gè)流程要在真實(shí)環(huán)境中不停的改進(jìn)。

對(duì)于要負(fù)責(zé)頁面結(jié)構(gòu)和內(nèi)容、外觀、邏輯的前端來說，一個(gè)好的工作流至關(guān)重要。而且這里中沒有銀彈。要根據(jù)具體項(xiàng)目所使用的框架、應(yīng)用場(chǎng)景來進(jìn)行調(diào)整獨(dú)特的工作流。

我會(huì)介紹一個(gè)我經(jīng)常使用的前端工作流，這個(gè)工作流只是一個(gè)原始的流程，一般來說，我會(huì)根據(jù)不同項(xiàng)目的不同來在這個(gè)基礎(chǔ)上進(jìn)行調(diào)整，形成每個(gè)項(xiàng)目獨(dú)特的流程。所以這里的重點(diǎn)是領(lǐng)會(huì)構(gòu)建工作流的思路，然后學(xué)會(huì)舉一反三。

一個(gè)前端自動(dòng)化開發(fā)流程中，我覺得至少需要做到以下幾點(diǎn)：

良好的模塊化

自動(dòng)化編譯

自動(dòng)化測(cè)試

實(shí)時(shí)刷新頁面

自動(dòng)化打包、壓縮發(fā)布

能用機(jī)器的地方就不要自己動(dòng)手，除了上述必備的幾點(diǎn)，有時(shí)候要根據(jù)特定的情況編寫一些Python、Nodejs、Shell腳本來避免重復(fù)的操作。好好呵護(hù)你的F5和稀疏的腦神經(jīng)，男人要對(duì)自己好一點(diǎn)。

2. 儲(chǔ)備知識(shí)

在正式介紹之前會(huì)先做一些儲(chǔ)備知識(shí)的介紹，也會(huì)略過一些你可能不懂的知識(shí)。懂的話可以跳過，遇到不懂的可以自己Google，不要百度。

2.1 工程目錄

我的工程目錄一般是這個(gè)樣的：

├─assets/ │ └─images/ ├─bin/ ├─dist/ ├─lib/ ├─src/ │ ├─coffee/ │ │ └─main.coffee │ └─less/ │ └─main.less ├─test/ │ └─specs/ ├─node_modules/ ├─index.html ├─Gruntfile.coffee ├─package.json ├─.gitignore └─README.md

所有子目錄名稱很多都其實(shí)源于古老的C語言工程。

assets：一般存放的是圖片、音頻、視頻、字體等代碼無關(guān)的靜態(tài)資源，我一般只有圖片，有時(shí)候也會(huì)新建一個(gè)fonts文件夾什么的。

bin：binary的縮寫，這個(gè)名字來歷于我們古老的C語言工程，因?yàn)橐话鉉語言要編譯成可執(zhí)行的二進(jìn)制文件什么的，后來基本成為了一種默認(rèn)的標(biāo)注。所以前端編譯好的文件也會(huì)存放在bin/目錄下。

dist：distribution的縮寫，編譯好的bin中的文件并不會(huì)直接用于發(fā)布，而是會(huì)經(jīng)過一系列的優(yōu)化操作，例如打包壓縮等。最終能夠部署到發(fā)布環(huán)境的文件都會(huì)存放在dist里面，所以dist里面是能夠直接用到生產(chǎn)環(huán)境的代碼。

lib：library的縮寫，存放的是第三方庫文件。例如你喜歡的jquery、fastclick什么的。但是接下來你會(huì)看到，在我們的模塊化方式中，這個(gè)文件夾一般是比較雞肋的存在。

src：source的縮寫，所有需要開發(fā)的源代碼的存放地，我們一般操作地最多的就是這個(gè)文件夾。簡(jiǎn)單地分為coffee、less兩個(gè)文件夾，存的是邏輯代碼和樣式（我一般用CoffeeScript和LessCss，當(dāng)然你也可以改成你喜歡的語言，JS，TS，LS，SASS，思路是一樣的）。你看到兩個(gè)文件夾下分別有main.coffe、main.less，這其實(shí)是邏輯代碼和樣式代碼的主要入口文件，會(huì)把其他模塊和樣式引進(jìn)來，通過某種機(jī)制合成一個(gè)文件。接下來會(huì)詳細(xì)解釋。

另外，這個(gè)目錄的組織方式會(huì)根據(jù)實(shí)際情況多變。有時(shí)候你會(huì)需要html模板，可能會(huì)多一個(gè)tpl/目錄。也許你的目錄不是這種基于文件類型的層次組織，而是基于頁面部件的組織，就可能出現(xiàn)components/目錄，然后下面有很多個(gè)頁面部件的目錄，每個(gè)子目錄有自己的coffee、less、html。（這種形式也變得逐漸流行。因?yàn)榛谖募愋湍夸?#xff0c;當(dāng)工程復(fù)雜起來的時(shí)候，就會(huì)變得異常難以維護(hù)，基于部件就會(huì)相當(dāng)方便）。

test：使用測(cè)試驅(qū)動(dòng)（TDD）開發(fā)進(jìn)行編程，這里存放的都是測(cè)試樣例。

index.html：頁面文件

接下來幾個(gè)文件都不解釋，不了解的可以先預(yù)習(xí)NodeJS、Git、Grunt這幾個(gè)東西。

2.2 模塊化

說起前端模塊化又是一個(gè)可以長(zhǎng)篇大論話題。前端模塊化的方式有很多種，年輕人最喜歡用的就是RequireJS、SeaJS什么的，看到這些模塊化工具的時(shí)候感覺就像自己的第一雙滑板鞋那樣那么興奮。其實(shí)這種AMD、CMD都需要引進(jìn)一個(gè)庫文件來做模塊化工具，而且配置復(fù)雜，各種異步加載問題多多。后來我發(fā)現(xiàn)其實(shí)最clean、直接、方便、強(qiáng)大模塊化方式當(dāng)屬substack大神的真.Browserify。

它可以基于NodeJS平臺(tái)實(shí)現(xiàn)模塊化的工具，你可以像組織NodeJS代碼那樣組織自己的前端工程，所有的模塊都可以像NodeJS那樣直接require進(jìn)來。提供一個(gè)入口文件（如上的main.coffee)給Browserify，它會(huì)把這個(gè)入口文件的所有依賴模塊都打包成一個(gè)文件。最終的文件不依賴于Browserify，最終的文件就是你的邏輯代碼的組合。

而且Browserify和NodeJS的模塊兼容性很好，一些NodeJS自帶的模塊例如util、path都可以用到前端中。你用npm安裝的庫，也可以通過Browserify用到前端中！例如我想用jQuery，我只需要：npm install jquery --save。然后在main.coffee中：

$ = require "jquery" // play with jquery

相當(dāng)貼心。

（Browserify具體用法查看官網(wǎng)文檔）

2.3 流程自動(dòng)化工具

其實(shí)自動(dòng)化方式可以有很多種，你可以：

• 配置npm的script，直接用npm來進(jìn)行自動(dòng)化任務(wù)管理。
• 使用古老的makefile和shell腳本
• Grunt
• Gulp

前兩種方式更適合NodeJS開發(fā)服務(wù)端的應(yīng)用場(chǎng)景，前端一般更適合用后兩種。

目前使用的是Grunt，選擇它是因?yàn)樗鐓^(qū)大、插件多、成熟。但是我更看好Gulp基于流(Stream)的機(jī)理，這種繼承于Unix思想的無與倫比的實(shí)現(xiàn)方式著實(shí)可以讓它在性能上和Grunt拉開差距。Grunt基于文件實(shí)現(xiàn)方式是在是：太！慢！了!

（Grunt具體用法可以見官網(wǎng)文檔）

2.4 測(cè)試

測(cè)試又是一個(gè)龐大的話題。在國外，前端TDD、BDD開發(fā)已經(jīng)相當(dāng)成熟，各種酷炫的工具Jasmine、Mocha、Tape等等，可能是我比較孤陋寡聞，貌似國內(nèi)很少見到這些工具的使用。

其實(shí)前端是很難做到完全測(cè)試驅(qū)動(dòng)開發(fā)的，它本身涉及到許多主觀判斷因素，例如動(dòng)畫是不是按照預(yù)想的那樣移動(dòng)等等。但是邏輯代碼和前后端接口邏輯是可以測(cè)試的。所以引進(jìn)測(cè)試驅(qū)動(dòng)開發(fā)的一個(gè)非常大的好處就是：只要接口確定了，前后端可以分離開發(fā)，前端不用再“等后端API實(shí)現(xiàn)”了。

在我們的工作流中，使用MochaJS作為測(cè)試套件，ChaiJS作為斷言庫，Sinon做為數(shù)據(jù)mocking和函數(shù)spy。具體用法可以看各自的官網(wǎng)。

（對(duì)前端測(cè)試驅(qū)動(dòng)開發(fā)不了解的同學(xué)可以Google相關(guān)資料或查閱相關(guān)書籍）

3. 自動(dòng)化工作流

3.1 模板

這個(gè)工作流的模版已經(jīng)存放到了github上，大家可以clone下來進(jìn)行本地測(cè)試一下：https://github.com/livoras/feb.git

運(yùn)行步驟：

電腦上必須先按安裝好Nodejs和npm

安裝browswerify，coffeescript，和grunt：

npm install browswerify coffee-script grunt-cli -g

把倉庫fork到本地，進(jìn)入工程目錄，安裝依賴：

npm install

然后運(yùn)行g(shù)runt命令

運(yùn)氣好的話你可以看到這樣的界面:

然后，你會(huì)發(fā)現(xiàn)工程目錄下多了一個(gè)bin文件夾，那就是我們剛編譯好的文件存放在bin中。

然后打開瀏覽器，進(jìn)入http://localhost:3000 ，可以看到：

現(xiàn)在我們修改src/less/main.less文件，把body改成黑色看看：

然后回到瀏覽器看看：

說變就變，非常哦妹子（amazing）是不是？

工作流分兩個(gè)簡(jiǎn)單的步驟：

開發(fā)時(shí)

分布時(shí)

現(xiàn)在來介紹一下。

3.2 開發(fā)時(shí)

我們來看看gruntfile的100～108行：

其實(shí)grunt干了這么幾件事：

開啟本地服務(wù)器進(jìn)行調(diào)試：使用grunt的一個(gè)connect插件，開啟了一個(gè)本地服務(wù)器，localhost:3000，工程目錄為根目錄。

刪除原來已經(jīng)之前已經(jīng)過時(shí)的編譯文件：刪除整個(gè)bin文件夾

編譯coffeescript并且使用browserify進(jìn)行依賴合并：將src/coffee/下面的main.coffee作為入口，把所有依賴模塊編譯成js并且合并成一個(gè)文件，存放到bin/js/目錄下。打開bin/js/你可以看到下面有一個(gè)main.js。細(xì)心但話，你會(huì)發(fā)現(xiàn)，其實(shí)main.coffee是依賴同目錄下的一個(gè)叫another-module.coffee的模塊的。在編譯的時(shí)候，browserify會(huì)分析整個(gè)main.coffee的依賴樹，然后找到所有依賴進(jìn)行合并，所以你看到的bin/js/main.js其實(shí)是包含了兩個(gè)模塊的內(nèi)容。所以我們可以用Nodejs的方式寫模塊，前端只需要合并好的文件就可以了。

編譯less：將src/less/main.less編譯到bin/css/目錄下，同樣的， Less也是可以類似coffee的方式引用模塊（通過import）。所以我們的樣式也是萌萌噠模塊化了。

運(yùn)行測(cè)試：所有的測(cè)試存放在test/specs下，編譯好以后，grunt會(huì)運(yùn)行moch運(yùn)行測(cè)試樣例。你在窗口中可以看到我們一共有三個(gè)測(cè)試運(yùn)行并且通過了。

監(jiān)控文件變化，一旦文件變化，重新執(zhí)行3～5步驟。并且自動(dòng)刷新瀏覽器：借助于grunt的watch插件，我們可以做到一旦文件修改的時(shí)候，就重新編譯coffeescript，less，運(yùn)行測(cè)試，并且自動(dòng)刷新瀏覽器。

有了這么一個(gè)流程，你就可以很輕松地寫前端的邏輯和樣式，并且都是以模塊化的方式。

3.3 發(fā)布時(shí)

好了，代碼都寫完了。我需要把我的代碼部署到服務(wù)器上。很簡(jiǎn)單，只需要命令行中執(zhí)行：

grunt build

你就會(huì)發(fā)現(xiàn)工程目錄下多了一個(gè)dist文件夾，進(jìn)入里面，可以看到：

直接打開index.html：

居然可以直接打開，也是非常哦妹子是不是？

我們看看grunt的build任務(wù)：

grunt build干了這么幾件事情：

刪除之前編譯過的文件，同上。

刪除之前發(fā)布的文件，也就是刪除整個(gè)dist目錄。

編譯coffee和less，同上。

測(cè)試，發(fā)布前還是需要看看有沒有問題嘛。

uglify，把bin/js/main.js混淆壓縮，放到dist/js/下。

cssmin，把bin/css/main.css混淆壓縮，放到dist/css下。

復(fù)制assets目錄到dist下

復(fù)制index.html，做一些處理（更改相對(duì)路徑等），存放到dist/下

你可以看到dist目錄下的文件js和css文件都是經(jīng)過壓縮的，現(xiàn)在dist中的文件夾已經(jīng)ready了，你隨時(shí)都可以直接放到服務(wù)器上了。

4. 最后

上面其實(shí)是一個(gè)非常簡(jiǎn)陋的流程，在實(shí)際要做的流程化要比這個(gè)復(fù)雜多，例如要考慮組建目錄自動(dòng)化構(gòu)建，版本管理自動(dòng)化，部署自動(dòng)化，圖片合并優(yōu)化等等。主要有這個(gè)意識(shí)：* 不要做任何重復(fù)的工作，能自動(dòng)化到地方都可以想法設(shè)法做到自動(dòng)化 *。

上面也跳過了很多基礎(chǔ)知識(shí)，這些是你需要知道的：

Grunt的使用

Nodejs的基本使用

模塊化概念

TDD測(cè)試的概念和基本測(cè)試套件的使用

Coffee，Less，Browserify但使用等

我甚至直接跳過了構(gòu)建整個(gè)流程的過程，也跳過了測(cè)試如何編寫。其實(shí)其中很多細(xì)節(jié)都可以拓展來講，測(cè)試，模塊化等，接下來博客也許會(huì)往這個(gè)方向去寫。

（全文完）

總結(jié)

以上是生活随笔為你收集整理的前端自动化开发工作流模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。