Alex Rivera | Logout

Concatenate and minify JavaScript on the fly OR at build time - ASP.NET MVC

Asked 2009-05-20T22:21:33.947
47

As an extension to this question here Linking JavaScript Libraries in User Controls I was after some examples of how people are concatenating and minifying JavaScript on the fly OR at build time. I would also like to see how it then works into your master pages.

I don't mind page specific files being minified and linked inidividually as they currently are (see below) but all the JavaScript files on the main master page (I have about 5 or 6) I would like concatenated and minified.

Bonus points for anyone who also incorporates CSS concatenation and minification! :-)

Current master page with the common JavaScript files that I would like concatenated and minified:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<head runat="server">
    ... BLAH ...
    <asp:ContentPlaceHolder ID="AdditionalHead" runat="server" />
    ... BLAH ...
    <%= Html.CSSBlock("/styles/site.css") %>
    <%= Html.CSSBlock("/styles/jquery-ui-1.7.1.css") %>
    <%= Html.CSSBlock("/styles/jquery.lightbox-0.5.css") %>
    <%= Html.CSSBlock("/styles/ie6.css", 6) %>
    <%= Html.CSSBlock("/styles/ie7.css", 7) %>
    <asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" />
</head>
<body>
    ... BLAH ...
    <%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %>
    <%= Html.JSBlock("/scripts/jquery-ui-1.7.1.js", "/scripts/jquery-ui-1.7.1.min.js") %>
    <%= Html.JSBlock("/scripts/jquery.validate.js", "/scripts/jquery.validate.min.js") %>
    <%= Html.JSBlock("/scripts/jquery.lightbox-0.5.js", "/scripts/jquery.lightbox-0.5.min.js") %>
    <%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %>
    <asp:ContentPlaceHolder ID="AdditionalJS" runat="server" />
</body>
Edit
Report

1 Answer

4

Rejuicer is a great new minifier for ASP.NET that's getting a lot of buzz: http://rejuice.me

It is configured as a HTTP module & performs minification at run-time (once) and caches the output.

It:

  • Has a fluent interface for configuration
  • Allows you to specify files to minify with wildcard rules
  • Runs on Windows Azure
  • Somewhat magically turns itself off in development environments, so you can debug your original javascript code (not minified).

The configuration (done on ApplicationStart in global.asax.cs) is as simple as:

OnRequest.ForJs("~/Combined.js")
            .Compact
            .FilesIn("~/Scripts/")
              .Matching("*.js")
            .Cache
            .Configure();
answered 2011-07-06T10:48:43.293

Your Answer