There are many packages for minifying assets in web applications. A new one written by Andrew Davey (@andrewdavey) called Cassette offers some great features that help deliver not only CSS and JS bundling and minifcation, but also Coffee, SASS, LESS, as well as Html templates. The Html templates can also be pre-compiled if using jQuery Templates or KnockoutJS.
To get started with Cassette, run the following in the package manger in Visual Studio…
PM> Install-Package Cassette.Web
That command drops a file into your project directory called CassetteConfiguration. This file is used to add bundles. A bundle in cassette represents a group of assets, assets being the files to be used by your project.
public class CassetteConfiguration : ICassetteConfiguration
{
public void Configure(BundleCollection bundles, CassetteSettings settings)
{
bundles.AddPerIndividualFile
("public/css");
bundles.AddPerIndividualFile("public/javascripts");
bundles.Add("public/templates");
}
}
This tells Cassette which folders your assets are in.
Next in your layout you can reference the files by adding references to your bundles.
@{
Bundles.Reference("public/css/site.css");
Bundles.Reference("public/javascripts/libs/jquery-1.7.1.js");
Bundles.Reference("public/javascripts/libs/handlebars.js");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
@Bundles.RenderStylesheets()
</head>
<body>
@RenderBody()
@Bundles.RenderScripts()
</body>
</html>
The @Bundles.RenderScripts() actually renders your scripts, and the @Bundles.RenderStylesheets() renders the Css files.
One of the nice features that Cassette offers is Html Template rendering as well. Add this to your configuration…
bundles.Add("public/templates");
And this somewhere to your page…
@Bundles.RenderHtmlTemplates()
This will add script tags containing your Html code and wrap them in script tags with an id set to the filename.
Another great feature of Cassette is the ability to compile coffeescript! Simply add a .coffee file in your project and reference it with…
@{
Bundles.Reference("public/javascripts/app.coffee");
}
The CoffeeScript I wrote for my app is…
#@reference libs/jquery-1.7.1.js
movies = [
name:'Star Wars'
id: 1
,
name:'The Matrix'
id: 2
,
name:'Bourne Identity'
id: 3
]
$ ->
movieTmpl = Handlebars.compile $('#movie').html()
html = movieTmpl
movies: movies
$('#movieList').append html
And Cassette will automatically compile the CoffeeScript and place the JavaScript on the page. Note the #@reference libs/jquery-1.7.1.js tells Cassette that this file requires jQuery to be loaded first. You can do this in any JavaScript file in a similar fashion by having a reference comment in the top of the file. For example if a file needed both jQuery and Backbone to be loaded before it…
/// <reference path="jquery-1.7.1.js" />
/// <reference path="underscore.js" />
/*
Now you can safely use code that requires the above libraries
*/
The following is the output of this page so far…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table id="movieList">
</table>
<script src="/_cassette/asset/public/javascripts/libs/jquery-1.7.1.js?b47730ffaec4272a8a01756af2ef13ecea1c4e92" type="text/javascript"></script>
<script src="/_cassette/asset/public/javascripts/app.coffee?e8229d2c97b44b2722c0b3b6fd7c69ca967bdced" type="text/javascript"></script>
<script src="/_cassette/asset/public/javascripts/libs/handlebars.js?ec02162bf8cc6692ac06361e1c2e8b24aa2f66bf" type="text/javascript"></script>
<script id="movie" type="text/html">{{#each movies}}
<tr>
<td>
{{name}}
</td>
<td>
<a href="#/movies/{{id}}">Edit</a>
</td>
</tr>
{{/each}}
</script>
</body>
</html>
In order to have all of the scripts minify, simply change debug=”true” to false in the web.config under compilation. All your scripts will be nicely minified by AjaxMin and cached.
There are more features with Cassette, so be sure and check them out at http://getcassette.net/documentation/
