2016-04-07

C# MVC + Cassette

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" />
at

沒有留言:

張貼留言

你好！歡迎你在我的 Blog 上留下你寶貴的意見。