Cassette | Asset bundling for .NET web apps

Simple install via nuget

Also choose from a wide selection of plug-ins that enhance Cassette.

Install-Package Cassette.Aspnet

Install-Package Cassette.Less
Install-Package Cassette.Sass
Install-Package Cassette.CoffeeScript

View all plug-ins

Elegant configuration API

Tell Cassette how to bundle your assets with just a few lines of code.

Cassette does the hard work of finding the files, sorting, compiling and minifying.

public class CassetteConfiguration : IConfiguration<BundleCollection>
{
    public void Configure(BundleCollection bundles)
    {
        bundles.Add<StylesheetBundle>("Content", bundle => bundle.EmbedImages());
        bundles.AddPerSubDirectory<ScriptBundle>("Scripts");
    }
}

Reference and Render

Cassette's Bundles helper works in view pages, layouts and partials.

Reference the assets or bundles you directly require.

Tell Cassette where to render the HTML.

@{
  Bundles.Reference("content");
  Bundles.Reference("scripts/app/page.js");
}
<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  @Bundles.RenderStylesheets()
</head>
<body>
  ...
  @Bundles.RenderScripts()
</body>
</html>

Debug runtime output

When debug="true" in Web.config:

Cassette detects file references.
All the required scripts are included in the correct order.
The hash of each file is appended to each URL as a "cache-breaker".

The base-64 encoded SHA-1 hash is used.

<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  <link href="/cassette.axd/asset/content/reset.css?3W7p4f6HTcITLRa0Cxw2tJxQQAM=" rel="stylesheet" type="text/css"/>
  <link href="/cassette.axd/asset/content/site.css?X4W1S2W16tuRbadn-SKWmE_nJT0=" rel="stylesheet" type="text/css"/>
</head>
<body>
  ...
  <script src="/cassette.axd/script/scripts/lib/jquery.js?JD8viSwogmMYMx55J-RsipVxTjo=" type="text/javascript"></script>
  <script src="/cassette.axd/script/scripts/lib/jquery-ui.js?PlxtfG4Jll0234wePZ3KZGLEHsE=" type="text/javascript"></script>
  <script src="/cassette.axd/script/scripts/app/tools.js?hxLaF5kjfuSZPND55dxgnv8BVos=" type="text/javascript"></script>
  <script src="/cassette.axd/script/scripts/app/widgets.js?vDM6NPLt8F_cyE-4QxtJE-Jj9RY=" type="text/javascript"></script>
  <script src="/cassette.axd/script/scripts/app/page.js?idIQWW6yfM-kcZLxL4w8sJbmMYA=" type="text/javascript"></script>
</body>
</html>

Production runtime output

With a single change to Web.config, debug="false", Cassette switches into high performance mode.

Cassette concatenates and minifies the scripts into "bundles".
HTTP output is compressed.
Aggressive cache headers are sent. So browsers download each bundle only once.
Hash included in the URL. So new versions have different URLs.

<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  <link href="/cassette.axd/style/1mN6dL9x3GVgFSN2kzWWoPiWukg=/content" rel="stylesheet" type="text/css"/>
</head>
<body>
  ...
  <script src="/cassette.axd/script/LNWSFkY-CptfRoJ5Tr7AWA3obwY=/scripts/lib" type="text/javascript"></script>
  <script src="/cassette.axd/script/rAcu6xcghTyKVFDzaXr8obTTJ6Y=/scripts/app" type="text/javascript"></script>
</body>
</html>

So much more...

This introduction has only scratched the surface of what Cassette can do.

Treat your client-side HTML templates as bundles.
Add CoffeeScript support by installing the Cassette.CoffeeScript nuget package.
Add Less and Sass support by installing Cassette.Less and Cassette.Sass.
Cassette provides extensible bundle "pipelines" that allow full control over how bundles are processed.

Get Cassette! It's free, open source software, distributed under the MIT License.

Download