Combine and minify JavaScript (JS) and CSS using AjaxMin

Rendering a page on my blog requires 12 JavaScript files and 3 CSS files. This is is a lot of HTTP request overhead. I decided to use AjaxMin to combine and minify my JS and CSS files. Now my pages only requires one JS and one CSS file.

AjaxMin can use an XML file to specify which files to minify and combine along with the target output file. The input file for my blog:

<root>
   <output path="..\..\web\site.js">
      <input path="..\..\web\syntax\scripts\shCore.js" />
      <input path="..\..\web\syntax\scripts\shLegacy.js" />
      <input path="..\..\web\syntax\scripts\shBrushCSharp.js" />
      <input path="..\..\web\syntax\scripts\shBrushXml.js" />
      <input path="..\..\web\syntax\scripts\shBrushPlain.js" />
      <input path="..\..\web\syntax\scripts\shBrushVb.js" />
      <input path="..\..\web\syntax\scripts\shBrushPowerShell.js" />
      <input path="..\..\web\scripts\jquery-1.7.1.min.js" />
      <input path="..\..\web\scripts\json2.js" />
      <input path="..\..\web\scripts\jquery.validate.min.js" />
      <input path="..\..\web\scripts\jquery.form.js" />
      <input path="..\..\web\scripts\FoxBlog.js" />
   </output>
   <output path="..\..\web\site.css">
      <input path="..\..\web\syntax\styles\shCore.css" />
      <input path="..\..\web\syntax\styles\shThemeDefault.css" />
      <input path="..\..\web\content\site.css" />
   </output>
</root>

The file name for the XML input file will be passed through the -xml argument to AjaxMin.

I'm running AjaxMin out of a folder off the root of my checkout tree, so the paths to all the files are relative paths that resolve to my web project folder structure. The folder structure of interest is shown below.

AjaxMin is run out of the 3rdParty\AjaxMin folder. The input file is also located in the AjaxMin folder. The command to run AjaxMin:

ajaxmin -clobber -xml AjaxMin.xml

After executing AjaxMin, the files site.css and site.js will be created in the Web folder. These are the files that will be referenced in the website code.

AjaxMin can be run as a build event in Visual Studio, although technically it would only be necessary to run it if any of the CSS or JavsScript changes. A build event command for the above project structure:

$(ProjectDir)..\3rdParty\AjaxMin\ajaxmin -clobber -xml $(ProjectDir)..\3rdParty\AjaxMin\AjaxMin.xml

It might be better to set up a external tool in Visual Studio to run AjaxMin, a shortcut, or whatever is most convenient.

Keep in mind, some sort of versioning needs to be done with the CSS and JS files so the browser will download the latest version of the file. I have yet to implement a versioning mechanism for my blog, but I need to get to it at some point. Maybe a blog post about it as well :-)