This article has not yet been verified against Umbraco 8.

    The concepts and code examples might not work if you are running Umbraco 8.0 or a later version. If you are using Umbraco 7, this article is perfect for you!

    You are more than welcome to report any issues found on the Documentation Issue Tracker.

    Working with stylesheets and JavaScript

    Bundling & Minification for JavaScript and CSS

    You can of course use whatever tools you are comfortable with for bundling & minification but it's worth noting that Umbraco ships with the ClientDependency Framework which offers simple runtime bundling & minification.

    You can bundle and minify as follows in a view template file.

    @using ClientDependency.Core.Mvc
    @using ClientDependency.Core
    @{
        Html.RequiresJs("~/scripts/Script1.js", 1);
        Html.RequiresJs("~/scripts/Script2.js", 2);
    
        Html.RequiresCss("~/css/style.css");
    }
    <html>
    <head>
        @Html.RenderCssHere()
        @Html.RenderJsHere()
    </head>
    

    Full details of the ClientDependency Framework can be found here: https://github.com/Shandem/ClientDependency