Using the build in javascript and css bundler for Umbraco 5 (jupiter)

Using the built in javascript and css bundler is an easy thing with umbraco.

First you have to define witch scripts you want in a bundle like this for example in your head tag:

@{
    Html
        .RequiresCss(Url.Content("~/boilerplate/css/style.css"), 0)
        .RequiresCss(Url.Content("~/boilerplate/css/jquery-ui.css"), 0)
        .RequiresCss(Url.Content("~/boilerplate/css/screen.css"), 1);

    Html
        .RequiresJs(Url.Content("~/boilerplate/js/libs/jquery-ui.js"), 50)
        .RequiresJs(Url.Content("~/boilerplate/js/libs/jquery.timeago.js"), 50)
        .RequiresJs(Url.Content("~/boilerplate/js/libs/jquery.easing.js"), 50)
        .RequiresJs(Url.Content("~/boilerplate/js/plugins.js"), 50)
        .RequiresJs(Url.Content("~/boilerplate/js/script.js"), 101);          
}

Then you have to render the scripts where you want them like this:

@Html.Raw(Html.RenderCssHere(Url.GetStylesPath()))
@Html.Raw(Html.RenderJsHere())

Then youo have to set debug to false in web.config like this:

<compilation targetFramework="4.0" debug="false">

That is all there is to it When looking at the source of the page you will see that the css and js files are bundled togheter like this:

<link href="/DependencyHandler.axd/zzz.30.css" type="text/css" rel="stylesheet"/>
<script src="/DependencyHandler.axd/zzz.30.js" type="text/javascript"></script>

Source: master page from umbraco source code