整合Visual Studio/MSBuild的開發/發布流程和 FIS3

標籤：

Fis3 是很不錯的前端最佳化工具，功能強大，在國內也比較流行。Visual Studio和MSBuild就不用說了。但是，想把Fis3結合進Visual Studio 或者 MSBuild的開發流程中去，還沒見人做過。究其原因，是因為Fis3會改變html頁面本身，包括模板檔案，如aspx, cshtml, php檔案等等，但是，這些檔案屬於源檔案， 是不應當改變的。但是，Visual Studio的發布功能（publish）或者 MSBuild+MSDeploy卻提供了把Fis3結合進去的可能性（以下簡稱這些為MS工具）。 因為在這些流程中， MS工具會產生中間檔案，在這些中間檔案上，就可以應用Fis3工具，對有關的檔案進行最佳化性的改變。

本人根據上述想法進行了嘗試，效果還是不錯的。其中，主要的困難在於要熟悉MSBuild的文法，Visual Studio的build 和publish過程，以及MS Web Deploy 的一 些知識。

關於MS Web Deploy:

1. ASP.NET Web Application Project Deployment.
2. Web Deployment Overview for Visual Studio and ASP.NET.

具體細節還是很多的，這裡，我介紹一下效果和感受。

1. 在visual studio中開啟的asp.net項目中的default.aspx 頁面：  
   
   
2. 為此項目配置的fis-conf.js檔案： 
   
   
3. 在VS中進行一鍵發布。發行就緒到原生IIS或者任何裝有wmsvc服務的遠程機上。如果是發布在本機，還可以方便的進行本機調試。注意我這裡是發布到原生IIS，接收端設定是：http://localhost:8172/msdeploy.axd 
   
   
4. VS IDE 中發布的結果 
   
   
5. VS IDE中發布的結果。查看頁面的原始碼。可以看到，css檔案和js檔案被合并了（就是aio.css, aio.js 檔案），但是，沒有進行其他的最佳化。 
   
   
6. 除了在VS IDE中發布以外，命令列發布也很重要。能夠進行命令列發布，是實現連續整合（CI）的要素。
   
   
7. 我在命令列發布中添加了更多的Fis3最佳化功能，包括: js和css的壓縮, 映像的sprite化。當然，在IDE的發布中，也能進行這些最佳化。本圖中，看到在頁面上的css被壓縮。並且進行了sprite化。
   
   
8. css檔案被合并，且sprite化。js檔案被合并和壓縮。
   
   

 

Fis3和Visual Studio/MSBuild的整合，既可以最佳化web 網站的效能，又可以提高開發人員效率，是很不錯的東西，有這方面需要的公司，可以向本人索求諮詢服務，連絡方式：http://weibo.com/u/1999451503

感謝閱讀

 

整合Visual Studio/MSBuild的開發/發布流程和 FIS3