Posted on 3/21/2010 9:40:15 PM by Justin Etheredge
I just pushed up a few minor changes to Bundler, my framework for combining and compressing JavaScript and Css, I also fixed a few bugs and cleaned things up a bit. The big thing I added was named bundles. I personally don't have a huge need for this feature currently, but I have worked on sites in the past where this sort of thing would come in handy. Let's take a quick look at how it works...
Support For Named Bundles
With Bundler the way it works by default, we just specified a bundle like this:
Bundle.Css()
.Add("~/css/first.css")
.Add("~/css/second.css")
.Render("~/css/output.css");
The problem was that I was assuming that you could put this in a master page or somewhere that you would only have to specify this once. In my case this is mostly true. I have, however, had to work on sites in the past where it would be impossible to get a bundle of files into only one place. Because of this I decided to create what I call "Named" bundles. The idea would be that you would create a bundle in a single place (such as your global.asax file in app start) like this:
Bundle.Css()
.Add("~/css/first.css")
.Add("~/css/second.css")
.AsNamed("Bundle1", "~/css/output.css");
And then whenever you need one of those named bundles rendered, you could just do it like this:
Bundle.Css().RenderNamed("Bundle1");
Simple enough. I'd still recommend that you try and refactor your site so that you really only need bundles in a single place, but if this is not possible, then bundles might be exactly what you need.
Support For The Css Media Attribute
One other small change I made was to support the Css media attribute. It just looks like this:
Bundle.Css()
.Add("~/css/first.css")
.Add("~/css/second.css")
.WithMedia("screen")
.Render("~/css/output.css");
I hope you get a chance to go check it out by heading over to the Bundler download page on GitHub.