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

    上班一年了还没有自己打包上传过APP,周五下班时项目经理手把手教了我一遍,我大致把流程在这里回顾一下: 1.首先要将svn上的代码拷贝一份到分支上,用终端操作:svn cp https://192.1 ...

  2. CALayer笔记

    1.Core Animation是跨平台的,支持IOS和Mac OS X环境 2.核心动画操作的对象不是UIView而是CALayer,CALayer是核心动画的基础, 可以做圆角.阴影.边框等效果 ...

  3. JAVA开发相关

    JAVA开发相关1. IntelliJ IDEA开发工具熟练使用2. Maven3. Spring框架(IoC.AOP) 1)数据库相关MyBatis 2)数据库连接池 3)事务.多数据源.跨数据库分 ...

  4. ios安装app提示【未受信任的企业级开发者】。在设置中信任此开发者

     最近在测试app,ios安装app后点击提示如下图: 解决方法: 1 点击 [设置] >[通用] >[设备管理]   2 点击企业级应用 > 信任该开发者 > 信任.设置之后 ...

  5. Linq Group By

    TableA { Id int, Name string, Group  int Score int } 从 Id Name Group Score 1 张三 A 70 2 李四 A 80 3 王五 ...

  6. linux(centos)下挂载nefs文件系统

    有时候,在将硬盘插到Linux系统上,挂载硬盘时一直提示:unknown filesystem type 'ntfs'.在尝试网上的方法也遇到了一些问题. 这是有的 linux 发行版并不默认支持挂载 ...

  7. C#导入Excel遇到数字字母混合列数据丢失解决

    错误重现: ----------------------------------------------------------------------- 在导入Excel读取数据时,其中的一个字段保 ...

  8. Log4j简介

    Log4J日志配置详解   一.Log4j简介Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和 ...

  9. 【LeetCode OJ】Validate Binary Search Tree

    Problem Link: https://oj.leetcode.com/problems/validate-binary-search-tree/ We inorder-traverse the ...

  10. Python——Day3知识点——文件操作

    一.打开文件 文件句柄 = open('文件路径', '模式') 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作. 打开文件的模式有: r ...