ASP.NET MVC Javascript與css合併壓縮方法ScriptBundle與StyleBundle
一開始先新增一個預設的MVC專案以方便解說，
有關ASP.NET MVC Javascript與css合併壓縮功能
主要程式在於專案裡的App_Start \ BundleConfig.cs檔案裡
預設範例程式為
using System.Web;
using System.Web.Optimization;
namespace WebApplication2
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// 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 ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
}
由上範例可看出一些值得注意的地方
1、ScriptBundle與StyleBundle
如範例：new ScriptBundle("~/bundles/jquery")，
表示新增一個腳本設定，而括號內的bundles/jquery為虛擬路徑，
可為任意字串，但為方便管理建議還是依照預設格式命名。
而new StyleBundle("~/Content/css")為新增一個樣式設定，
其虛擬路徑的特性也是跟ScriptBundle一樣的。
2、Include與bundles.add
由上一點說明new ScriptBundle與StyleBundle只是新增設定而已，
設定內容要利用Include來把相關檔案包進來，
例如：Include("~/Scripts/jquery-{version}.js")
代表要Include所有符合的網站實體路徑~/Scripts/jquery-{version}.js檔名
使用{version}可以幫助我們自動找尋符合規則的檔案，
讓我們不再特別花精神去update改版本號。
當Bundle設定好與Include也包好時，
則做bundles.add將之註冊在Bundle的實體上。
3、再來看View的部分，Shared \ _Layout.cshtml
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - My ASP.NET Application</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> </html>
經由BundleConfig合併壓縮好的檔案如要使用，
則應在_Layout.cshtml頁面做呼叫，
如@Styles.Render("~/Content/css")與@Scripts.Render("~/bundles/modernizr")，
表示分別呼叫樣式與腳本檔，而"~/Content/css"與"~/bundles/modernizr"則表示虛擬路徑，
該虛擬路徑於BundleConfig.cs就已經指定好了。
參考資料：