Concatenate & Minify JS on the fly OR at build time - ASP.NET MVC

Posted by Charlino on Stack Overflow See other posts from Stack Overflow or by Charlino
Published on 2009-05-20T22:21:33Z Indexed on 2010/05/05 23:28 UTC
Read the original article Hit count: 908

Filed under:
|
|
|
|

As an extension to this question here Linking JavaScript Libraries in User Controls I was after some examples of how people are concatinating & 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 js 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 & minification! :-)

Current master page with the common js files that I would like concatenated & 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>

Used in a page like this (which I'm happy with):

<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server">
    <%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %>
</asp:Content>


EDIT: What I'm using now

Since asking this question, Microsoft have released their own JS & CSS compression library called Microsoft AJAX Minifier, I'd definitely recommend checking it out. It includes MSBuild tasks which are the duck's nuts.

© Stack Overflow or respective owner

Related posts about css

Related posts about JavaScript