转载

集成Visual Studio/MSBuild publish 和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: 集成Visual Studio/MSBuild publish 和FIS3

  • ASP.NET Web Application Project Deployment: https://msdn.microsoft.com/en-us/library/dd394698(v=vs.110).aspx
  • Web Deployment Overview for Visual Studio and ASP.NET: https://msdn.microsoft.com/en-us/library/dd394698(v=vs.100).aspx

具体细节还是很多的,这里,我只介绍一下结果。

  1. 在visual studio中打开的asp.net项目中的default.aspx 页面: 集成Visual Studio/MSBuild publish 和FIS3
  2. 为此项目配置的fis-conf.js文件: 集成Visual Studio/MSBuild publish 和FIS3
  3. 在VS中进行一键发布。可以发布到本机的IIS或者任何装有wmsvc服务的远程机上。如果是发布在本机,还可以方便的进行本机调试。注意我这里是发布到本机的IIS,接收端设置是: http://localhost:8172/msdeploy.axd 集成Visual Studio/MSBuild publish 和FIS3

  4. VS IDE 中发布的结果 集成Visual Studio/MSBuild publish 和FIS3

  5. VS IDE中发布的结果。查看页面的源代码。可以看到,css文件和js文件被合并了(就是aio.css, aio.js 文件),但是,没有进行其他的优化。 集成Visual Studio/MSBuild publish 和FIS3

  6. 除了在VS IDE中发布以外,命令行发布也很重要。能够进行命令行发布,是实现连续集成(CI)的要素。 集成Visual Studio/MSBuild publish 和FIS3 集成Visual Studio/MSBuild publish 和FIS3

  7. 我在命令行发布中添加了更多的Fis3优化功能,包括: js和css的压缩, 图像的sprite化。当然,在IDE的发布中,也能进行这些优化。本图中,看到在页面上的css被压缩。并且进行了sprite化。 集成Visual Studio/MSBuild publish 和FIS3

集成Visual Studio/MSBuild publish 和FIS3 8. css文件被合并,且sprite化。js文件被合并和压缩。 集成Visual Studio/MSBuild publish 和FIS3 集成Visual Studio/MSBuild publish 和FIS3

Fis3和Visual Studio/MSBuild的集成,既可以优化web 站点的性能,又可以提高开发人员效率,是很不错的东西,有这方面需要的公司,可以向本人索求咨询服务,联系方式: http://weibo.com/u/1999451503**

感谢阅读

原文  http://div.io/topic/1790
正文到此结束
Loading...