Minimize inline javascript during build for ASP.net?

Question

We have several ASP.net pages that contain more than 50 javascript lines specific to this page. We would like to minimize this javascript during the CruiseControl build process.

We already use the YUI compressor to compress our full javascript and css files. But we cannot figure out how to make Inline javascript.

Is there an MSBuild task to scroll through asp.net pages and minimize javascript?

Answer 1

There is an interesting NuGet blog and package called undleMinifyInlineJsCss to handle this.

http://weblogs.asp.net/imranbaloch/archive/2012/07/25/bundling-and-minifying-inline-css-and-js.aspx

Answer 2

I would extract javascript into methods and move them to .js files. and instead, call the functions with the appropriate parameters from the pages. Not a complicated procedure and much easier to maintain (less code). You can also use client-side caching.

---

Also: Not sure if this helps, but Google Closure looks really good.

http://code.google.com/closure/

Compression Options: http://code.google.com/closure/compiler/docs/api-tutorial3.html

Available as a Java executable or web service.

Answer 3

You cannot do this without special coding. The easiest way is probably to create a PreBuild step in the msbuild file, which flips through all .aspx files and replaces all javascript again. Then use YUI to minimize content and replace the original with a mini version.

You can also check MbCompression , which compresses a lot, including asp.net pages, although I also don't think it reduces the built-in javascript.

Answer 4

You can combine and minimize inline javascript. Using the Razor template helpers, you can create an extension method similar to the one below:

 public static MvcHtmlString AddScriptSource(this HtmlHelper helper, Func<dynamic, HelperResult> source, string key) { string scriptSource = source(null).ToHtmlString(); // Cache scriptSource here return MvcHtmlString.Empty; } 

What you will use as follows:

 @Html.AddScriptSource(@<text>$(document).ready(function() { $('h1').text('The current controller is @ViewContext.RouteData.Values["controller"].ToString()'); });</text>, "test") 

I created a bunch and minifier around this a few weeks ago at:

https://github.com/philpeace/CodePeace.StrawberryJam

Answer 5

Now ASP.NET has a set and minimization created using MVC 4 (it is also available for web forms and web pages)

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification