一、FIS是什么

在做項目的時候，用到部門內部前端人員開發的fiskit構建工具，經過這次項目基本把它的配置弄清楚了，fiskit構建工具是基于FIS的，所以自己也準備學習FIS，以便更好的理解。
后來在網上查閱了相關文件，才發現FIS是百度開發的，網上人說FIS適用于團隊開發。FIS是類似于Grunt,Gulp,Webpack的一種前端構建工具，FIS3是面向前端的工程構建工具，
用于解決前端性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合并、內嵌）、模塊化開發、自動化工具、開發規范、代碼部署等問題。看了這一句我也挺懵的，所
以決定仔細研究一番。

二、FIS：構建

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

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

重要特性
（1）規則覆蓋
如果有兩條規則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(''):這個只傳遞一個參數，表示配置所屬的環境（媒體類型）
這個方法提供多種狀態功能，比如有些配置是在開發環境下使用，有些配置是在生產環境下使用。

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

fis3 release prod

注意：media dev已經被占用，所以默認情況下不傳參數即為dev環境。
（3）fis3 inspect :查看特定media的分配情況

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

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

cssSprite圖片合并
壓縮了靜態資源，還可以對圖片進行合并，來減少請求數量

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。