集成Visual Studio/MSBuild的開發/發佈流程和 FIS3

誰不想讓本身的網站速度更快？爲此須要多方面的優化，但優化又會增長開發工做量。Fis3 是很不錯的前端優化工具，可以讓前端的優化變得自動方便，解決前述問題。Fis3是百度開發的，開源的，在國內比較六流行。Visual Studio和MSBuild就不用說了。可是，想把Fis3結合進Visual Studio 或者 MSBuild的開發流程中去，從而統一前端/後端的開發流程，還沒見人作過。究其緣由，是由於Fis3會改變html頁面自己，包括模板文件，如aspx, cshtml, php文件等等，可是，這些文件屬於源文件， 是不該當改變的。Visual Studio的發佈功能（publish）或者 MSBuild+MSDeploy（如下簡稱這些爲MS工具）卻提供了把Fis3結合進去的可能性。 由於在這些流程中， 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

感謝閱讀