How to use Visual Studio's Post-build Event with YUI Compressor for .NET

** This documentation is out of date and being updated - please download the latest source code and look at the Example web project there **


It's possible to take advantage of Visual Studio's Post-build events to compress and/or minify any casscading style sheets and/or javascript after a successful build.

Personally, I would recommend this for RELEASE configurations but you can do this under any configuration type (eg. DEBUG, RELEASE and custom types).

Note: You can modify the steps below to add other custom actions, like removing the msbuild folder after build, etc. This is not explained in this wiki page ... and is left for you to research :P


Step 1 - Create an MSBuild xml file which creates all the settings. Here is an example xml file with sample settings.

Step 2 - Make a folder where we will place all the MSBuild stuff. Place the xml file and the 2 dependant dll's in the same folder.




Step 3 - Modify the web project Build settings. Please take note of

  • /p:CssOutputFile
  • /p:JavaScriptOutputFile
  • $(TargetDir) <-- you might wish to change this if you have another destination directory.





Step 4 - Build away :)

Last edited Sep 21, 2012 at 7:58 AM by freeranger, version 2

Comments

manitra Jul 2, 2012 at 1:46 PM 
Ok, This documentation is totally outdated. Absolutely nothing here is working since the version 2.0 :
- CompressorTask is now Abstract so you cannot invoke it directly (btw: thanks to msbuild to NOT mention that and stick with a stupid message like "Cannot load task")
- There are 2 separate task 'JavaScriptCompressorTask' and 'CssCompressorTask'
- The parameters have changed (@JavaScriptFiles is not supported anymore)

Please, guys update this page, I've just spent 2 full hours trying to make this to work.

PaulSchaeflein Jun 18, 2012 at 5:01 PM 
An alternative to loading MSBUILD.exe a second time is to override the built-in <AfterBuild> target.

Simply add the following to your csproj file:
<Target Name="AfterBuild>
<CallTarget Targets="[your_target_name]" />
</Target>

teleporter Oct 2, 2009 at 6:25 PM 
Thanks for the tip, kungfu!

kungfu Sep 23, 2009 at 7:04 PM 
And while we're on the build server topic, it's worth noting that to make source control operations easier in a team environment,
1. add the output files to the web project itself,
2. exclude the combined file(s) from source control using the projectname.csproj.vspscc file as such:
"NUMBER_OF_EXCLUDED_FILES" = "2"
"EXCLUDED_FILE0" = "Content\\styles\\combined.min.css"
"EXCLUDED_FILE1" = "Content\\scripts\\combined.min.js"
3. Close and reopen the project *before* checking in, and now those combined files should have a little red "excluded" icon next to them, meaning they are part of the project but not inside source control

kungfu Sep 23, 2009 at 7:01 PM 
If you plan on pulling your resulting files from a build server, you'll want to add this as a *pre* build event. Otherwise, the generated yui-ified files are generated after the files get copied to the output directory, meaning the combined file will always reflect the previous build.

SjorsMiltenburg Sep 4, 2009 at 8:06 AM 
I think there is a spelling error in the screenshot:

JavaScriptFinal.jss
should be
JavaScriptFinal.js