將一些前端開發工具整合在一起

說明

這是我開發移動端項目時，用到的一些工具，感覺將這些工具整合起來后，開發起來方便不少，現在將它分享出來。

功能

1. 可以實時預覽，修改html,scss時，不用手動刷新瀏覽器，多絡端同步瀏覽。
2. 移動端開發不需要再去寫媒體查詢。
3. 不用手動去將px轉成rem,可以直接使用已定義好的px2rem sass函數,font-size也有定義好的mixin @font-dpr,所以可以直接按效果圖上的大小來寫，省去了手動計算轉換環節。
4. 自帶靜態服務器，可以發送ajax請求
5. 可以根據模板生成測試數據，不用一條條的手動去寫
6. CSS里的小圖標自動轉換成base64，以減少http請求，超過30KB的大背景圖片不會被轉換

工具

1. browser-sync
2. lib-flexible
3. gulp
4. sass
5. bower
6. mockjs

安裝

首先安裝sass,在裝sass之前需要安裝ruby,可以去sass的官網了解一下安裝方法，這里不再細述。然后全局安裝gulp,bower,在cmd中執行

npm i -g gulp bower

下載

在clone這個repository后，會在本地生成一個www文件夾，這個文件夾就是以后放所有項目的地方，下面對里面的文件一一說明:

1. gitignore這是個git 忽略文件

2. gulpfile.js 這個文件里有我們制作項目時，可以運行的一些任務，包括：

   *. gulp server 用來創建一個靜態服務器，如gulp server --myProject --8080

   *. gulp sass 用來將scss轉換成css，并將小背景圖標轉換成base64,如gulp sass --myProject

   *. gulp compress 用來壓縮項目的CSS和JS，如gulp compress --myProject

   *. gulp build 打包項目，生成一個build文件夾，提出只用到的第三方的JS，CSS文件(就是根據gulp.config.js里提供的匹配，所以如果加載了其它的第三方JS或CSS庫，需要在這個JS文里的把用到的文件路徑添加上)，壓縮JS，CSS，最后只需要將build文件夾傳到線上服務器即可，如：gulp build --myProject

3. package.json 這個就不解釋了
   
4. projectTpl文件夾，這個文件夾是項目模板，以后每做一個新的項目，都是先將它復制到同級目錄后重命名，就是你項目的名字，文件夾里面有一個data和src文件夾，data文件里只有一個data.js文件，用來配置測試數據模板，數據是用mockjs生成的，可以去官網了解一下生成規則 ，注意屬性名字必須和頁面請求的文件名字相同，否則匹配不到，比如頁面現在需要發一個ajax請求：

$.ajax({
    url:'path1/path2/users.json',
    type:'GET', success:function(){}
})

那么data.js文件里相對應的數據模板就需要寫到key為'users'里，如

.col {
    width:px2rem(300)  /*這里最終輸出的將會是4rem*/
    @include font-dpr(24) /*[data-dpr = '1'] .col { font-size:12px;}; [data-dpr = '2'] .col { font-size:24px;} ;[data-dpr = '3'] .col { font-size:36px;}*/
}

至于前面的path1/path2，無關緊要，有或沒有都沒有關系

src里面就是我們放項目源碼的地方，vendor用來存放第三方的JS庫，通過bower install來安裝，比如‘bower install --save jquery’,注意在這里安裝完第三方庫后，千萬記得在config.js里加上你用到的文件，不然打包的時候遺漏了文件。

頁面的css寫到sass文件夾下的index.scss里面，因為我們做的移動端項目都比較小，所以就沒有分多個文件，如果你的項目比較大，可以折分成多個scss文件，這個就比較隨意了，一個比較方便的東西就是這里定義了一個@function，用來將px轉換成rem,還一個@mixin，用來自動轉換字體大小，在開發項目的時候，我們拿到的效果圖一般都是750PX寬度(如果你的效果圖不是750的寬度，需要修改_var.scss里的$baseFontSize,比如效果圖寬度是600，則將它改成60即可)，制作html的時候，我們就可以直接按照效果圖的大小來設置，只需要將值傳進px2rem這個function里面，比如

.col { width:px2rem(300)  /*這里最終輸出的將會是4rem*/
    @include font-dpr(24) /*[data-dpr = '1'] .col { font-size:12px;}; [data-dpr = '2'] .col { font-size:24px;} ;[data-dpr = '3'] .col { font-size:36px;}*/
}

之所有會這樣，主要是用到了lib-flexible，這個JS會根據訪問設置的大小以及dpr，設置html的font-size，而rem則是相對于它的一個相對單位，在這里這些東西就不詳細解釋了，感興趣的可以自己去了解一下

安裝依賴

在www目錄下面執行下面的語句，安裝整個項目需要用到的模塊

npm i

說明一下，我現在的node版本是v4.0.0,npm的版本是2.7.3，如果你用的是最新版本的node和npm ,gulp-sass這個模塊可能會出錯，你可以將它換成gulp-ruby-sass也可以。

試用一下

我們新建一個項目名叫：myProject

1. 首先復制projectTpl文件夾至同級目錄，并將它重命名為myProject
2. 進入myProject/src,在這個目錄下執行 bower install 安裝第三方的JS庫，因為lib-flexible沒有發布到bower上，而github里又有一個非常大的PSD，所以下載的時候會有點慢
3. 在www目錄下運行

gulp server --myProject --8080

這樣瀏覽器就是自動打開localhost:8080,也就是myProject項目中src下面的index.html頁面。

現在嘗試著修改index.html里的內容，或者修改sass目錄中的index.scss，可以發現，不用我們手動刷新瀏覽器，頁面就會自動更新了。這其實是用到了browsersync工具。

項目主頁：http://www.baiduhome.net/lib/view/home/1449326271780