2015-04-16

ASP.NET MVC 手動利用System.Web.Optimization綁定壓縮JS與CSS

6852
0
.NET相關

摘要:ASP.NET MVC 手動利用System.Web.Optimization綁定壓縮JS與CSS

網站上對CSS與JS檔的綁定與壓縮的好處,我想在網路上各位前輩都已經解釋的很清楚

小弟就不再此贅述,會放至參考連結中

在visual studio中選擇MVC專案>基本

在App_Start的資料夾中就會有BundleConfig.cs這支程式,

預設都會將Script內的資料做打包!

但如果是選擇產一個空的網站,則不會`引用System.Web.Optimization

當然也不會有BundleConfig.cs這支程式

本篇就透過建立空網站的專案,運用NUGET手動的方式安裝System.Web.Optimization與手動打包與壓縮JS與CSS

如果有任何地方解釋有誤,

也請各位前輩不吝指正錯誤.

首先,先新增專案

選擇空白網站

先至Nuget取得我們預安裝的元件位置

連結:https://www.nuget.org/packages/Microsoft.AspNet.Web.Optimization/

透過套件管理主控台安裝System.Web.Optimization

在App_start中加入新增類別

新增>>BundleConfig.cs

接下來就開始刻CODE嚕

using System.Web.Optimization;

namespace MinifiedMVC_Sample
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            /*new ScriptBundle("自己指定的JS檔虛擬位置")
              .Include("實體JS檔案存放位置")*/
            bundles.Add(new ScriptBundle("~/bundles/jquery")
                  .Include("~/Scripts/jquery-{version}.js"
                        ));

            /*new StyleBundle("自己指定的css檔虛擬位置")
              .Include("實體css檔案存放位置")*/
            bundles.Add(new StyleBundle("~/bundles/css")
              .Include("~/Content/themes/base/autocomplete.css",
                       "~/Content/themes/base/button.css"
                    ));

            //當設定為true時,輸出則會顯示壓縮後的檔案
            //當為false,輸出則顯示個別檔案
            BundleTable.EnableOptimizations = true;
     
        }
    }
}

接著在Global.asax中註冊事件

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

namespace MinifiedMVC_Sample
{
    // 注意: 如需啟用 IIS6 或 IIS7 傳統模式的說明，
    // 請造訪 http://go.microsoft.com/?LinkId=9394801
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            //再此註冊RegisterBundles事件
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

最後在View中的Header.cshtml 加入