Tuesday, December 14, 2010

Minimize JavaScript and CSS with MSBuild: Part 1

This is going to be a two part posts about how to use MSBuild to automate JavaScript and CSS minimization.  Part 1 is mostly introduction so if you want to jump straight to how it’s done go to part 2.

For the project I am working on, I am trying to use best practice by minimize JavaScript and CSS files to reduce download time.  However, it’s hard to develop JavaScripts with no whitespaces and meaningless variable names.  What I decided to do is to have the build process automatically invoke a tool to minimize CSS and JavaScript for me during compilation.

There are many tools out there that would minimize the files for you.  I checked out .Net implementation of YUI CompressorGoogle Closure Library, and Microsoft Ajax Minifier.  I need a tool that integrate with MSBuild, so that eliminates Google’s tool, which is too bad since it produces the best result from what I can gather online.  While it is true that I can use the command line task to execute Google’s tool, I would also need to setup the environment for Java and make sure it’s available on build server.  The YUI Compressor combines all the CSS files and JavaScript files into a single css/js file, which is not the behavior I want for my project.  I want to keep page specific files separate so they don’t get downloaded until user visit that page.  In another word, if the user visit AboutUs page he shouldn’t have to download the bits for CheckBrowser page.  In the end I decided to use Microsoft Ajax Minifier.

For the rest of this post I will describe the sample project and how it’s setup.  The sample program tests a subset of browser’s html5 functionality support.  The sample program uses Asp.Net MVC2, jQuery, Modernizr, and SilkSprite.  Here are the results in Chrome 7 and IE 8:

IE 8

Chrome 7

Here is the list of the files in the project, the folders of interests are uncompressed folder and content folder.  Take note of scripts and styles folder in both of the directory.  The only difference is the files under content has ‘min’ before the extension to indicate they are minimized version of the file.  The ‘uncompressed’ folder is where your working version of the files would be.  So let’s setup the folder structure first.

Create the ‘uncompressed’ folder and add ‘scripts’ and ‘styles’ directory to the folder.  Next add/move the desired files from ‘Content’ and ‘Scripts’ folders to their appropriate location under ‘uncompressed’ fold.  MVC template automatically adds the ‘Content’ folder to your project, you can rename it to ‘content’ if you are anal like me, if not just leave it in place.  Then add ‘images’, ‘scripts’, and ‘styles’ folder to ‘content’.

Next we need to grab the files for tools we will be using and place them in the project.  Download Modernizr JavaScript from http://www.modernizr.com/, and SilkSprite from http://www.ajaxbestiary.com/Labs/SilkSprite/.  I will assume you know how to create controllers and views since that’s not the scope of this article but if not you can check out a few tutorials online.  I de-minimized Modernizr script for testing purpose, you can leave it minimized and simple make sure it doesn’t have ‘min’ in the file name.  I also change the SilkSprite CSS to point to the location of actual image file.

Finally we would need to do is set the build action for every file under ‘uncompressed’ to None.  To do this you click on the file and bring up the property window(F4), the first item in the property window should be ‘Build Action’, change its value to None and do it for all the files.

That’s it for the background explanation and setup of the project.  In the next post we will open up the MSBuild file and modify the internal of the project file to add instruction for minimize JavaScript and CSS files during compilation.

Download the sample project here.

No comments: