Documentation

Bundle Descriptor File

As an alternative to adding special reference comments into your assets, Cassette supports a "bundle descriptor file". Adding a file called bundle.txt to a bundle folder, alongside your assets, allows you to manually define the order of assets in the bundle.

This is especially useful when creating a bundle of third-party scripts. It's not ideal to modify them as they tend to get entirely overwritten when updated to newer versions.

At its simplest, a bundle descriptor is just a list of filenames, relative to the bundle directory.

jquery.js
jquery-ui.js
underscore.js
knockout.js

Wildcard

Cassette supports the use of * as a wildcard to include all files in the bundle directory that haven't been explicitly defined.

This is useful when only one or two of the assets in the bundle need including in a specific order - for example, ensuring that jQuery is included before any of its plugins.

jquery.js
file1.js
*

bundle references

If your bundle depends on other bundles, then add a references section.

file1.js
file2.js

[references]
~/scripts/lib
~/scripts/widgets

External bundles

You may want to use a CDN in production, but have the debug-friendly sources available during development.

Here's a example bundle descriptor file for jQuery, which we are putting into it's own bundle.

[external]
url = //ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js
fallbackCondition = !window.jQuery

[assets]
jquery.js

In a page, we can reference this as:

Bundles.Reference("~/scripts/jquery");

So in debug-mode, we just get a regular local script tag generated:

<script src="/scripts/jquery/jquery.js?a4babad4b" type="text/javascript"></script>

In production-mode, we get the CDN URL, plus a conditional fallback to our own copy of the script.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
if (!window.jQuery) {
document.write(unescape('%3Cscript src="/_assets/scripts/scripts/jquery_a4babad4b" type="text/javascript"%3E%3C/script%3E'));
}
</script>