ASP.NET MVC 4.0 随笔记录

使用System.Web.Optimization对脚本和样式表的操作

这个也是本章重点向描述的部分，首先我们可以使用VS2012RC来新建一个MVC4.0项目，版本可以为4.0或4.5。在Global.asax文件代码中，我们发现已经把过滤器，路由器，以及对样式表和脚本捆绑（Bundles）移到了其他页面，就是在根目录下的App_Start文件夹内。代码只是简简单单的几行，代码如下：

 1  using System;  2  using System.Collections.Generic;  3  using System.Configuration;  4  using System.Data.Entity;  5  using System.Data.Entity.Infrastructure;  6  using System.Linq;  7  using System.Web;  8  using System.Web.Http;  9  using System.Web.Mvc; 10  using System.Web.Optimization; 11  using System.Web.Routing; 12  13  namespace MVC4 14 { 15      //  Note: For instructions on enabling IIS6 or IIS7 classic mode,  16       //  visit  http://go.microsoft.com/?LinkId=9394801 17  18      public  class MvcApplication : System.Web.HttpApplication 19     { 20          protected  void Application_Start() 21         { 22             AreaRegistration.RegisterAllAreas(); 23  24             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); 25             RouteConfig.RegisterRoutes(RouteTable.Routes); 26             BundleConfig.RegisterBundles(BundleTable.Bundles); 27         } 28     } 29 }

而在App_Start目录下多了3个文件，他们分别是RilterConfig.cs，RouteConfig.cs以及BundleConfig.cs文件。在BETA版本中还是直接写在Global.asax文件中，从名称上就可以知道他们各自的功能，今天我们主要了解BundleConfig.cs文件的内容和功用。

 

在BundleConfig.cs文件中，包含了一些应用程序中使用的脚本和样式表的文件路径，其中可以使用通配符，具体代码如下所示：

 1  using System.Web;  2  using System.Web.Optimization;  3   4  namespace MVC4  5 {  6      public  class BundleConfig  7     {  8          public  static  void RegisterBundles(BundleCollection bundles)  9         { 10             bundles.Add( new ScriptBundle( " ~/bundles/jquery ").Include( 11                          " ~/Scripts/jquery-1.* ")); 12  13             bundles.Add( new ScriptBundle( " ~/bundles/jqueryui ").Include( 14                          " ~/Scripts/jquery-ui* ")); 15  16             bundles.Add( new ScriptBundle( " ~/bundles/jqueryval ").Include( 17                          " ~/Scripts/jquery.unobtrusive* ", 18                          " ~/Scripts/jquery.validate* ")); 19  20             bundles.Add( new ScriptBundle( " ~/bundles/modernizr ").Include( 21                          " ~/Scripts/modernizr-* ")); 22  23             bundles.Add( new StyleBundle( " ~/Content/css ").Include( " ~/Content/site.css ")); 24  25             bundles.Add( new StyleBundle( " ~/Content/themes/base/css ").Include( 26                          " ~/Content/themes/base/jquery.ui.core.css ", 27                          " ~/Content/themes/base/jquery.ui.resizable.css ", 28                          " ~/Content/themes/base/jquery.ui.selectable.css ", 29                          " ~/Content/themes/base/jquery.ui.accordion.css ", 30                          " ~/Content/themes/base/jquery.ui.autocomplete.css ", 31                          " ~/Content/themes/base/jquery.ui.button.css ", 32                          " ~/Content/themes/base/jquery.ui.dialog.css ", 33                          " ~/Content/themes/base/jquery.ui.slider.css ", 34                          " ~/Content/themes/base/jquery.ui.tabs.css ", 35                          " ~/Content/themes/base/jquery.ui.datepicker.css ", 36                          " ~/Content/themes/base/jquery.ui.progressbar.css ", 37                          " ~/Content/themes/base/jquery.ui.theme.css ")); 38         } 39     } 40 }

这些都是关于Bundle的应用，从代码中就可以看到，Bundle实例对象（Script和Style）中包含一个虚拟目录，这个目录可以在页面中使用时作为唯一键引入。当然在实现优化时，这个虚拟目录将呈现在前台页面中，这个后面将继续讲述。下面我们来看一下在代码中如何使用他们，在System.Web.Optimization程序集中包含了Scripts和Styles两个类，分别用于呈现Bundle集合中的脚本和样式表，代码如下：

1         @Styles.Render( " ~/Content/themes/base/css ",  " ~/Content/css ") 2         @Scripts.Render( " ~/bundles/modernizr ")

从上面就可以看出，往页面中引入了两个捆绑的样式表和一个脚本，这些引入是包含了所有Include方法内的文件，调试一下看看前台HTML代码就知道了。而他们中的另一个方法Url则是对外部文件的引入，例如CDN中的文件，如：Google等等API文件。

 

四：对样式表和脚本的优化

这项其实也是包含在三中的，我独立出来，最主要感觉是我觉得他是个不错的家伙。代码简单，但是非常的适用，不知道大家有没有使用过AjaxMinify这个东东，可以把脚本编译，压缩成最小的内容。不过都是要使用命令的，然而在MVC4.0中System.Web.Optimization已经包含了这个东东，他们就是JsMinify和CssMinify，不要小看这两个类，虽然公开的方法就两个。

按照上述方法是用Scripts和Styles将脚本和样式表引入页面时，无需修改任何代码就可以将脚本和样式表编译压缩输入到客户端，这样不仅可以有效的增加JSHack的难度以及降低文件的大小。为了达到这个目的，我们只需要将BundleTable中的一个属性设置为true即可，代码如下：

 1  using System;  2  using System.Collections.Generic;  3  using System.Configuration;  4  using System.Data.Entity;  5  using System.Data.Entity.Infrastructure;  6  using System.Linq;  7  using System.Web;  8  using System.Web.Http;  9  using System.Web.Mvc; 10  using System.Web.Optimization; 11  using System.Web.Routing; 12  13  namespace MVC4 14 { 15      //  Note: For instructions on enabling IIS6 or IIS7 classic mode,  16       //  visit  http://go.microsoft.com/?LinkId=9394801 17  18      public  class MvcApplication : System.Web.HttpApplication 19     { 20          protected  void Application_Start() 21         { 22             AreaRegistration.RegisterAllAreas(); 23              24             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); 25             RouteConfig.RegisterRoutes(RouteTable.Routes); 26             BundleTable.EnableOptimizations = true; 27             BundleConfig.RegisterBundles(BundleTable.Bundles); 28         } 29     } 30 }

是不是很神奇啊，上面红色字体的就是我们要加入的一行代码。关于ASP.NET 4.5 MVC 4.0还有很多值得我们去挖掘，由于我不是一个专业的学术研究者，写的文章不够有条理，思路都是想到那些到哪，没有时间来规范这个从易到难或什么的来书写，给各位带来不好的浏览效果表示歉意。

资源文件会自己过滤的规则

后台跟踪了一下，发现过滤了后缀名为 .intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css的文件

转载于:https://www.cnblogs.com/leonsky/archive/2012/12/21/2827917.html

相关资源：JAVA上百实例源码以及开源项目