No More Ctrl-F5
Last night at a ridiculous hour I released the latest version of my asset preprocessor for .NET
Cruncher is a cool bit of kit. It makes optimizing your resources easy. It can bundle unlimited combinations of remote and local CSS, Less, Sass, JavaScript, and CoffeeScript files. Like really... Mix and match them anyway you like and Cruncher will preprocess them accordingly and produce links to the processed output.
Cruncher can handle nested CSS @import statements, re-maps relative resource urls and has a self cleaning cache should any changes be made to any of the referenced files. It can also parse CSS and add vendor prefixes to rules by Can I Use using AutoPrefixer.
You can, and most definitely should get it here
How it works
When processing a collection of inputs, Cruncher will identify the content type and apply the correct preprocessor to the input converting it to CSS or JavaScript accordingly. CSS files are then passed through an AutoPrefixer postprocessor if it is enabled (By default it is). It will then, if you are running in release mode minify the output using the Microsoft Ajax Minifier
Finally links are produced in the page as follows.
<link rel="stylesheet" href="/assets-cruncher/-1287271604.css">
<script type="text/javascript" src="/assets-cruncher/-1661000378.js"></script>
Where the name is the hash of the combined output. This allows the native static file handler to take over which is great for performance (though all this activity is also heavily cached both in the browser and the server). If any changes are detected by file monitors for each file and imported files then the number will change which forces the browser to request the updated output. That allows instant propagation of changes made to the input files. No More Ctrl-F5!
Usage
It really couldn't be easier. Simply add @using Cruncher to your view and use the following methods to add resources. This all works in webforms syntax also.
// Default.
@CruncherBundler.RenderCSS("style.css", "style.less", "style.scss")
// Render the link wth a media query.
@CruncherBundler.RenderCSS(new HtmlString("media=\"(max-width: 800px)\""), "style.css", "style.less", "style.scss")
// Default.
@CruncherBundler.RenderJavaScript("jquery-2.1.1", "test.coffee", "test.js")
// Render the script with the 'async' boolean enabled.
@CruncherBundler.RenderJavaScript(JavaScriptLoadBehaviour.Async, "jquery-2.1.1", "test.coffee", "test.js")
// Render the script with the 'defer' boolean enabled.
@CruncherBundler.RenderJavaScript(JavaScriptLoadBehaviour.Defer, "jquery-2.1.1", "test.coffee", "test.js")
There's a great writeup of the async and defer attributes here
Feel free to have a good look through the sourcecode. It's all, as ever, open source under the Apache 2.0 license and contributions are most welcome.
Thanks
I'd very much like to thank both Alain (I'm so sorry I have forgotten your surname) for providing some simply awesome ideas and code and Jeroen Breuer for reporting bugs and providing me with projects to tests against for this release. You both got me revisiting code I'd long forgotten about and didn't realise anyone was using.