序言：
最近在收集前端的優化工具，隨便一搜，厲害了word哥，有grunt、gulp、FIS3、webpack等等，簡直就是眼花繚亂！
前輩們對於他們的評價各有千秋，於是乎就想每個都來用一遍（之前已經倒騰了grunt，gulp），今天倒騰fis3,看看哪個更好玩~
FIS3 是什么？能做什么？
FIS3 是面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合並、內嵌）、模塊化開發、自動化工具、開發規范、代碼部署等問題。
1、安裝：
FIS3是基於node和npm的構建工具，需要安裝node，沒安裝node的請自行安裝。
這里是參考FIS官網簡單說說windows如何安裝和使用，
打開cmd輸入命令：npm install -g fis3
注：如果npm等待時間過長建議使用淘寶鏡像cnpm，等同於npm.
輸入以上命令等待安裝完成之后再輸入：fis3 -v
如果看到如下圖說明安裝成功：
2、使用：
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的配置如：
//1、文件指紋，而 FIS3 選擇的是添加 MD5 戳，
// 直接修改文件的 URL，而不是在其后添加 query。
fis.match('*.{js,css,png}', {
useHash: true
});
//2、CssSprite圖片合並
//FIS3 提供了比較簡易、使用方便的圖片合並工具。
// 通過配置即可調用此工具並對資源進行合並。
// 啟用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
// 對 CSS 進行圖片合並
fis.match('*.css', {
// 給匹配到的文件分配屬性 `useSprite`
useSprite: true
});
//3、壓縮資源
//為了減少資源網絡傳輸的大小，
// 通過壓縮器對 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官網的一個例子，如有誤請指出~)。