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的文件

posted @ 2012-12-21 14:28  LeonSky  阅读(274)  评论(3编辑  收藏  举报