Nibble

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

OptimusBundleUI

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).

OptimusCreateBundleUI

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:

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).

OptimusProviders

Depending on the ones you installed you’ll be able create files of that type

In the new dynamic scripts tree

OptimusDynamicScripts

And dynamic stylesheets tree

OptimusDynamicStylesheets

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.

OptimusFileEditorpng

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).

11 Comments so far

  1. Dima Stefantsov on July 6th, 2013

    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

  2. Tim Geyssens on July 15th, 2013

    @Dima thanks for the tip, haven’t seen that one yet

  3. Tim Geyssens on July 15th, 2013

    @Dina, have you tried it on an Umbraco site yet, seem to get some strange results

  4. Marcus on October 1st, 2013

    What about using CDNs?
    I think, besides the minifying option, being able to use this package to pull together CDN sources like
    etc!

  5. Tim Geyssens on October 2nd, 2013

    @Marcus no CDN support atm but should be possible to add since Web Optimization framework can handle it

  6. Dima Stefantsov on January 8th, 2014

    @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.

  7. Søren Reinke on July 15th, 2014

    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 :)

  8. Stijn on December 17th, 2015

    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.

  9. Tim Geyssens on December 18th, 2015

    @Stijn, yup check the config file (bundles.config in the app_plugins folder) and set the ignoreCompilationDebug setting to false

  10. Stijn on December 18th, 2015

    @Tim, thanks for your reply. I already found the answer on the umbraco forum. I should’ve looked there first…

  11. Henrik Vincent on February 21st, 2017

    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

Leave a Reply