F.I.S初探，f.i.s

F.I.S初探，f.i.s
一、初識FIS在做項目中遇到了靜態資源瀏覽器緩衝更新的問題，於是在網路上尋找解決方案。之前雖然沒有解決過這個問題，但方法無非就是為其設定新URI使得瀏覽器強制更新。這個過程聽起來還是相當簡單的。 也是無意中搜尋到了知乎上的一個文章大公司裡怎樣開發和部署前端代碼？看到這個文章中提到了FIS，跟隨著文章開始學習走起，有點小興奮，只不過很快便發現問題更多。 二、嘗試原本只是想著有個工具可以將前端資源打個標識，這樣就可以輕鬆的解決瀏覽器靜態緩衝更新問題。FIS的描述也確實如此，那麼就開始動手搞起吧。安裝FIS是基於Nodejs開發，所以nodejs必須有。裝起。。然後通過npm命令裝起， npm install -g fis。結果卡死了。 由於是第一次接觸，所以在baidu上找了半天也沒找到方案。放棄。。。 發現了官方視頻教程，於是花時間看了幾集，大概瞭解到FIS這個工具還是挺簡單的。而且解決了前端開發的問題：1、資源壓縮2、md5戳3、資源合并 貌似比較有用的功能就這幾個。而我最關心的就是md5戳咯。。 md5戳所謂Md5戳就是這樣的：<script src="/script/placeholder.js"></script>加戳後是這樣的：<script src="/script/placeholder_88025f0.js"></script> 當然檔案本身名稱也變了：script/placeholder_88025f0.js 這樣一來解決了兩個問題：1、引用靜態資源的URI變了，那麼自然瀏覽器會取新的資源，解決了更新緩衝的問題2、md5是通過檔案計算得來，所以只有檔案發生變化了才會產生新的URI，反之就不用變了，這就解決了累加式更新的問題，同時兼顧了流量功擊 當然對於我這種小項目來說第2點幾乎沒啥用。 再嘗試安裝既然知道了好處，那就繼續裝吧，開啟fis官方網站：http://fis.baidu.com，這裡面有入門教程，這點畢竟百度團隊公開的協助還是相當可以的。而且是中文滴，好有親近感。。找了原因可能是npm網站動不動會被牆導致的。。那麼，官方也有方案，使用鏡像：

npm install some-npm-module -g --registry=國內鏡像 --disturl=https://npm.taobao.org/dist

這些東西官方網站都有提到，就不多說啦。出門左轉去這裡：https://github.com/fex-team/fis/issues/65 這次好了，安裝好了，fis -v  三、遇到問題裝好了後那就開始在項目中用吧，這才發現自己太年輕。。。。。。  1、配置直接使用fis release -md ../output，好了開始產生與發布。結果完蛋了，不管阿貓阿狗全部js/css/imgs都添加了md5戳。這可就麻煩了，完全不是自己想要的，也就是說直接通過一個工具一鍵解決加Md5戳的問題太理想了。 那麼只好去研究官方的文檔，瞭解具體的配置方式。在FIS中都是通過fis-conf.js這個檔案來進行配置。官方例子：

// 設定圖片合并的最小間隔fis.config.set('settings.spriter.csssprites.margin', 20); // 取消下面的注釋開啟simple外掛程式，注意需要先進行外掛程式安裝 npm install -g fis-postpackager-simple fis.config.set('modules.postpackager', 'simple'); // 取消下面的注釋設定打包規則 fis.config.set('pack', {     '/pkg/lib.js': [         'js/lib/jquery.js',         'js/lib/underscore.js',         'js/lib/backbone.js',         'js/lib/backbone.localStorage.js',     ],     // 取消下面的注釋設定CSS打包規則，CSS打包的同時會進行圖片合并      '/pkg/aio.css': '**.css' }); // 取消下面的注釋可以開啟simple對零散資源的自動合并 fis.config.set('settings.postpackager.simple.autoCombine', true);

 

