Asp.Net MVC4 BundleTable 之 Javascript和css 打包压缩

1、首先我们创建一个Asp.Net MVC4 项目，项目模板选择 Internet application;

　　发现Global.asax 文件有所变化，较之以前的版本可谓清新养眼：

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            AuthConfig.RegisterAuth();
        }
    }

　　原来是把不同的配置放到了相应的静态方法中去了，这些类都在App_Start目录下面；

2、我们重点看一下BundleTable

　　BundleConfig.RegisterBundles(BundleTable.Bundles);

   　　也就是 App_Start 目录下的 BundleConfig.cs；

3、打包压缩脚本：

代码：

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

页面使用方法：

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/jqueryval")

呈现形态：

　　WebConfig设置为：<compilation debug="false" targetFramework="4.0"/>

　　<script src="/bundles/jquery?v=1A_Qqa6eu1hIFc9O--lfxRqvbqGj9Zd6uAr93zLdrWM1"></script>
　　<script src="/bundles/jqueryui?v=5dJynsVuw00cy-rGv-qNSIrreIZxzp0Zuknkbqgbx-s1"></script>
　　<script src="/bundles/jqueryval?v=-tc2QZUKsI5XsBJSyox6jU38dSPE468EEX0oQlQTeSE1"></script>

使用CND

  bundles.UseCdn = true;
  bundles.Add(new ScriptBundle("~/bundles/jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js").Include(
                        "~/Scripts/jquery-{version}.js"));

 

4、打包压缩CSS

 代码：

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

页面使用方法：

      @Styles.Render("~/Content/css")
      @Styles.Render("~/Content/themes/base/css")

呈现形态：

 　　WebConfig设置为：<compilation debug="false" targetFramework="4.0"/>

　　<link href="/Content/css?v=WMr-pvK-ldSbNXHT-cT0d9QF2pqi7sqz_4MtKl04wlw1" rel="stylesheet"/>
　　<link href="/Content/themes/base/css?v=ps9Ga9601PrzNA2SK3sQXlYmNW3igUv5FOdOPWptyus1" rel="stylesheet"/>

注意事项：

　　如果Css中使用的图片采用了相对定位，要注意 打包前和打包后的相对位置变化：

　　如： /Content/themes/base/css  和 /Content/themes/base/jquery.ui.dialog.css  没有变化；

　　多个css打包时如果还是采用相对位置的资源，也应该是想对位置相同的css打包到一起；

5、排除列表：

　　bundles.IgnoreList 默认包含以下项目，以下项目添加之后自动被忽略；

        Pattern    ".intellisense.js"    string
        Pattern    "-vsdoc.js"    string
        Pattern    ".debug.js"    string
        Pattern    ".min.js"    string
        Pattern    ".min.css"    string

　　如：bundles.Add(new ScriptBundle("~/bundles/myscript").Include( "~/Scripts/myscript-min.js")); 默认将背忽略。
　

自定义排除列表：

bundles.IgnoreList.Clear();
bundles.IgnoreList.Ignore("*-vsdoc.js");
bundles.IgnoreList.Ignore("*intellisense.js");