171
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
//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官網的一個例子，如有誤請指出~)。
最後更新：2017-11-05 11:35:18