Wicked Strategery

I think I've finally figured out how to work JavaScript and stylesheet minification into my development workflow. I've been looking for something that will preserve the ability to work in a formatted file, generates a minified file, and doesn't leave Visual Studio complaining about missing files.

The set up involves the Microsoft Ajax Minifier, a batch file, and some Visual Studio setup.

1. First download and install Microsoft Ajax Minifier. Make note of the install folder (it was "C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\" for me).

2. Add a Batch script to the Visual Studio project. Make sure to set the "Build Action" to "None". I'm calling my Batch script "minify.bat".

3. The Batch script is what minifies the JavaScript and stylesheets for me. The contents look like:

                   set PATH=%~dp0;"C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\"
   
                   pushd "<full path to my project here>"
   
                   ajaxmin -clobber
                           Styles\layout.css
                           Styles\style.css
                           -o Styles\wickedstrategery.min.css
   
                   popd
                 

   I've broken out the lines for readability only.

4. Setup the project to run the Batch script when the project is built via the Post-build Build Events in the Project Properties:

                   call "$(ProjectDir)minify.bat"
                 

5. Run the script once at the command line (or build in Visual Studio) and the minified files would be created.

6. Back in Visual Studio, use the "Show All Files" in the Solution Explorer to expose the newly created external files. I then imported them into the solution, and made sure the "Build Action" was set to "Content".

7. Go to each of the source JavaScript and stylesheet files and set their "Build Action" to "None". They will stay in the project, but will not show up when the solution is built. The post-build step will regenerate the minified versions and copy the output to the output folder. Leaving the output to contain minified files but not the originals.

8. From there, the last step is to go through the project (really just my MasterPage) and ensure the references to the originals are replaced with references to the minified version.

The inspiration for getting this all running was Scott Hanselman's write up The Importance (and Ease) of Minifying your CSS and JavaScript and Optimizing PNGs for your Blog or Website.

The end result is that my project still contains the nicely formatted scripting and stylesheets, but outputs minified versions. The minification is part of the build and doesn't interupt me working. I haven't added any steps to publishing the site either. And Visual Studio's built-in sanity check for files that exist continue to function.