Cassette 與 MVC 預設的 Bundle 最大的差異就是會自動轉換 CSS 的圖片網址。缺點就是開發時 F5 啟動專案會變慢。
NuGet 安裝
- Cassette.Aspnet
- Cassette.Views
- Cassette
Web.config
基本上安裝完就會自動配置以下設定,但可以在確認一下。
<configuration>
<configSections>
<section name="cassette"
type="Cassette.CassetteConfigurationSection, Cassette"
requirePermission="false"
/>
</configSections>
<system.web>
<pages>
<namespaces>
<add namespace="Cassette.Views" />
</namespaces>
</pages>
<httpModules>
<add name="CassetteHttpModule"
type="Cassette.Aspnet.CassetteHttpModule, Cassette.Aspnet"
/>
</httpModules>
<httpHandlers>
<!-- 用來處理綑綁打包的處理器 -->
<add path="cassette.axd"
verb="*"
type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet"
/>
</httpHandlers>
</system.web>
<system.webServer>
<!-- 保留 httpHandlers(IIS6) 及 handlers(IIS7) 需要關閉驗證 -->
<validation validateIntegratedModeConfiguration="false" />
<modules>
<add name="CassetteHttpModule"
type="Cassette.Aspnet.CassetteHttpModule, Cassette.Aspnet"
/>
</modules>
<handlers>
<!-- 用來處理綑綁打包的處理器 -->
<add name="CassetteHttpHandler"
path="cassette.axd"
verb="*"
allowPathInfo="true"
preCondition="integratedMode"
type="Cassette.Aspnet.CassetteHttpHandler, Cassette.Aspnet"
/>
</handlers>
</system.webServer>
<!-- For configuration options: http://getcassette.net/documentation/v2/web-config -->
<cassette rewriteHtml="false" />
</configuration>
Views/Web.config
增加給 cshtml 用的 namespace
<configuration>
<system.web.webPages.razor>
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="Cassette.Views" />
</namespaces>
</pages>
</system.web.webPages.razor>
</configuration>
CassetteConfiguration.cs
public class CassetteBundleConfiguration : IConfiguration<BundleCollection>
{
public void Configure(BundleCollection bundles)
{
bundles.AddPerIndividualFile<StylesheetBundle>("Content");
bundles.AddPerIndividualFile<ScriptBundle>("Scripts");
bundles.Add<StylesheetBundle>("Styles/Bundles", new string[]
{
"~/Scripts/bootstrap/css/bootstrap.css",
"~/Scripts/bootstrap/css/bootstrap-theme.css",
//...
});
bundles.Add<ScriptBundle>("Scripts/Bundles", new string[]
{
"~/Scripts/jquery/jquery-1.12.2.js",
"~/Scripts/jquery.validate/jquery.validate-1.12.0.js",
//...
});
}
}
_Layout.cshtml
<!DOCTYPE html>
@{
Bundles.Reference("Styles/Bundles");
Bundles.Reference("Scripts/Bundles");
}
<html>
<head>
@Bundles.RenderStylesheets()
</head>
<body id="DialogLayout">
@Bundles.RenderScripts()
</body>
</html>
Release Mode
當 Web.config 的 compilation debug="false" 就會壓縮綑綁。
<compilation debug="false" targetFramework="4.5" />