針對移動端的前端工做流

時間 2019-11-11

標籤針對移動端的前端欄目無線简体版

原文原文鏈接

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

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

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

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

基礎庫技術選型

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

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

基礎庫實現的功能

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

Sass編譯
Css Js 圖片壓縮
Css Js 合併
Css Js 內聯
Html的include功能
Autoprefixer
自動刷新
去緩存
提供Handlebars模板文件的預編譯
提供經常使用功能函數
雪碧圖
ESLint
rem移動端適配方案
內置樣式與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