最近隨着grunt的火熱，前端項目打包也成爲了一個前端工程師必備的技能。這兩天發現除了國外的grunt國內百度的FIS也是一個相當不錯的工具，最最最起碼他的說明文檔教程API等等都是中文滴，對於英文不好的朋友來說，學習起來那是相當的方便。好了言歸正傳，首先還是先比較一下fis和grunt的區別吧，以便有個初步瞭解。下面是截取了百度研發部自己的一份說明對比說明：
Grunt 是一個基於 task 的構建工具，依賴衆多的插件進行配置組織，可以解決基本的前端自動化問題。FIS 是基於工具、開發框架、本地開發環境爲一體的前端解決方案，不但擁有各類工具插件，同時還針對 PC、Mobile、I18n 等業務、場景總結了很多最佳實踐。
![]()
是否已經有了一個初步瞭解呢，如果想深入瞭解就進入他們的官網http://fis.baidu.com/學一下，初探一天後在此做一個筆記以便之後自己查閱，也方便大家進行一個快速使用的瞭解。
首先建立一個叫做dodotest的項目，現在明確一下打包發佈的需求是：
-
壓縮所有的js css文件
-
給js，css ，image這些資源加上md5戳的版本控制，並修改對應的html的代碼
-
合併部分js，css文件，合併部分icon圖片爲sprite形式以減少http請求
ok！開幹！
1 安裝
-
安裝fis，與grunt一樣基於npm的方式：npm install -g fis
-
安裝插件postpackager-simple，npm install -g fis-postpackager-simple，這個插件是用來合併文件合併sprite圖片使用的
2 啓動fis
執行命令fis server start -p 8080則開啓了fis內置服務，對應的關閉命令是fis server stop（或用nodejs的http-server模塊進行開啓服務器功能）
3 配置
添加fis-conf.js文件到項目根目錄並填寫配置文件（說明在註釋）
- // 設置圖片合併的最小間隔
- fis.config.set('settings.spriter.csssprites', {margin: 10});
-
- fis.config.merge({
- roadmap: {
- //指定一個domain地址，這裏我使用了本機的nginx服務器地址（正常情況下發布肯定是不填或者填寫線上靜態資源域名），這個domain可以不配，不配的話fis默認是把你項目的所有相對路徑搞成絕對路徑，比如./js/jquery.js變成/js/jquery.js；配了的話就會變成http://127.0.0.1:8080/js/jquery.js的樣子
- domain: "http://127.0.0.1:8888/"
- },
- deploy: {
- //發佈時候使用fis release --dest remote來使用這個配置
- remote: {
- //這裏是發佈到的路徑地址，我使用的是本機nginx服務器的根路徑作爲地址的，當然這裏你也可以填個"./publish/"之類的直接就把打包好的項目生成到項目的跟路徑下。
- //如果不配置這個remote，那麼發佈後默認會到fis內置服務的跟路徑www/下面（可以通過fis server open打開這個路徑），訪問時候直接127.0.0.1:8080就可以了
- to: 'E:/html/'
- }
- }
- });
- // 開啓simple插件
- fis.config.set('modules.postpackager', 'simple');
- //設置文件合併
- fis.config.set('pack', {
- '/pkg/js/lib.js': [
- 'js/lib/jquery.js',
- 'js/lib/jquery.a.js',
- 'js/lib/jquery.b.js'
- ],
- // 取消下面的註釋設置CSS打包規則，CSS打包的同時會進行圖片合併
- //圖片合併這裏要說明一下，不是所有圖片都合併的只有指定了"?__sprite"才行，如css：background: url(/img/1px_bg.png?__sprite)的形式，如果有特殊的個性化合併需求就查看api吧
- '/pkg/css/common.css': '**.css'
- });
-
- // 開啓simple對零散資源的自動合併
- //如果開啓，每一個頁面用到的js都會被合併成爲一個js，不同頁面調用了不同的js也會被分別合併：比如a頁面引入了a.js,b.js，b頁面引入了b.js,c.js，那麼ab將被合併爲一個js被a頁面引用，bc將合併爲另一個js被b頁面引用，並都被存放在pkg/下
- fis.config.set('settings.postpackager.simple.autoCombine', true);
4 發佈
fis release --dest remote -o --md5 --pack
說明： --dest remote 是調用remote配置發佈，-o是要壓縮資源，--md5是要給文件名加戳並同時修改html的引用文件名，--pack是使用文件合併了
結語
怎麼樣感覺是不是很方便，用grunt的時候光搞md5加戳就搞了好久又是grunt-rev又是grunt-usemin的，還得寫一大堆配置，這個fis真的是”體貼“多了。以上只是fis的冰山一角，想要使用他更強大的配置功能就擠時間學一下吧
