Note that there are some explanatory texts on larger screens.

plurals
  1. POConcatenate and minify JavaScript on the fly OR at build time - ASP.NET MVC
    primarykey
    data
    text
    <p>As an extension to this question here <a href="https://stackoverflow.com/questions/885990/linking-javascript-libraries-in-user-controls/886184#886184">Linking JavaScript Libraries in User Controls</a> 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.</p> <p>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.</p> <p>Bonus points for anyone who also incorporates CSS concatenation and minification! :-)</p> <p>Current master page with the common JavaScript files that I would like concatenated and minified:</p> <pre><code>&lt;%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %&gt; &lt;head runat="server"&gt; ... BLAH ... &lt;asp:ContentPlaceHolder ID="AdditionalHead" runat="server" /&gt; ... BLAH ... &lt;%= Html.CSSBlock("/styles/site.css") %&gt; &lt;%= Html.CSSBlock("/styles/jquery-ui-1.7.1.css") %&gt; &lt;%= Html.CSSBlock("/styles/jquery.lightbox-0.5.css") %&gt; &lt;%= Html.CSSBlock("/styles/ie6.css", 6) %&gt; &lt;%= Html.CSSBlock("/styles/ie7.css", 7) %&gt; &lt;asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" /&gt; &lt;/head&gt; &lt;body&gt; ... BLAH ... &lt;%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %&gt; &lt;%= Html.JSBlock("/scripts/jquery-ui-1.7.1.js", "/scripts/jquery-ui-1.7.1.min.js") %&gt; &lt;%= Html.JSBlock("/scripts/jquery.validate.js", "/scripts/jquery.validate.min.js") %&gt; &lt;%= Html.JSBlock("/scripts/jquery.lightbox-0.5.js", "/scripts/jquery.lightbox-0.5.min.js") %&gt; &lt;%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %&gt; &lt;asp:ContentPlaceHolder ID="AdditionalJS" runat="server" /&gt; &lt;/body&gt; </code></pre> <p>Used in a page like this (which I'm happy with):</p> <pre><code>&lt;asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server"&gt; &lt;%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %&gt; &lt;/asp:Content&gt; </code></pre> <p><br/></p> <p><strong>UPDATE:</strong> Recommendations for now (late 2013):</p> <p>I would look at Microsoft ASP.NET's built in <a href="http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification" rel="nofollow noreferrer">Bundling and Minification</a>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload