Using Less with Umbraco and System.Web.Optimizations

When you want to combine and minify your JavaScript and CSS there’s a lot of options out there. Mainly you can either do this in your build process or perform this “on demand” from the server side of your website. When it comes to performance the first option, to actually deploy the processed assets, is probably the most efficient but I often prefer to take the cost of processing this on the server side using something like Microsoft.AspNet.Web.Optimization or ClientDependency Framwork (ships with Umbraco).

In this post I’ll explain the steps needed to use Microsofts Web.Optimization-framework and the 3rd party package System.Web.Optimization.Less to be able to process use .less-files on the server.

Note: The Less-package that I’m using needs at least .NET Framework 4.6.1 to run, so before going further, make sure that you’re project runs on at least .NET Framework 4.6.1.

First of, we need to install the two packages that we’re going to use:

Install-Package Microsoft.AspNet.Web.Optimization
and

Install-Package System.Web.Optimization.Less

Note: If you're on Umbraco 7 you need to make sure that you're using the right versions of the packages, I would recommend installtion them in this order:

* Install-Package Microsoft.AspNet.Web.Optimization -version 1.1.3
* Install-Package dotless -version 1.5.2
* Install-Package System.Web.Optimization.Less -version 1.3.4

This is beacure the "dotless" package made breaking changes in version 1.6+ but some NuGet package does not explicity state the dependency to be for dotless < 1.6.

After installing these packages we need to configure our bundle during startup. For a vanilla MVC-project this would be done in Global.asax but when we're running Umbraco we can avoid having to fiddle with Global.asax by creating our own ApplicationEventHandler (for V7) or UserComponent (for V8).

Before we configure our bundles we need to make sure that the path we're using for our bundles is ignored by Umbraco, otherwise we might get issues with 404-responses from the bundle. Make sure the root web.config contains a appSettings that looks something like this: 

<add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/bundles/"/>

 Then we can start to configure our bundle, when running Umbraco 7 it would look something like this

public class UmbracoStartup : ApplicationEventHandler
{
    protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
    {
        this.RegisterBundles(BundleTable.Bundles);
    }

    public void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js") 
            .Include("~/Scripts/site.js")
        );

        bundles.Add(new LessBundle("~/bundles/css")
            .Include("~/Style/site.less")
        );
    }
}

 Then in your views you'll render the bundle links like this:

@Styles.Render("~/bundles/css")

After this the bundle will be rendered on the front end of the website, please note that it behaves differently depending on the system.web -> compilation -> debug setting in the root web.config:

• Debug = true (for development): Each file in the bundle is referenced with it's own <script>-tag
• Debug = false (for production): Files and bundles (and minified if configured).

A good practice is to test both these settings in your development environment to make sure that everything works.