fis.config.merge({    roadmap : {        path : [            {                //所有widget目錄下的js檔案                reg : 'widget/**.js',                //是模組化的js檔案（標記為這種值的檔案，會進行amd或者閉包封裝）                isMod : true,                //預設依賴lib.js                requires : [ 'lib.js' ],                //向產出的map.json檔案裡附加一些資訊                extras : { say : '123' },                //編譯後產出到 /static/widget/xxx 目錄下                release : '/static$&'            },            {                //所有的js檔案                reg : '**.js',                //發布到/static/js/xxx目錄下                release : '/static/js$&'            },            {                //所有的ico檔案                reg : '**.ico',                //發布的時候即使加了--md5參數也不要產生帶md5戳的檔案                useHash : false,                //發布到/static/xxx目錄下                release : '/static$&'            },            {                //所有image目錄下的.png，.gif檔案                reg : /^\/images\/(.*\.(?:png|gif))/i,                //訪問這些圖片的url是 '/m/xxxx?log_id=123'                url : '/m/$1?log_id=123',                //發布到/static/pic/xxx目錄下                release : '/static/pic/$1'            },            {                //所有template目錄下的.php檔案                reg : /^\/template\/(.*\.php)/i,                //是類html檔案，會進行html語言能力擴充                isHtmlLike : true,                //發布為gbk編碼檔案                charset : 'gbk',                //發布到/php/template/xxx目錄下                release : '/php/template/$1'            },            {                //前面規則未匹配到的其他檔案                reg : /.*/,                //編譯的時候不要產出了                release : false            }        ]    }});

這裡面我目前用的最多的是roadmap，感覺這是個核心設定。  2、資源定位所謂資源定位，就是在html/js/css中定位到資源引用，將FIS編繹(產生)過的新資源替換進去。那麼其實挺簡單的，就像本文最開始說的例子：<script src="/script/placeholder.js"></script>加戳後是這樣的：<script src="/script/placeholder_88025f0.js"></script>
這樣每次發布都是自動完成了資源更新，有點小爽。。只不過問題來了。。。FIS目前替換後的URI是絕對路徑。這句話什麼意思？ 比如，一個css代碼：.h_login-conimgbg{background:transparent url('img/lgoin_image.png') no-repeat; height:406px;} 其中引用了img/lgoin_image.png這個圖片。但是經過FIS編繹後是什麼樣：.h_login-conimgbg{background:transparent url('/css/img/lgoin_image_369f159.png') no-repeat; height:406px;} FIS直接將絕對路徑進行的替換，這就帶來了一個問題，原先是相對目錄，換成絕對目錄後就變成了根目錄了。會有啥問題呢？如果使用了二級目錄就會出現問題，比如系統部署在tomcat的webapps下的myweb目錄中，訪問時：http://localhost:8080/myweb。那麼上面css定位資源時是http://localhost:8080/myweb/css/img/lgon_image.png。 可是FIS編繹後就會這樣：http://localhost:8080/css/img/lgon_image_369f159.png。這樣就無法訪問了。於是我在FIS的討論區諮詢了這個問題，給的回複是：  現在全部是絕對路徑，主要是考慮到資源合并和 cdn 部署的功能實現 這麼一來就只能通過其他的方式解決，比如，roadmap裡可以配置資源的url產生時添加domain，這個方法原本是用來做cdn部署時使用的。但是也可以解決上面的問題。  3、不想處理的檔案在系統裡使用了許多第三方資源，如jquery、jqueryUi等庫，但這些庫我們基本不會去修改代碼，也就不存在那些靜態資源壓縮、添加md5的問題了。那當然就不想在FIS裡處理這些檔案，而FIS是預設處理所有的js/css/imgs。這也就涉及到了配置的問題。fis.config.merge({    roadmap : {  path : [   {                //plugin的js檔案                reg : /^\/plugin\/(.*\.(?:js|css))/i,                useHash : false,                useCompile : false,                url : '${appServer}$&',            }        ]    }});這是我截取的一個配置片段，通過reg來定位具體的目錄

• useHash:false，表示不添加md5戳
• useCompile:false，表示不對資源進行編繹處理

 好了，有了這個配置，plugin下的js/css就不會被處理了。  四、階段感受其實到最後我已經放棄了，因為項目會用到jenkins hudson做整合，這裡面還有許多的部署問題，時間關係就不願意再深入了。原本想的用個工具加個md5戳或者版本號碼的想法破滅了。 但是收穫還是有的：1、前端的工程化原來可以有這麼出格的思路，其實並沒有什麼特別大的進步，只不過是看起來很叼的樣子。而且FIS感覺是起步階段，對於開發相對較為規範的項目確實是可以考慮的一個協助工具輔助2、真正讓我覺得有意思的地方是前端模組化。這部分是FIS裡的進階，真正的前端工程其實是這部分。我在前端方面的經驗太少了，僅僅是初步水平，所以這部分進階內容需要花時間學習和實踐3、無論產前端還是後端都是程式員，都是工程師。