asp.net mvc3 css/js压缩合并---持续更新-CSDN博客

1，CSS/JS压缩：

我下面的合并是用了combres的组件，这里我就不用这个实现了，推荐一个可以像vs里面的cs/aspx这样编辑的一个css/js编辑器。

名称：Chirpy

网站：http://chirpy.codeplex.com/

英文介绍：http://www.weirdlover.com/2011/03/03/chirpy-v2/

描述：实现css/js文件像编辑cs/aspx这样的方式编辑未压缩过的css/js和已压缩为min.css/js。只需要把css/js的名称按照设定的规则命名，chirpy会自动为该文件生成一个min压缩过的版本，而且已子的方式显示。真相见下图：

使用：首先在codeplex下载，如果有安装vs2010可以直接安装组件，然后重启vs2010，接着打开工具-》选项：

绿色框里面的就是你可以自定义未压缩的文件名称。左边还有javascript设置等，还有很多功能哦！现在你只需要把css/js.改成yui.css/yui.js。我这里的yui使用的是yahoo compressor进行压缩，你可以选择右侧下边的hybird.....等。

2，css/js合并，使用combres

名称：Combres

网站：http://nuget.codeplex.com/releases/view/64974

英文介绍：http://www.codeproject.com/KB/aspnet/combres2.aspx

描述：如果是mvc3需要结合网站的documentation进行使用，默认的英文介绍使用的是asp.net，mvc2。mvc3的设置和使用过程还是有些不同的，不同看英文介绍就可以了。我这里介绍mvc3的使用，模板引擎是razor的。

使用：

(1)下载combres，解压得到。也可以不下载，直接使用vs2010的NuGet功能，这里我就不下载了;

(2)新建mvc3项目，打开vs2010，视图-》其他窗口-》 Package Manager Console;

(3)输入Install-Package Combres.Mvc,自动安装combres

(4)安装完成，会自动生成App_Data/combres.xml，这个就是设置压缩/合并的文件配置。具体配置看英文介绍就可以了，一下是我的配置事例：

 
   view plain 
   print 
   ? 
  
    <?xml version="1.0" encoding="utf-8" ?>  
 <combres xmlns="urn:combres">  
   <resourceSets url="~/combres.axd" defaultDuration="30"  
                                 defaultVersion="auto"  
                                 defaultDebugEnabled="auto" >  
     <resourceSet name="siteBaseCss" type="css">  
       <resource path="~/Content/themes/base/jquery.ui.accordion.css" />  
       <resource path="~/Content/themes/base/jquery.ui.autocomplete.css" />  
       <resource path="~/Content/themes/base/jquery.ui.base.css" />  
       <resource path="~/Content/themes/base/jquery.ui.button.css" />  
       <resource path="~/Content/themes/base/jquery.ui.core.css" />  
       <resource path="~/Content/themes/base/jquery.ui.datepicker.css" />  
       <resource path="~/Content/themes/base/jquery.ui.dialog.css" />  
       <resource path="~/Content/themes/base/jquery.ui.progressbar.css" />  
       <resource path="~/Content/themes/base/jquery.ui.resizable.css" />  
       <resource path="~/Content/themes/base/jquery.ui.selectable.css" />  
       <resource path="~/Content/themes/base/jquery.ui.slider.css" />  
       <resource path="~/Content/themes/base/jquery.ui.tabs.css" />  
       <resource path="~/Content/themes/base/jquery.ui.theme.css" />  
     </resourceSet>  
     <resourceSet name="siteCss" type="css">  
       <resource path="~/Content/Site.css" />  
     </resourceSet>  
     <resourceSet name="siteJs" type="js">  
       <resource path="~/Scripts/jquery-1.5.1.js" />  
       <resource path="~/Scripts/jquery-ui-1.8.11.js" />  
     </resourceSet>  
   </resourceSets>  
 </combres>  

(5)删除 AppStart_Combres.cs，以及移除WebActivetor的引用。

(6)打开global.asax添加using Combres；的引用。在RegisterRoutes第一行添加

 
   view plain 
   print 
   ? 
  
 routes.AddCombresRoute("Combres");  

(7)页面这样使用：

 
   view plain 
   print 
   ? 
  
 @using Combres.Mvc;  
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta charset="utf-8" />  
     <title>@ViewBag.Title</title>  
     @Html.CombresLink("siteCss")  
     @Html.CombresLink("siteBaseCss")  