System.Web.Optimization對腳本和樣式表的操做

這個也是本章重點向描述的部分，首先咱們可使用VS2012RC來新建一個MVC4.0項目，版本能夠爲4.0或4.5。在Global.asax文件代碼中，咱們發現已經把過濾器，路由器，以及對樣式表和腳本捆綁（Bundles）移到了其餘頁面，就是在根目錄下的App_Start文件夾內。代碼只是簡簡單單的幾行，代碼以下

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace MVC4
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801

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

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

而在App_Start目錄下多了3個文件，他們分別是RilterConfig.cs，RouteConfig.cs以及BundleConfig.cs文件。在BETA版本中仍是直接寫在Global.asax文件中，從名稱上就能夠知道他們各自的功能，今天咱們主要了解BundleConfig.cs文件的內容和功用。

 

在BundleConfig.cs文件中，包含了一些應用程序中使用的腳本和樣式表的文件路徑，其中可使用通配符，具體代碼以下所示：

 

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

namespace MVC4
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-1.*"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui*"));

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

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

 

這些都是關於Bundle的應用，從代碼中就能夠看到，Bundle實例對象（Script和Style）中包含一個虛擬目錄，這個目錄能夠在頁面中使用時做爲惟一鍵引入。固然在實現優化時，這個虛擬目錄將呈如今前臺頁面中，這個後面將繼續講述。下面咱們來看一下在代碼中如何使用他們，在System.Web.Optimization程序集中包含了Scripts和Styles兩個類，分別用於呈現Bundle集合中的腳本和樣式表，代碼以下：

 

@Styles.Render("~/Content/themes/base/css", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")

 

從上面就能夠看出，往頁面中引入了兩個捆綁的樣式表和一個腳本，這些引入是包含了全部Include方法內的文件，調試一下看看前臺HTML代碼就知道了。而他們中的另外一個方法Url則是對外部文件的引入，例如CDN中的文件，如：Google等等API文件。

 

四：對樣式表和腳本的優化

這項其實也是包含在三中的，我獨立出來，最主要感受是我以爲他是個不錯的傢伙。代碼簡單，可是很是的適用，不知道你們有沒有使用過AjaxMinify這個東東，能夠把腳本編譯，壓縮成最小的內容。不過都是要使用命令的，然而在MVC4.0中System.Web.Optimization已經包含了這個東東，他們就是JsMinify和CssMinify，不要小看這兩個類，雖然公開的方法就兩個。

按照上述方法是用Scripts和Styles將腳本和樣式表引入頁面時，無需修改任何代碼就能夠將腳本和樣式表編譯壓縮輸入到客戶端，這樣不只能夠有效的增長JSHack的難度以及下降文件的大小。爲了達到這個目的，咱們只須要將BundleTable中的一個屬性設置爲true便可，代碼以下：

 

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace MVC4
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleTable.EnableOptimizations = true;
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}