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

來源:互聯網
上載者:User

標籤:

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.