在移動端項目的開發中,咱們會遇到諸如移動端技術選型、移動端適配、預處理器語言的使用規範和編譯、各類繁瑣的工做(壓縮、合併、內聯、雪碧圖、CSS前綴……)等問題,在一遍又一遍的重複勞動中,咱們須要一個可以結合最佳實踐的項目初始文件,本套工做流就是以這個目的進行構建,旨在提升移動端項目開發效率。css
這套工做流與其叫工做流這麼高大上的名字,我更願意叫它基礎庫。如它的名字同樣,它就是用來做爲項目的基礎,在良好的基礎上開發的項目,纔像是站在巨人的肩膀上,才能保證項目的質量與效率。html
此外由於是針對移動端(尤爲是活動類項目)開發的基礎庫,技術選型還算簡單,尤爲適合初入移動端以及剛作移動端不久的前端人,即便作了一段時間的移動端,瞭解這套基礎庫的架構和功能實現,或許也有增益。前端
接下來讓咱們來了解這個基礎庫的各個方面。node
在正式去了解這套基礎庫前,首先介紹它的技術選型,讓你有個大概的瞭解。git
看完技術選型後,看看它能實現哪些功能,是否知足你的需求。github
OK, 若是你決定嘗試下這套基礎庫,首先要確保你有相應的環境,下面這些是步驟:npm
1.下載nodejs,安裝gulp
2.安裝cnpm,實際上你只用在終端執行下面這句命令就能夠了。緩存
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安裝gulp,一樣你須要執行下面這句命令。sass
cnpm install --global gulp
安裝完環境,咱們須要獲取代碼,獲取代碼有兩種方式:
1.github
git clone git@github.com: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