<h1>什么是fis3？</h1>

<p style='color:blue'>FIS3 是面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合并、內嵌）、模塊化開發、自動化工具、開發規范、代碼部署等問題.</p>
<h1>安裝：</h1>
<code style='font-size=14px'>npm install -g fis3</code>
<p style='color:red'>當出現以下圖形則表示安裝成功</p>
<pre>
$ fis3 -v

[INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3)
v3.0.0
/\\\\\\\\ /\\\\\\ /\\\\\
/\/////////// /////\/// /\/////////\
/\\ /\\ //\\ ///
/\\\\\\ /\\ ////\
/\/////// /\\ ////\
/\\ /\\ ////\
/\\ /\\ /\\ //\
/\\ /\\\\\\ ///\\\\\/
/// /////////// ///////////
</pre>
<p style='margin:0'>安裝完畢，在介紹之前我來說說我為什么使用fis。fis出的比較早，是國內百度出的，但前端工具這一塊很多都是國外流行傳近國內的，所以知道fis的人還是比較少的。我自己英語不好，嫌查文檔不方便，就偷了個懶，選擇fis作為我的開發工具（因為文檔都是中文的~~）。還好fis經過慢慢的改進，到了fis3已經很強大了。</p>
<p style='margin:0'>
fis有很多功能，但是早期對于我來說fis的熱更新對我來說幫助非常大，快速靈活的搭建本地服務，讓我的開發效率大大提高。如果你是剛剛接觸前端這門職業并且沒有或者還沒有找到一個合適的開發工具，不妨試試fis3，或許這就是你想要的。</p>

<h1>先起個服務</h1>
<blockquote>在實際開發項目的時候，前端除了寫靜態頁面，還有和后臺的交互也是肯定少不了，所以這個時候我們就需要在本地起一個服務來保證數據的正確獲取和發送。</blockquote>
fis起服務非常的簡單和方便，首先進入項目頁面：

fis1.png

按住shift鍵同時右鍵點擊目錄空白處，選擇“在此處打開命令窗口”:

fis2.PNG

fis3.png

輸入<code style='font-size=14px'>fis3 release</code>回車

fis4.png

完成后再輸入<code style='font-size=14px'>fis3 server start</code>回車

fis5.png

.png', {
useHash: false
});
</code>
<h3>文件指紋</h3>
文件指紋，唯一標識一個文件。在開啟強緩存的情況下，如果文件的 URL 不發生變化，無法刷新瀏覽器緩存。一般都需要通過一些手段來強刷緩存，一種方式是添加時間戳，每次上線更新文件，給這個資源文件的 URL 添加上時間戳
<pre>

</pre>
而 FIS3 選擇的是添加 MD5 戳，直接修改文件的 URL，而不是在其后添加 query。
對 js、css、png 圖片引用 URL 添加 md5 戳，配置如下；
<pre>//清除其他配置，只剩下如下配置
fis.match('

文件變化：

Paste_Image.png

<h3>資源合并</h3>
為了減少資源網絡傳輸的大小，通過壓縮器對 js、css、圖片進行壓縮是一直以來前端工程優化的選擇。在 FIS3 中這個過程非常簡單，通過給文件配置壓縮器即可。
<pre>// 清除其他配置，只保留如下配置
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')
});</pre>

<h3>CssSprite圖片合并</h3>
壓縮了靜態資源，我們還可以對圖片進行合并，來減少請求數量。
FIS3 提供了比較簡易、使用方便的圖片合并工具。通過配置即可調用此工具并對資源進行合并。
FIS3 構建會對 CSS 中，路徑帶 ?__sprite 的圖片進行合并。為了節省編譯的時間，分配到 useSprite: true 的 CSS 文件才會被處理。
<pre>li.list-1::before {
background-image: url('./img/list-1.png?__sprite');
}

li.list-2::before {
background-image: url('./img/list-2.png?__sprite');
}</pre>
<pre>// 啟用 fis-spriter-csssprites 插件
fis.match('::package', {
spriter: fis.plugin('csssprites')
})

// 對 CSS 進行圖片合并
fis.match('*.css', {
// 給匹配到的文件分配屬性 useSprite
useSprite: true
});</pre>

<h1>結束語</h1>
對于fis3我就介紹到這里了，如果想了解更多fis3其他的功能，請看：
<a >官方文檔</a>
最后補充一句，fis3開發常規項目是完全夠用了，對新手友好，文檔也詳細。但是如果想使用vue，react這種要使用專門的文件做開發的框架，webpack肯定是首選，但是webpack的學習成本太大對新手不友好，所以這里推薦UC團隊基于fis做的二次開發的構建工具<a >Scrat</a>可以作為過渡工具。

<h1>最最后_求波關注么么噠ヾ(o???)?ヾ</h1>