在移動端項目的開發中，我們會遇到諸如移動端技術選型、移動端適配、預處理器語言的使用規範和編譯、各種繁瑣的工作（壓縮、合並、內聯、雪碧圖、CSS前綴……）等問題，在一遍又一遍的重復勞動中，我們需要一個能夠結合最佳實踐的項目初始文件，本套工作流就是以這個目的進行構建，旨在提高移動端項目開發效率。

這套工作流與其叫工作流這麽高大上的名字，我更願意叫它基礎庫。如它的名字一樣，它就是用來作為項目的基礎，在良好的基礎上開發的項目，才像是站在巨人的肩膀上，才能保證項目的質量與效率。

此外因為是針對移動端（尤其是活動類項目）開發的基礎庫，技術選型還算簡單，尤其適合初入移動端以及剛做移動端不久的前端人，即使做了一段時間的移動端，了解這套基礎庫的架構和功能實現，或許也有增益。

接下來讓我們來了解這個基礎庫的各個方面。

基礎庫技術選型

在正式去了解這套基礎庫前，首先介紹它的技術選型，讓你有個大概的了解。

• zepto.js + deferred.js + callbacks.js + touch.js（庫）
• flexible.js（移動端rem適配方案）
• handlebars（模板引擎）
• gulp（自動化構建工具）
• sass（預處理器語言）

基礎庫實現的功能

看完技術選型後，看看它能實現哪些功能，是否滿足你的需求。

1. Sass編譯
2. Css Js 圖片壓縮
3. Css Js 合並
4. Css Js 內聯
5. Html的include功能
6. Autoprefixer
7. 自動刷新
8. 去緩存
9. 提供Handlebars模板文件的預編譯
10. 提供常用功能函數
11. 雪碧圖
12. ESLint
13. rem移動端適配方案
14. 內置樣式與WeUI樣式相同的loading、dialog組件

基礎庫的環境安裝

OK, 如果你決定嘗試下這套基礎庫，首先要確保你有相應的環境，下面這些是步驟：

1.下載nodejs，安裝

2.安裝cnpm，實際上你只用在終端執行下面這句命令就可以了。

    npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝gulp，同樣你需要執行下面這句命令。

    cnpm install --global gulp
 

基礎庫代碼獲取

安裝完環境，我們需要獲取代碼，獲取代碼有兩種方式：

1.github

    git clone [email protected]:mqyqingfeng/lnv-mobile-base.git

2.yeoman

    cnpm install -g yo

    cnpm install -g generator-lnv-mobile

    yo lnv-mobile

效果如圖：

輸入項目名稱，會以輸入的項目名稱建立文件夾，基礎庫的代碼會自動創建。

基礎庫運行

獲取文件後，進入文件根目錄，請記住，在全部的使用中，就倆命令：

1.開發時使用：

    gulp

當你開啟gulp命令後，不要關閉終端，gulp會監控src目錄下的變化，根據文件的不同進行對應的操作。

2.最終構建：

    gulp build

當你執行gulp build命令後，會自動壓縮、合並、內聯、去緩存，這是最終的上線版本。

基礎庫目錄結構

在介紹基礎庫的各個功能之前，首先了解一下目錄結構。

src下:

├── src/                        # 源文件
    └── font                      # 字體文件
    └── img                       # 圖片
    └── include                    # include文件
    └── js                        # js
    └── scss                        # scss
    └── static                   # 靜態資源
    └── tpl                        # handlebars模板
    └── widget                   # 組件
    └── index.html                 # index.html

執行gulp命令後， 會生成dev目錄

├── dev/                        # dev目錄
    └── font                       # 字體文件目錄
    └── img                       # 圖片目錄
    └── js                        # js
    └── css                        # css目錄
    └── static                   # 靜態資源目錄
    └── tpl                        # handlebars模板目錄
    └── widget                   # 組件目錄
    └── index.html                 # index.html

執行gulp build命令後, 會生成build目錄

├── build/                      # 構建目錄
    └── combined                   # 合並後的文件目錄
    └── img                       # 圖片目錄
    └── js                        # js
    └── css                        # css目錄
    └── static                   # 靜態資源目錄
    └── widget                   # 組件目錄
    └── index.html                 # index.html

註意dev目錄是通過src目錄生成的，任何時候都不要直接更改dev目錄裏的內容！！！

而build目錄是最終構架出的目錄，是最終要在線上使用的版本。

註意node_modules文件夾是不提交的！！！

本文轉至簡述app

針對移動端的前端工作流