怎样使用 ASP.NET Optimization Bundling压缩样式表和脚本

1.首先使用NuGet安装Optimization Bundling.

右键Web项目，选择Manage NuGet Packages,搜索安装ASP.NET Optimization - Bundling.安装好后会直接添加引用到Web项目中，这就是NuGet的强大之处，了解NuGet可以参考这篇文章：http://kb.cnblogs.com/kb/143190/

2.写一个BundelConfig类把需要优化压缩的样式表和脚本添加进来。把这个类放在App_Start中。

using System.Web;
using System.Web.Optimization;

namespace AgileThought.ERP.WebUI
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery.unobtrusive-ajax.js"));

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

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

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            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.theme.css"));

            bundles.Add(new StyleBundle("~/Content/Theme/LWPTheme/css").Include(
                "~/Content/theme/LWPTheme/*.css"
                ));


        }
    }
}

3.在Global中的Application_Start方法中的添加以下代码：

protected void Application_Start()
{
     BundleConfig.RegisterBundles(BundleTable.Bundles);          
}

 

4.在模板页中添加样式表和脚本：

<%= Styles.Render("~/Content/theme/LWPTheme/css") %>
<%= Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval", "~/bundles/jqueryui") %>