FIS3的簡單使用

序言：

最近在收集前端的優化工具，隨便一搜，厲害了word哥，有grunt、gulp、FIS三、webpack等等，簡直就是眼花繚亂！
前輩們對於他們的評價各有千秋，因而乎就想每一個都來用一遍（以前已經倒騰了grunt，gulp），今天倒騰fis3,看看哪一個更好玩~

FIS3 是什麼？能作什麼？

FIS3 是面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合併、內嵌）、模塊化開發、自動化工具、開發規範、代碼部署等問題。

一、安裝：

FIS3是基於node和npm的構建工具，須要安裝node，沒安裝node的請自行安裝。

這裏是參考FIS官網簡單說說windows如何安裝和使用，

打開cmd輸入命令：npm install -g fis3

注：若是npm等待時間過長建議使用淘寶鏡像cnpm，等同於npm.

輸入以上命令等待安裝完成以後再輸入：fis3 -v

若是看到以下圖說明安裝成功：

二、使用：

fis3不像grunt、gulp使用時候不少插件還要配置，由於fis3不少已經內置，只須要配置下一個必須文件:fis-conf.js便可。

下面介紹幾個經常使用的配置例子,(例子下載)，例子目錄：app是項目的開發環境，build是空文件夾，是生產環境（即fis-conf.js配置以後，輸入一鍵配置）

A：文件指紋，文件指紋，惟一標識一個文件。在開啓強緩存的狀況下，若是文件的 URL 不發生變化，沒法刷新瀏覽器緩存。通常都須要經過一些手段來強刷緩存，一種方式是添加時間戳，每次上線更新文件，給這個資源文件的 URL 添加上時間戳。

而 FIS3 選擇的是添加 MD5 戳，直接修改文件的 URL，而不是在其後添加 query。以下

B：CssSprite圖片合併，

壓縮了靜態資源，咱們還能夠對圖片進行合併，來減小請求數量。

FIS3 提供了比較簡易、使用方便的圖片合併工具。經過配置便可調用此工具並對資源進行合併。

FIS3 構建會對 CSS 中，路徑帶 ?__sprite 的圖片進行合併。爲了節省編譯的時間，分配到 useSprite: true 的 CSS 文件纔會被處理配置以下。

C：資源壓縮，爲了減小資源網絡傳輸的大小，經過壓縮器對 js、css、圖片進行壓縮是一直以來前端工程優化的選擇。在 FIS3 中這個過程很是簡單，經過給文件配置壓縮器便可。配置以下

最後這個完整的fis-conf.js的配置如：

//一、文件指紋，而 FIS3 選擇的是添加 MD5 戳，
// 直接修改文件的 URL，而不是在其後添加 query。
fis.match('*.{js,css,png}', {
    useHash: true
});


//二、CssSprite圖片合併
//FIS3 提供了比較簡易、使用方便的圖片合併工具。
// 經過配置便可調用此工具並對資源進行合併。
// 啓用 fis-spriter-csssprites 插件
fis.match('::package', {
    spriter: fis.plugin('csssprites')
})
// 對 CSS 進行圖片合併
fis.match('*.css', {
    // 給匹配到的文件分配屬性 `useSprite`
    useSprite: true
});

//三、壓縮資源
//爲了減小資源網絡傳輸的大小，
// 經過壓縮器對 js、css、圖片進行壓縮是一直以來前端工程優化的選擇。
// 在 FIS3 中這個過程很是簡單，經過給文件配置壓縮器便可。
// 清除其餘配置，只保留以下配置
fis.match('*.js', {
    // fis-optimizer-uglify-js 插件進行壓縮，已內置
    optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
    // fis-optimizer-clean-css 插件進行壓縮，已內置
    optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
    // fis-optimizer-png-compressor 插件進行壓縮，已內置
    optimizer: fis.plugin('png-compressor')
});

　　配置好以後命令行進入app目錄下，輸入以下命令（即總體建立到app父級目錄下的build目錄下，即生產環境下）：

fis3 release -d ../build

此時再看看build目錄下的文件以下圖：

仔細看有md5戳，文件都是壓縮後的，自動生成雪碧圖(此例子是模仿fis3官網的一個例子，若有誤請指出~)。