集成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

感谢阅读

时间: 2024-08-11 01:22:40

集成Visual Studio/MSBuild的开发/发布流程和 FIS3的相关文章

集成Visual Studio/MSBuild publish 和FIS3

Fis3 是很不错的前端优化工具,功能强大,在国内也比较流行.Visual Studio和MSBuild就不用说了.但是,想把Fis3结合进Visual Studio 或者 MSBuild的开发流程中去,还没见人做过.究其原因,是因为Fis3会改变html页面本身,包括模板文件,如aspx, cshtml, php文件等等,但是,这些文件属于源文件, 是不应当改变的.但是,Visual Studio的发布功能(publish)或者 MSBuild+MSDeploy却提供了把Fis3结合进去的可能

终于等到你,最强 IDE Visual Studio 2017 正式版发布

Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等.无论使用哪种语言或平台,都能节省开发者在日常任务上花费的时间和精力. 此外,该版本还带来了一个新的轻量化和模块化的安装体验,可根据需要量身定制安装.多个增强功能汇集在一起,使 Visual Studio 2017 的启动速度比 Visual Studio 2015 快3倍,解决方案加载时间缩短 2

Visual Studio 2017正式版发布全纪录

又是一年发布季,微软借着Visual Studio品牌20周年之际,于美国太平洋时间2017年3月7日9点召开发布会议,宣布正式发布新一代开发利器Visual Studio 2017.同时发布的还有 .NET Core Tooling 1.0 .NET Core Microservice instance Visual Studio for MAC preview 4 Visual Studio Mobile Center Preview Team Foundation Server 2017

Visual Studio 2013 Web开发、新增功能:“Browser Link”

微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013.下面我们体验下Visual Studio 2013 Web开发方面有哪些特性,具体可以参看http://www.asp.net/visual-studio/overview/2013/release-notes. 1..net framework 2.0/3.0/3.5/4.0/4.5/4.5.1

Visual Studio 2013 Web开发新特性

微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013.下面我们体验下Visual Studio 2013 Web开发方面有哪些特性,具体可以参看http://www.asp.net/visual-studio/overview/2013/release-notes. 1..net framework 2.0/3.0/3.5/4.0/4.5/4.5.1

微软Visual Studio "14" CTP 2 发布

对于在微软阵营下进行工作的团队来说,拥有最新版本的Visual Studio是提高效率最佳的选择,没有之一. 在本文中,我们就上个月发布的Visual Studio "14" CTP1和昨天发布的Visual Studio "14" CTP2进行详细发布说明梳理,供大家餐食: (一) Visual Studio "14" CTP 2版本: 微软于2014年7月8日发布了Visual Studio 14 (新Visual Studio版本的代号)的

Windows服务器Pyton辅助运维--03.安装Visual Studio 的 Python 开发插件 PTVS

PTVS (Python Tools for Visual Studio) http://pytools.codeplex.com/ 当前版本:2.1 RC PTVS (Python Tools for Visual Studio) 是一个开源项目,采用Apache 2.0许可发布.PTVS的主要特性包括:CPython.IronPython.Jython和PyPy:高级编辑功能如IntelliSense:多重构:内置REPL(read-eval-print loop)窗口:调试和分析功能,等等

[入门级] visual studio 2010 mvc4开发,用ibatis作为数据库访问媒介(一)

[入门级] visual studio 2010 mvc4开发,用ibatis作为数据库访问媒介(一) Date  周二 06 一月 2015 By 钟谢伟 Tags mvc4 / asp.net 示例下载 实现编程环境 安装visual studio 2010,由于mvc4并不是visual studio 2010默认的mvc版本,因此首先需要安装visual studio 2010 service package 1,然后安装mvc4即可,在安装visual studio 2010 serv

visual studio 2015 IOS开发连接mac时提示错误couldn't connect to xxxx, please try again的一个方法

本人使用虚拟机MAC.原本使用虚拟机中的VS2015连接正常没有问题. 但是当把MAC的虚拟机文件COPY到另一个机器上,提示“couldn't connect to xxxx,  please try again”. 经过查找和升级MAC中的Xamarin.ios都不行.后面尝试添加新的MAC(在VS的连接页面左下角有一个“add mac..."),直接输入MAC的IP,竟然连接上了. 分析原因可能是自动找到的使用MAC机器名的有些问题,但不确定.仅供各位参考. visual studio 2