Architect Ryan

Configure Cassette to Bundle Twitter Bootstrap Javascript

πŸ“… April 15, 2013 ⏱ 1 min read

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 have 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!

public class CassetteBundleConfiguration : IConfiguration<BundleCollection>
    public void Configure(BundleCollection bundles)
            "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

                var popoverJs = bundle.Assets.Single(a => a.Path

                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.

Ryan Hoffman

Written by Ryan Hoffman, an experienced team leader, certified Scrum Master and software architect.
Contact RyanFollow Ryan on Twitter

The postings on this site are my own and I am not speaking as a representative of my employer, any company or organization.