ASP.NET MVC4空MVC项目添加脚本压缩和合并

本文介绍的是建立的空MVC项目如何添加该功能

1.选中MVC项目,右键>"管理解决反感的NuGet程序包"

2.在"联机"中在线搜索搜索"Optimization",点击"安装".

3.在App_Start文件夹中添加类文件,类名为:BundleConfig,顶部添加"System.Web.Optimization" 引用.类里面添加一个静态方法,参数为"

BundleCollection"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace Web
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            //添加一个JS的压缩
            //                                              请求路径             真实路径
            bundles.Add(new ScriptBundle("~/Script/index").Include( "~/Script/index.js"));

            //添加多个JS合并并且压缩
            //                                              请求路径                                     真实路径                        真实路径
            bundles.Add(new ScriptBundle("~/Script/common").Include("~/Script/jquery.js", "~/Script/common.js"));

            //添加一个css压缩
            //                                              请求路径             真实路径                  
            bundles.Add(new StyleBundle("~/Style/index").Include("~/Style/index.css"));

            //添加多个css合并并且压缩
            //                                              请求路径                                     真实路径                        真实路径
            bundles.Add(new StyleBundle("~/Style/common").Include("~/Style/common.css","~/Style/header.css"));

        }
    }
}

注意：除非设置EnableOptimizations为true或设置Web.config文件中compilption 节点的debug属性为false，否则程序是不会合并和压缩文件的。此外，系统也不会选择压缩过的脚本，而是选择调试版本。 EnableOptimizations属性的设置将会覆盖Web.config中的设置。

在 Web.config文件中compilation节点设置debug 的值可以开启或关闭压缩和合并功能。在下面的XML中， debug设置值为true，可以禁用脚本压缩和合并功能。

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

如果要启用脚本压缩和合并，则设置debug 为false 。你可以通过BundleTable 类的EnableOptimizations 属性来覆盖Web.config中的设置。下面的代码演示了如果通过BundleTable 来覆盖Web.config文件中的设置：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace Web
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            //添加一个JS的压缩
            //                                              请求路径             真实路径
            bundles.Add(new ScriptBundle("~/Script/index").Include( "~/Script/index.js"));

            //添加多个JS合并并且压缩
            //                                              请求路径                                     真实路径                        真实路径
            bundles.Add(new ScriptBundle("~/Script/common").Include("~/Script/jquery.js", "~/Script/common.js"));

            //添加一个css压缩
            //                                              请求路径             真实路径                  
            bundles.Add(new StyleBundle("~/Style/index").Include("~/Style/index.css"));

            //添加多个css合并并且压缩
            //                                              请求路径                                     真实路径                        真实路径
            bundles.Add(new StyleBundle("~/Style/common").Include("~/Style/common.css","~/Style/header.css"));

            //启用压缩 合并
            BundleTable.EnableOptimizations = true;
        }
    }
}

4.在项目根目录中的"Global.asax"中的引用"System.Web.Optimization",在"Application_Start"方法中添加" BundleConfig.RegisterBundles(BundleTable.Bundles);"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Optimization;

namespace Web
{
    // 注意: 有关启用 IIS6 或 IIS7 经典模式的说明，
    // 请访问 http://go.microsoft.com/?LinkId=9394801
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        
        }
    }
}

5.打开"Views"文件夹中的"web.config",找到截图中的节点,添加"<add namespace="System.Web.Optimization"/>"

6.在视图中引用:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>View1</title>
    <!--引用css-->
 @Styles.Render("~/Style/common")
    <!--引用JS-->
 @Scripts.Render("~/Script/index")
</head>