針對移動端的前端工做流

   

         在移動端項目的開發中,咱們會遇到諸如移動端技術選型、移動端適配、預處理器語言的使用規範和編譯、各類繁瑣的工做(壓縮、合併、內聯、雪碧圖、CSS前綴……)等問題,在一遍又一遍的重複勞動中,咱們須要一個可以結合最佳實踐的項目初始文件,本套工做流就是以這個目的進行構建,旨在提升移動端項目開發效率。css

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

         此外由於是針對移動端(尤爲是活動類項目)開發的基礎庫,技術選型還算簡單,尤爲適合初入移動端以及剛作移動端不久的前端人,即便作了一段時間的移動端,瞭解這套基礎庫的架構和功能實現,或許也有增益。前端

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

     

基礎庫技術選型

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

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

基礎庫實現的功能

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

  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, 若是你決定嘗試下這套基礎庫,首先要確保你有相應的環境,下面這些是步驟: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

效果如圖:


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

相關文章
相關標籤/搜索