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

user_10202 0
Viewed 24511

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>

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>


UPDATE: Recommendations for now (late 2013):

I would look at Microsoft ASP.NET's built in Bundling and Minification.

minify asp.net-mvc css javascript c#
8 Answers

Why not use the ScriptManager? Here's an MVCScriptManager that will combine AND squish.

Scott_Hanselman_63800
RedWolves_6480

Use either YUI Compressor or Dojo compressor. They both use the Rhino JS parsing engine which tokenizes your code, and will therefore only work if the code is valid code. If there is an error, they'll let you know (which is a nice bonus IMO!) Packer on the other hand, will pack your code even if it contains errors.

I use YUI in all my projects via build scripts. Never do it on the fly, it takes too long to do the compression. Both YUI and Dojo are Java based (ala Rhino) and if you do it on the fly, you'll be spawning background processes to generate the output - not good for performance. Always do it at build time.

user_981250

Here's what I've used for concatenating, compressing and caching CSS and JS files: http://gist.github.com/130913

It just requires Yahoo.Yui.Compressor.dll in the bin directory. It doesn't compress at compile time, but the files are cached with a file dependency, so they are only loaded once, until they're changed.

Then I just add this code in the <head>:

<link rel="stylesheet" type="text/css" href="/YuiCompressor.ashx?css=reset,style,etc" />

and this just before the </body>:

<script type="text/javascript" src="/YuiCompressor.ashx?js=main,other,etc"></script>

It's designed to work with multiple files all in the same path but could easily be upgraded to support different paths.

travis_14140
Related