Compressing js and css using Team Foundation Server 2010

I have been banging my head on a brick wall that seems to be easily worked around for everyone except me.

I want to setup css and js compression using a standard build on Team Foundation Server 2010. Below is what I've tried so far and failed. I am looking for a magic helping hand to guide me into setting this up the way professionals (SO is full of em) believe it should.

http://yuicompressor.codeplex.com/releases/view/46679 (dowload demo using post-build events)

This method looked promising as it did exactly as promised when you build your project in Visual Studio.

My msbuild Post-build command:

$(MSBuildBinPath)\msbuild.exe "$(ProjectDir)MSBuild\MSBuildSettings.xml" /p:CssOutputFile="$(TargetDir)..\Content\StylesSheetFinal.css" /p:JavaScriptOutputFile="$(TargetDir)..\Scripts\JavaScriptFinal.js"

However when the build is run by TFS I get a lot of errors like these:

D:\Builds\3\CKB 2010_Build_CP\Sources\CKB 2010\My.Name.Space\MSBuild\MSBuildSettings.xml (61): Failed to save the compressed text into the output file [D:\Builds\3\CKB 2010_Build_CP\Binaries..\Content\StylesSheetFinal.css]. Please check the path/file name and make sure the file isn't magically locked, read-only, etc..

So clearly the problem is the syntax in the Post-build command that is wrong. But I can't figure out how to make it work for both local and TSF builds.

Update 2011-08-17

As noted by Edward Thompson, I've tried adding a backslash to the path:

$(MSBuildBinPath)\msbuild.exe "$(ProjectDir)MSBuild\MSBuildSettings.xml" /p:CssOutputFile="$(TargetDir)\..\Content\styles.min.css" /p:JavaScriptOutputFile="$(TargetDir)\..\Scripts\scripts.min.js"

And the result is this:

Failed to save the compressed text into the output file [D:\Builds\3\CKB 2010_Build_CP\Binaries\\..\Content\styles.min.css]. Please check the path/file n开发者_高级运维ame and make sure the file isn't magically locked, read-only, etc..

The problem is the difference in values with which TFS and Visual Studio run the msbuild command.

These are the steps I have taken to get proper YuiCompressor integration with Visual Studio 2010 and Team Foundation Server 2010.

1. In your desired project add a folder named 'MSBuild'

2. In this folder you should extract the files you download from the YuiCompressor project on CodePlex

   

3. Set the properties of these files like this:
   

   

4. Now open the MSBuildSettings.xml file and edit it according to the scripts and css files you want to have compressed. I have uploaded mine on pastebin since pasting it here caused problems with the editor.

5. Add the following postbuild event to your project. Note that the paths can differ for your environment.

   IF "$(BuildingInsideVisualStudio)"=="" $(MSBuildBinPath)\msbuild.exe
   "$(ProjectDir)MSBuild\MSBuildSettings.xml"
   /p:CssOutputFile="$(TargetDir)_PublishedWebsites\$(ProjectName)\Content\styles.min.css" /p:JavaScriptOutputFile="$(TargetDir)_PublishedWebsites\$(ProjectName)\Scripts\scripts.min.js"
   IF "$(BuildingInsideVisualStudio)"=="true" $(MSBuildBinPath)\msbuild.exe
   "$(ProjectDir)MSBuild\MSBuildSettings.xml"
   /p:CssOutputFile="$(TargetDir)..\Content\styles.min.css"
   /p:JavaScriptOutputFile="$(TargetDir)..\Scripts\scripts.min.js"

6. Build the project and see if the files where created as expected.

7. Perform a check-in and watch the tfs build create the compressed files for you.

8. For debugging the tfs build, you'll find the logs in the msbuild log which is linked inside the normal tfsbuild log.

I hope this helps someone out there. I couldn't find a decent guide anywhere so now there is one here! If you have other suggestions, feel free to add them or post them in the comments.

One thing that sticks out at me is that you're using $(TargetDir)..\ - which expands to \Binaries..\. I suspect that you don't have a Binaries.. directory, and that this is supposed to be \$(TargetDir)\..\. (Ie, the parent of the Binaries directory.)