Ryan Hoffman

Thoughts from a .NET obsessed software architect and developer.

Configure Cassette to Bundle Twitter Bootstrap Javascript

I originally thought bundling the Bootstrap javascript would be as easy as adding the folder to a Cassette bundle. There was one problem - there is a dependency between bootstrap-popover.js and bootstrap-tooltip.js - and I do not want to modify the original Bootstrap files.

I’ve used a creative approach to add the dependency - using the cool customize bundles lamba in the Cassette bundle configuration. I use a Linq query to locate the assets in question, and I manually add a reference in code. It’s really cool that Cassette allows you to get “low” level like this!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public class CassetteBundleConfiguration : IConfiguration<BundleCollection>
{
    public void Configure(BundleCollection bundles)
    {
        bundles.Add<ScriptBundle>
        (
            "Content/bootstrap/js", //relative path to your bootstrap js files
            new FileSearch()
            {
                SearchOption = SearchOption.TopDirectoryOnly,
                Pattern = "*.js"
            },
            bundle =>
            {
                var tooltipJs = bundle.Assets.Single(a => a.Path
                                                           .ToLowerInvariant()
                                                           .Contains("-tooltip"));

                var popoverJs = bundle.Assets.Single(a => a.Path
                                                           .ToLowerInvariant()
                                                           .Contains("-popover"));

                popoverJs.AddReference(tooltipJs.Path, 1);
            }
        );
    }
}

Looking for how to configure Cassette to bundle the Bootstrap LESS stylesheets? There are instructions here and although they are for Cassette 1.0, it still works the same.

Comments