一、FIS是什么

在做項(xiàng)目的時候，用到部門內(nèi)部前端人員開發(fā)的fiskit構(gòu)建工具，經(jīng)過這次項(xiàng)目基本把它的配置弄清楚了，fiskit構(gòu)建工具是基于FIS的，所以自己也準(zhǔn)備學(xué)習(xí)FIS，以便更好的理解。
后來在網(wǎng)上查閱了相關(guān)文件，才發(fā)現(xiàn)FIS是百度開發(fā)的，網(wǎng)上人說FIS適用于團(tuán)隊(duì)開發(fā)。FIS是類似于Grunt,Gulp,Webpack的一種前端構(gòu)建工具，F(xiàn)IS3是面向前端的工程構(gòu)建工具，
用于解決前端性能優(yōu)化、資源加載（異步、同步、按需、預(yù)加載、依賴管理、合并、內(nèi)嵌）、模塊化開發(fā)、自動化工具、開發(fā)規(guī)范、代碼部署等問題。看了這一句我也挺懵的，所
以決定仔細(xì)研究一番。

二、FIS：構(gòu)建

fis.match('',{})
這個配置方法的第二個參數(shù)必須是一個對象，之前誤寫成函數(shù)，一直在報錯。

fis.match('*.css',{
    useHash:true,
    release:'/static/$0'
})

重要特性
（1）規(guī)則覆蓋
如果有兩條規(guī)則A和B,他們同時命中了test.js，如果A在B的前面，B的屬性會覆蓋A的同名屬性，不同名屬性追加到test.js的File對象上。

fis.match('*',{
    release: '/dist/$0'
})

fis.match('test.js',{
    useHash:true,
    release: '/dist/js/$0'
})

//這時候test.js分配到的屬性是
{
    useHash: true,
    release: '/dist/js/$0'
}

（2）fis.media(''):這個只傳遞一個參數(shù)，表示配置所屬的環(huán)境（媒體類型）
這個方法提供多種狀態(tài)功能，比如有些配置是在開發(fā)環(huán)境下使用，有些配置是在生產(chǎn)環(huán)境下使用。

fis.media('prod').match('*.js',{
    optimizer: fis.plugin('uglify-js')
})

fis3 release prod

注意：media dev已經(jīng)被占用，所以默認(rèn)情況下不傳參數(shù)即為dev環(huán)境。
（3）fis3 inspect :查看特定media的分配情況

文件指紋：即對文件加個指紋，指紋即在文件名后面加上MD5后綴。
壓縮資源：即對圖片、js、css進(jìn)行壓縮。

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')
});

cssSprite圖片合并
壓縮了靜態(tài)資源，還可以對圖片進(jìn)行合并，來減少請求數(shù)量

總結(jié)

以上是生活随笔為你收集整理的FIS构建工具学习（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。