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

<p style='color:blue'>FIS3 是面向前端的工程構(gòu)建工具。解決前端工程中性能優(yōu)化殖告、資源加載（異步阿蝶、同步、按需黄绩、預(yù)加載羡洁、依賴管理、合并爽丹、內(nèi)嵌）筑煮、模塊化開(kāi)發(fā)、自動(dòng)化工具粤蝎、開(kāi)發(fā)規(guī)范真仲、代碼部署等問(wèn)題.</p>
<h1>安裝：</h1>
<code style='font-size=14px'>npm install -g fis3</code>
<p style='color:red'>當(dāng)出現(xiàn)以下圖形則表示安裝成功</p>
<pre>
$ fis3 -v

[INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3)
v3.0.0
/\\\\\\\\ /\\\\\\ /\\\\\
/\/////////// /////\/// /\/////////\
/\\ /\\ //\\ ///
/\\\\\\ /\\ ////\
/\/////// /\\ ////\
/\\ /\\ ////\
/\\ /\\ /\\ //\
/\\ /\\\\\\ ///\\\\\/
/// /////////// ///////////
</pre>
<p style='margin:0'>安裝完畢，在介紹之前我來(lái)說(shuō)說(shuō)我為什么使用fis初澎。fis出的比較早秸应，是國(guó)內(nèi)百度出的，但前端工具這一塊很多都是國(guó)外流行傳近國(guó)內(nèi)的，所以知道fis的人還是比較少的灸眼。我自己英語(yǔ)不好，嫌查文檔不方便墓懂，就偷了個(gè)懶焰宣，選擇fis作為我的開(kāi)發(fā)工具（因?yàn)槲臋n都是中文的~~）。還好fis經(jīng)過(guò)慢慢的改進(jìn)捕仔，到了fis3已經(jīng)很強(qiáng)大了匕积。</p>
<p style='margin:0'>
fis有很多功能，但是早期對(duì)于我來(lái)說(shuō)fis的熱更新對(duì)我來(lái)說(shuō)幫助非常大榜跌，快速靈活的搭建本地服務(wù)闪唆，讓我的開(kāi)發(fā)效率大大提高。如果你是剛剛接觸前端這門(mén)職業(yè)并且沒(méi)有或者還沒(méi)有找到一個(gè)合適的開(kāi)發(fā)工具钓葫，不妨試試fis3悄蕾，或許這就是你想要的。</p>

<h1>先起個(gè)服務(wù)</h1>
<blockquote>在實(shí)際開(kāi)發(fā)項(xiàng)目的時(shí)候础浮，前端除了寫(xiě)靜態(tài)頁(yè)面帆调，還有和后臺(tái)的交互也是肯定少不了，所以這個(gè)時(shí)候我們就需要在本地起一個(gè)服務(wù)來(lái)保證數(shù)據(jù)的正確獲取和發(fā)送豆同。</blockquote>
fis起服務(wù)非常的簡(jiǎn)單和方便番刊，首先進(jìn)入項(xiàng)目頁(yè)面：

fis1.png

按住shift鍵同時(shí)右鍵點(diǎn)擊目錄空白處，選擇“在此處打開(kāi)命令窗口”:

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>
文件指紋，唯一標(biāo)識(shí)一個(gè)文件疟丙。在開(kāi)啟強(qiáng)緩存的情況下颖侄，如果文件的 URL 不發(fā)生變化，無(wú)法刷新瀏覽器緩存享郊。一般都需要通過(guò)一些手段來(lái)強(qiáng)刷緩存览祖，一種方式是添加時(shí)間戳，每次上線更新文件炊琉，給這個(gè)資源文件的 URL 添加上時(shí)間戳
<pre>

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

文件變化：

Paste_Image.png

<h3>資源合并</h3>
為了減少資源網(wǎng)絡(luò)傳輸?shù)拇笮」堇铮ㄟ^(guò)壓縮器對(duì) js隘世、css、圖片進(jìn)行壓縮是一直以來(lái)前端工程優(yōu)化的選擇鸠踪。在 FIS3 中這個(gè)過(guò)程非常簡(jiǎn)單丙者，通過(guò)給文件配置壓縮器即可。
<pre>// 清除其他配置营密，只保留如下配置
fis.match('*.js', {
// fis-optimizer-uglify-js 插件進(jìn)行壓縮械媒，已內(nèi)置
optimizer: fis.plugin('uglify-js')
});

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

fis.match('*.png', {
// fis-optimizer-png-compressor 插件進(jìn)行壓縮评汰，已內(nèi)置
optimizer: fis.plugin('png-compressor')
});</pre>

<h3>CssSprite圖片合并</h3>
壓縮了靜態(tài)資源纷捞，我們還可以對(duì)圖片進(jìn)行合并，來(lái)減少請(qǐng)求數(shù)量被去。
FIS3 提供了比較簡(jiǎn)易主儡、使用方便的圖片合并工具。通過(guò)配置即可調(diào)用此工具并對(duì)資源進(jìn)行合并惨缆。
FIS3 構(gòu)建會(huì)對(duì) CSS 中糜值，路徑帶 ?__sprite 的圖片進(jìn)行合并丰捷。為了節(jié)省編譯的時(shí)間，分配到 useSprite: true 的 CSS 文件才會(huì)被處理寂汇。
<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')
})

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

<h1>結(jié)束語(yǔ)</h1>
對(duì)于fis3我就介紹到這里了病往，如果想了解更多fis3其他的功能，請(qǐng)看：
<a >官方文檔</a>
最后補(bǔ)充一句骄瓣，fis3開(kāi)發(fā)常規(guī)項(xiàng)目是完全夠用了荣恐，對(duì)新手友好，文檔也詳細(xì)累贤。但是如果想使用vue，react這種要使用專門(mén)的文件做開(kāi)發(fā)的框架少漆，webpack肯定是首選臼膏，但是webpack的學(xué)習(xí)成本太大對(duì)新手不友好，所以這里推薦UC團(tuán)隊(duì)基于fis做的二次開(kāi)發(fā)的構(gòu)建工具<a >Scrat</a>可以作為過(guò)渡工具示损。

<h1>最最后_{求波關(guān)注}么么噠ヾ(o???)?ヾ</h1>