谁不想让自己的网站速度更快?为此需要多方面的优化,但优化又会增加开发工作量。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

感谢阅读

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

  1. Visual Studio 2012 应用软件开发新方式

    微软正式发布Visual Studio 2012 应用软件开发新方式 2012-09-13 09:54 51CTO.com 我要评论(0) 字号:T | T “现在,开发者将有更好的机会开发与云服务连 ...

  2. 最强 IDE Visual Studio 2017 正式版发布

    Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等 ...

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

    Visual Studio 2017 正式版发布,该版本不仅添加了实时单元测试.实时架构依赖关系验证等新特性,还对许多实用功能进行了改进,如代码导航.IntelliSense.重构.代码修复和调试等等 ...

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

    微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...

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

    微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...

  6. Visual Studio 2017正式版发布全纪录

    又是一年发布季,微软借着Visual Studio品牌20周年之际,于美国太平洋时间2017年3月7日9点召开发布会议,宣布正式发布新一代开发利器Visual Studio 2017.同时发布的还有 ...

  7. [翻译] Visual Studio 2019 RC版发布

    [翻译] Visual Studio 2019 RC版发布 原文: Visual Studio 2019 Release Candidate (RC) now available 今天,我们将分享 V ...

  8. Visual Studio 2013 Web开发新特性

    微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...

  9. Visual Studio 2013 Web开发

    cnbeta新闻:微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Ser ...

随机推荐

  1. VM virtuaBox异常关机启动不了的解决方案

    事件回放 我的物理机是win7,上面装了一个VM virtualBox,用来装Centos,有天物理机非正常关闭,导致VM virtuaBox异常关机启动不了,如下: 确实找不到这个vm_liang. ...

  2. 【转】File类应用 - FilenameFilter 和 FileFilter

    FilenameFilter & FileFilter FilenameFilter 和 FileFilter 都是用来过滤文件,例如过滤,以.jpg或者.java结尾的文件,通过看他们的源码 ...

  3. Linux/Unix 线程同步技术之互斥量(1)

    众所周知,互斥量(mutex)是同步线程对共享资源访问的技术,用来防止下面这种情况:线程A试图访问某个共享资源时,线程B正在对其进行修改,从而造成资源状态不一致.与之相关的一个术语临界区(critic ...

  4. ubuntu下code::blocks+opengl的使用与配置

    操作系统:Ubuntu 15.04 gcc version 4.9.2 opengl安装 sudo apt-get install build-essential libgl1-mesa-dev li ...

  5. 简述Git(Linux、Android~~开源)

    Git——源代码管理软件,Android及Linux内核,驱动开发的过程中涉及的大量的源代码,都由Git管理 (一)安装Git Ubuntu Linux10.10或更新的版本,使用下面命令来安装Git ...

  6. JS总结 本地对象1

    Data对象 用于获取当前时间的对象 例如,要用该对象输出:  2016年9月7日 10:57 星期三   这样格式的时间 var time=new Date(), month=time.getMon ...

  7. c++继承,多态,重载的作用

    继承:用户通过继承,可以从一个类派生出多个子类,减少了重新定义类的次数,并且在不影响子类的相应功能的情况下,保护了基类中的数据安全性.用户还可以在子类中,使用与基类相同的行为实现不同的功能,因此,使用 ...

  8. python bytes to string

    python bytes 转化成 string 会遇到如下错误: codec can't decode byte 0xff in position 5: illegal multibyte seque ...

  9. [转] Jenkins实战演练之Windows系统节点管理

    [前提] 通过<Jenkins实战演练之Windows服务器快速搭建>(http://my.oschina.net/iware/blog /191818)和<Jenkins实战演练之 ...

  10. Android中常见功能包描述(转)

    在Android中,各种包写成android.*的方式,重要包的描述如下所示:android.app :提供高层的程序模型.提供基本的运行环境android.content:包含各种的对设备上的数据进 ...