怎样使用 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") %>