Introducing Optimus: Resource bundling, minification and transformation for Umbraco
In collab with Mr Warren Buckley we are glad to announce the beta release of a new Umbraco package.
Meet Optimus
In essence Optimus is a UI layer on top of the Asp.net Web Optimization framework for Umbraco, making it possible to create script and style bundles from within the backoffice.
Why should you bundles those resources? Well in short: bundling and minification improves request load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript), for a good intro check http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
After installing Optimus you’ll end up with some new bits in the Settings section that allow you to create both script and style bundles by simply selecting the available files in the /css or /scripts folder
In addition to manually creating these bundles you’ll also find a new option in the edit template toolbar (for both views and masterpages) that allows you to simply select script/link tags and auto create a bundle from those (can’t get any easier).
more than meets the eye
Besides being able to bundle your resources Optimus also features a provider model for dynamic stylesheet and script languages.
The providers available today are:
- Less http://lesscss.org/
- Sass http://sass-lang.com/
- Coffeescript http://coffeescript.org/
- TypeScript http://www.typescriptlang.org/
As a final step of the installation you’ll be able to choose the providers you want to include (thanks to Matt Brailsford for letting us lend some code from the Universal Media Picker project).
Depending on the ones you installed you’ll be able create files of that type
In the new dynamic scripts tree
And dynamic stylesheets tree
Once created you can start writing code in the editor, the editor will check for errors and highlight the linenumber in case of an error.
If the transformation is successful you’ll end up with a plain js/css file that you can then use (also in bundles)
Demo
For a quick demo check out this screencast
It’s a beta
So today the beta is available on http://our.umbraco.org/projects/developer-tools/optimus
In addition to installing the package you’ll need to do some manual web.config updates outlined here:
https://github.com/TimGeyssens/BundlingAndMinificationForTheMasses/blob/master/OptimusBetaInstallation.md(of course this will be done automatically by the final release)
It’s only been tested on Umbraco v6 but for the final release we’ll try to include the latest v4 (eta next friday).
You probably want to take a look at RequestReduce http://requestreduce.org/
It automatically covers all my minification and bundling needs.
You can watch it in action at my website http://stefantsov.com/ (although there are some asyncness of CloudFlare as well; just look at bundling and minification)
Installation: just throw it in /bin and add few lines to web.config
@Dima thanks for the tip, haven’t seen that one yet
@Dina, have you tried it on an Umbraco site yet, seem to get some strange results
What about using CDNs?
I think, besides the minifying option, being able to use this package to pull together CDN sources like
etc!
@Marcus no CDN support atm but should be possible to add since Web Optimization framework can handle it
@Tim, I never got notification on your reply, it’s a coincidence I visited this page from my google webmaster links. You should do something about delivering notifications to users like myself
(I’m using Disqus on my sites)
Yes, I have of course tried RequestReduce on Umbraco, stefantsov.com is Umbraco site, for example. The only problem I noticed - is updating/installing. It doesn’t work if RR is enabled. Other than that, everything’s perfect.
Working smoothly with cloudflare CDN as well.
Very cool package.
Have just tested it on the umbraco 7.2 Build 118 and it works, got a few error about a missing view.
But it does bundling and minification
Hi,
I just installed the Optimus package; works like a charm!
A handy feature of the Asp.Net Optimization framework is that bundling and minification can be disabled when running in debug mode. It’s very convenient for debugging javascript during development.
Is something like that possible with Optimus?
Kr,
Stijn.
@Stijn, yup check the config file (bundles.config in the app_plugins folder) and set the ignoreCompilationDebug setting to false
@Tim, thanks for your reply. I already found the answer on the umbraco forum. I should’ve looked there first…
Hi there
And thanks for a great plugin, which I’ve used for a bunch of projects.
I’ve ran in to a bit of a pickle now, since I’m trying to set up Boostrap Sass, with Optimus.
Problem is, that due to all the files in BSSASS, I can’t get all files verified, cus the .cscc files doesnt seem to connect.
I’ve created the same structure and all, but keep getting errors that functions doesn’t exist even tho the files are where they should be.
So I’m hoping you can give me a push in the right direction.
Is there any way to verify each file before putting it all together, or is it possible to turn of the errorchecking until all files are in place
Best
Henrik