針對移動端的前端工作流
在移動端項目的開發中,我們會遇到諸如移動端技術選型、移動端適配、預處理器語言的使用規範和編譯、各種繁瑣的工作(壓縮、合並、內聯、雪碧圖、CSS前綴……)等問題,在一遍又一遍的重復勞動中,我們需要一個能夠結合最佳實踐的項目初始文件,本套工作流就是以這個目的進行構建,旨在提高移動端項目開發效率。
這套工作流與其叫工作流這麽高大上的名字,我更願意叫它基礎庫。如它的名字一樣,它就是用來作為項目的基礎,在良好的基礎上開發的項目,才像是站在巨人的肩膀上,才能保證項目的質量與效率。
此外因為是針對移動端(尤其是活動類項目)開發的基礎庫,技術選型還算簡單,尤其適合初入移動端以及剛做移動端不久的前端人,即使做了一段時間的移動端,了解這套基礎庫的架構和功能實現,或許也有增益。
接下來讓我們來了解這個基礎庫的各個方面。
基礎庫技術選型
在正式去了解這套基礎庫前,首先介紹它的技術選型,讓你有個大概的了解。
- zepto.js + deferred.js + callbacks.js + touch.js(庫)
- flexible.js(移動端rem適配方案)
- handlebars(模板引擎)
- gulp(自動化構建工具)
- sass(預處理器語言)
基礎庫實現的功能
看完技術選型後,看看它能實現哪些功能,是否滿足你的需求。
- Sass編譯
- Css Js 圖片壓縮
- Css Js 合並
- Css Js 內聯
- Html的include功能
- Autoprefixer
- 自動刷新
- 去緩存
- 提供Handlebars模板文件的預編譯
- 提供常用功能函數
- 雪碧圖
- ESLint
- rem移動端適配方案
- 內置樣式與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
效果如圖:
yeoman.png
輸入項目名稱,會以輸入的項目名稱建立文件夾,基礎庫的代碼會自動創建。
基礎庫運行
獲取文件後,進入文件根目錄,請記住,在全部的使用中,就倆命令:
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
針對移動端的前端工作流