1. 背景及現狀
隨著前端開發複雜度的日益增加，各種優秀的元件框架也遍地開花。同時，我們面臨業務規模的快速發展和工程師團隊的不斷擴張，如何解決資源整合、模組開發、專案部署、效能優化等問題勢在必行。
2. 目標
根據背景和現狀的分析，我們現制訂一個規範化的前端工作流，很好地規範統一專案的模組化開發和前端資源，讓程式碼的維護和互相協作更加容易更加方便，令前端開發自動化成為一種習慣。同時，讓大家能夠釋放生產力，提高開發效率，更好更快地完成團隊開發。
3. 技術路線
SVN是一個開放原始碼的版本控制系統，相較於RCS、CVS，它採用了分支管理系統，它的設計目標就是取代CVS。網際網路上很多版本控制服務已從CVS遷移到Subversion。說得簡單一點SVN就是用於多個人共同開發同一個專案，共用資源的目的。
GIT是一款免費、開源的分散式版本控制系統，用於敏捷高效地處理任何或小或大的專案。它採用了分散式版本庫的方式，不必伺服器端軟體支援，使原始碼的釋出和交流極其方便。
GULP是前端開發過程中對程式碼進行構建的工具，是自動化專案的構建利器。它不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用各種工具自動完成，大大提高我們的工作效率。
WEBPACK是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模組。
SASS是一種CSS前處理器。它是對CSS的語法的一種擴充，它可以使用巢狀、混入、選擇子繼承等功能，可以更有效有彈性的寫出Stylesheet。Sass最後還是會編譯出合法的CSS讓瀏覽可以使用，也就是說它本身的語法並不太容易讓瀏覽器識別（雖然它和CSS的語法非常的像，幾乎一樣），因為它不是標準的CSS格式，在它的語法內部可以使用動態變數等，所以它更像一種極簡單的動態語言。
RequireJS 是一個JavaScript模組載入器。它非常適合在瀏覽器中使用，但它也可以用在其他指令碼環境, 就像 Rhino and Node. 使用RequireJS載入模組化指令碼將提高程式碼的載入速度和質量。
artTemplate是新一代javascript模板引擎，它採用預編譯方式讓效能有了質的飛躍，並且充分利用javascript引擎特性，使得其效能無論在前端還是後端都有極其出色的表現。在chrome下渲染效率測試中分別是知名引擎Mustache與micro tmpl的25、32倍。
ReactJS是Facebook推出的一個用來構建使用者介面的JavaScript庫。設計思想極其獨特，屬於革命性創新，效能出眾，程式碼邏輯卻非常簡單。從最早的UI引擎變成了一整套前後端通吃的 Web App 解決方案。
VueJS是開源的一個前端開發庫,通過簡潔API提供高效的資料繫結和靈活的元件系統。
4. 業內標準
W3C標準
5. 總體設計
5.1. 工作流總體架構
5.2. 詳細設計圖
5.2.1. 程式碼管理層
SVN：屬於集中化的版本控制系統，使用起來有點像是檔案倉庫的感覺，支援並行讀寫檔案，支援程式碼的版本化管理，功能包括取出、匯入、更新、分支、改名、還原、合併等等。使用比較簡單，這裡不再贅述。
GIT：是分散式的版本控制系統。它採用了分散式版本庫的方式，不必伺服器端軟體支援。操作命令包括：clone，pull，push,branch ,merge ,push,rebase等等，具體使用我也不贅述。
SVN和GIT的使用：SVN適用於專案管理。因為它簡單易用。當程式碼涉及多組成員或者程式碼有一定的祕密性，用svn管理都是省事放心。
Git適用於程式碼管理。對於組內的一些公用元件，或者sdk之類的程式碼，用git更好管理，更新更快。
5.2.2. Images層
(1).圖片可以按頁面和公共模組來分著存放。
(2).一個頁面獨有的圖片用一個資料夾存放，方便壓縮和合成雪碧圖。
(3).公用的圖片元素或者出現多次的圖片元素存放到public資料夾。
(4).pic資料夾用於存放靜態頁面時的demo圖片，上正式環境的時候，這個檔案裡的東西可以清除。
格式使用：
GIF
GIF是一種正在逐漸被拋棄的圖片格式。PNG格式的出現就是為了替代它。PNG 8除了不支援動畫外，PNG8有GIF所有的特點，但是比GIF更加具有優勢的是它支援alpha透明和更優的壓縮（GIF僅支援索引透明）。
但是，當圖片顏色簡單到一定程度，大小小到一定程度的時候，gif格式圖片大小要小於png8。
JPG
支援攝影影象或寫實影象的高階壓縮，並且可利用壓縮比例控制影象檔案大小。
有失真壓縮會使影象資料質量下降，並且在編輯和重新儲存JPG格式影象時，這種下降損失會累積。
JPG和PNG8都適合顏色較少的圖片，因為JPG在柵格化時精確記錄少數點，其它點用差值補齊。但是當影象顏色數少於一定值比如256的時候，PNG8可能更合適。
JPG不適合具有大塊顏色相近的區域或亮度("銳度")差異十分明顯的較簡單的圖片。
JPG在儲存攝影或寫實影象一般能達到最佳的壓縮效果，比如網站的背景圖，輪播圖，使用者頭像等等。
PNG
PNG可以細分為三種格式:PNG8，PNG24，PNG32。
後面的數字代表這種PNG格式最多可以索引和儲存的顏色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。
能在保證最不失真的情況下儘可能壓縮影象檔案的大小。
PNG用來儲存灰度影象時，灰度影象的深度可多到16位，儲存彩色影象時，彩色影象的深度可多到48位，並且還可儲存多到16位的α通道資料。
對於需要高保真的較複雜的影象，PNG雖然能無失真壓縮，但圖片檔案較大，不適合應用在Web頁面上。
使用規則：
1、少用圖片元素，儘量用css3代替。
2、儘量少用png24格式，要半透明的除外。
3、JPG適合攝影影象或寫實影象，同時也適合顏色較少影象。
4、PNG8 適合所含顏色很少(少於256)、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片。
5、PNG24適合圖片較為複雜且有透明效果且透明效果無法用css來實現的情況。
6、如果頁面中有較多的小icon，首先考慮使用webfont,如果webfont不能滿足需求，必須使用css sprite將圖片合併，來壓縮總體圖片的大小，同時減少頁面請求提高訪問速度。參考見webfont字型檔
7、小於8k的圖片請轉化為base64。
5.2.3. CSS層
css層通過sass來管理，這樣能更加靈活，方便和容易維護。具體規範參考css規範。
使用規則：
1、Include資料夾用來存放公共模組，reset或者重用性很高的mixin等等全域性公用的樣式。
2、Components資料夾用來存放元件級別的公用樣式，例如公用的按鈕樣式，icon樣式，彈窗的樣式等等。
3、css命名最好就語義化。
5.2.4. HTML層
HTML層主要就是版本號的控制，這個放在下面GULP的使用時介紹。html的規範參考HTML規範。
5.2.5. JS層
5.2.5.1. JS模組化標準--RequireJS
通過使用大家熟悉的AMD規範，能統一大家的js標準。模組化的開發更方便程式碼的共享和按需載入，提高開發的效率。藉助RequireJS可以實現js檔案的非同步載入，管理模組之間的依賴性，便於程式碼的編寫和維護。
RequireJS使用原則：
新專案可以採取這個模板為基礎去擴充套件程式碼。都在同一個區域定義變數，都在同一個區域定義事件，都在同一個地方繫結事件，最後初始化和暴露方法。套用程式碼標準模板可以做到大家的程式碼風格類似，以後接手的同學一看就知道程式碼在哪裡，快速上手。
5.2.5.2. JS模板引擎--artTemplate
artTemplate這個模板引擎相對成熟，效能比較好。支援執行時除錯，可精確定位異常模板所在語句，模板語句簡潔，瀏覽器支援完整。
artTemplate的使用規則：
按照它的api來使用即可。
5.2.5.3. MVVM和類MVC框架
5.2.5.3.1. ReactJS
ReactJS是一個用來構建使用者介面的 JavaScript 庫，虛擬DOM的使用讓它的效能優越。同時，它實現了單向響應的資料流，從而減少了重複程式碼，這也是它為什麼比傳統資料繫結更簡單的原因。
鑑於ReactJS對IE的支援不足，所以比較適合使用到移動端的專案中去。
接下來介紹ReactJS的基本使用。
5.2.5.3.1.1. HTML模板
5.2.5.3.1.2. ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
5.2.5.3.1.3. JSX 語法
JSX的語法就是直接寫在 JavaScript 語言之中，不加任何引號。它允許 HTML 與 JavaScript 的混寫，簡單方便。
5.2.5.3.1.4. 封裝元件
React 允許將程式碼封裝成元件，然後像插入普通 HTML 標籤一樣，在網頁中插入這個元件。React.createClass 方法就用於生成一個元件類的。
5.2.5.3.1.5. PropTypes 屬性
PropTypes屬性，是用來驗證元件例項的屬性是否符合要求的一個利器。
Mytitle元件有一個title屬性。PropTypes 告訴 React，這個 title 屬性是必須的，而且它的值必須是字串。如果例項化過程中，title不是字串就會驗證不通過，出現後臺報錯的資訊。
5.2.5.3.1.6. this.state
React 的一大創新，就是將元件看成是一個狀態機，一開始有一個初始狀態，然後使用者互動，導致狀態變化，從而觸發重新渲染UI 。state就是狀態的存取物件。
截圖的例子中，getInitialState 方法用於定義初始狀態，這個物件可以通過 this.state 屬性讀取。當使用者點選元件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以後，自動呼叫 this.render 方法，再次渲染元件。
5.2.5.3.2. VueJS
VueJs是一個短小精悍容易上手的MVVM框架。Api清晰，使用容易。支援ie8以上等其他主流的瀏覽器。適合在移動端和瀏覽器要求偏弱的專案。
VueJs的基本使用：
5.2.5.3.2.1. 資料繫結
5.2.5.3.2.2. 雙向繫結
5.2.5.3.2.3. 渲染列表
5.2.6. 自動化構建工具
5.2.6.1. GULP
GULP簡單易用，是前端自動化專案的構建利器。能把很多繁瑣重複的工作簡單化，命令化。作為前端工作流的利器，是一個不錯的選擇。加上豐富的元件，讓它能幹更多自動化的事情。
5.2.6.1.1. GULP的使用
1、全域性安裝
2、在專案根目錄下建立一個名為 gulpfile.js 的檔案
3、執行 gulp
具體的語法請參考官網。
5.2.6.1.2. GULP的外掛使用
5.2.6.1.2.1. 合併css-- gulp-concat-css
5.2.6.1.2.2. 合併js-- gulp-concat
5.2.6.1.2.3. 壓縮混淆js--gulp-uglify
5.2.6.1.2.4. 壓縮css-- gulp-minify-css/gulp-clean-css
5.2.6.1.2.5. 監聽檔案的更新-- gulp-livereload
這個例子是監聽樣式的更新。
5.2.6.1.2.6. 圖片壓縮-- gulp-imagemin
5.2.6.1.2.7. 生成雪碧圖-- gulp.spritesmith
Sprite.css是雪碧圖生成的css。
5.2.6.1.2.8. 版本號的控制-- gulp-rev-append
gulp-rev-append 外掛會通過正則(?:href|src)=”(.)[?]rev=(.)[“]查詢並給指定連結填加版本號，預設根據檔案MD5生成，因此檔案未發生改變，這個版本號將不會改變。
執行後的結果：
5.2.6.1.2.9. 編譯sass-- gulp-sass
還有其他很多外掛不再一一介紹。
5.2.6.2. Webpack
webpack是目前用得最多的一款模組載入器兼打包工具。
webpack是以 commonJS 的形式來書寫指令碼滴，但對 AMD/CMD 的支援也很全面，方便舊專案進行程式碼遷移。
開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉base64等。
擴充套件性強，外掛機制完善，特別是支援 React 熱插拔的功能讓人眼前一亮。
下面簡單介紹Webpack的基本使用。
5.2.6.2.1. 全域性安裝
5.2.6.2.2. 簡單使用
執行：
5.2.6.2.3. Loader
Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。
Loader可以理解為是模組和資源的轉換器，它本身是一個函式，接受原始檔作為引數，返回轉換的結果。這樣，我們就可以通過 require 來載入任何型別的模組或檔案，比如 CoffeeScript、 JSX、 SASS 或圖片。
module.loaders 告知 webpack 每一種檔案都需要使用什麼載入器來處理。
5.2.6.2.4. GULP和Webpack的混合使用
在gulp裡面，只需把配置寫到webpack({ ... }) 中去即可，不用再寫 webpack.config.js 。
5.2.6.2.5. 在ReactJS裡面使用Webpack
在ReactJS裡面安裝react-hot-loader，再結合Webpack就可以實現修改即更新同步的效果。
6. 技術亮點
6.1. 統一標準，提高工作效率，有利團隊合作
借鑑業內出名的諸如RequireJS、SASS等框架，統一前端程式碼的規範，有利於以後的團隊合作，使用GULP、Webpack等高效的構建工具，能提高工作的效率，減少工作量。更有利於程式碼的維護和可擴充套件性。
6.2. 跨平臺，支援靈活多變的場景
模組化的設計和可擴充套件的程式碼模式，加上靈活的自動化構建工具，適合各種場景的開發。也便於新成員的接入。
總結：這個其實是我2年前寫出來的設計方案，現在看起來並不先進，甚至有點落後。扔出來只是給大家提供一個思路，技術選型和打包釋出，還得看你們的具體業務。方案說得有點籠統，還望諒解。