Script Minification and Continuous Integration with MSBuild

Question

On a recent project I have been working on in C#/ASP.NET I have some fairly complicated JavaScript files and some nifty Style Sheets. As these script resources grow in size it is advisable to minify the resources and keep your web pages as light as possible, of course. I know many developers who hand-feed their JavaScript resources into compressors after debugging and then deploy their applications.

When it comes to source control and automated builds in the satisfying world of continuous integration (thank you CruiseControl.NET); hand compression will simply not do. The only way to maintain source control and offer compressed resources is to keep JS/CSS source & their minified brethren in a separate directory structure. Then register only one set of resources or the other in code-behind. However, if a developer makes a change to JS/CSS source and then fails to re-compact it and check in both versions, then you’re code-line is now out of sync. Not to mention inelegant.

I am thinking that it would be nice to write a custom executable (if one does not exist yet) for the CC.NET task block which would find and compress all JavaScript and CSS resources in the target directory after the build action but before the asp.net publish to target. This way, developers would only work on JS and CSS source and users would only get the minified resources.

Is there an application that already performs this task and if not, what kind of resource(s) should I look to install on the build server to have CC.NET execute?

(The closest question I could find here to this one required NAnt, which is not an option in my case.)

EDIT: Dave Ward now has a great article on how to automatically minify in Visual Studio at his site.

Answer 1

The MSBuildCommunityTasks Project has a few MSBuild tasks that may do what you are looking for including Merge and JSCompress.

You could add these into your MSBuild project in the AfterBuild target to allow the project to perform this action every time the project is built and nothing would ever be out of sync. Your web application could then reference the compacted version for run but the developers would edit the full versions.

Nothing else would be needed on the server except the MSBuild community tasks assembly. You can put this assembly in your own source tree and reference from there and your CI build should get that assembly and everything it needs when it builds.

Answer 2

Another JS (and CSS!) compression library for MSBuild:

http://www.codeplex.com/YUICompressor

This is a .NET port of the java-based Yahoo! compressor.

Answer 3

Not a perfect answer, but if you're using MVC4 they've built this in as a new feature. When running a Debug configuration, it outputs individual files with comments and such but when you switch to Release, it will automatically bundle, minify, and change in page references to the minified files. You can setup separate bundles for, say, jquery and your own js. This works with CSS and JS files.

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

If MVC4 doesn't work for you, you can also find packages on Nuget that can help such as this:

https://www.nuget.org/packages?q=minify