By Guillermo Cedillo

An excellent best practice to optimize the performance of web sites and especially web applications, is to combine and minimize our javascript and stylesheet files.

Yahoo provides a very useful tool to achieve this, the YUI compressor.

To set this up is very simple, you must first download the tool http://yuicompressor.codeplex.com/, and this file contains two dll's: EcmaScript.NET.modified.dll and Yahoo.Yui.Compressor.dll.

Create a folder inside your project with the name of MSBuild and put your dlls there.

<?xmlversion="1.0" encoding="utf-8"?>

<Projectxmlns="http://schemas.microsoft.com/developer/MsBuild/2003">

<UsingTask

TaskName="CompressorTask"

AssemblyFile="..\..\Projects\Yahoo.Yui.Compressor\Model\bin\Debug\Yahoo.Yui.Compressor.dll" />

<!-- The .NET 2.0 version of the task .. and yes .. that's Model.Net20 folder listed twice .. i know i know...

<UsingTask

TaskName="CompressorTask"

        AssemblyFile="..\..\Projects\Yahoo.Yui.Compressor\Model.Net20\Model.Net20\bin\Debug\Yahoo.Yui.Compressor.NET20.dll" />

    -->

<!-- Define the output locations. These can be set via the msbuild command line using

         /p:CssOutputFile=$(TargetDir)../whatever...

         /p:JavaScriptOutputFile=$(TargetDir)../whatever...

         If they are not supplied or are empty, then we the value whatever is supplied, below.

    -->

<PropertyGroup>

<CssOutputFileCondition=" '$(CssOutputFile)'=='' ">SylesSheetFinal.css</CssOutputFile>

<JavaScriptOutputFileCondition=" '$(JavaScriptOutputFile)'=='' ">JavaScriptFinal.css</JavaScriptOutputFile>

</PropertyGroup>

<TargetName="MyTaskTarget">

<!--

ItemGroup\CssFiles or ItemGroup\JavaScriptFiles: add zero to many files you wish to include in this compression task.

                                                             Don't forget, you can use the wildcard (eg. *.css, *.js) if you feel up to it.

                                                             Finally, at least one item is required - either a css file or a js file.

CssFiles/JavaScriptFiles data format: Please do not touch this.

DeleteCssFiles: [Optional] True | Yes | Yeah | Yep | True | FoSho | FoSho. Default is False. Anything else is False. (eg. blah = false, xxxx111 = false, etc)

CssCompressionType: YuiStockCompression | MichaelAshsRegexEnhancements | HaveMyCakeAndEatIt or BestOfBothWorlds or Hybrid; Default is YuiStockCompression.

ObfuscateJavaScript: [Optional] refer to DeleteCssFiles, above.

PreserveAllSemicolons: [Optional] refer to DeleteCssFiles, above.

DisableOptimizations: [Optional] refer to DeleteCssFiles, above.

EncodingType: [Optional] ASCII, BigEndianUnicode, Unicode, UTF32, UTF7, UTF8, Default. Default is 'Default'.

DeleteJavaScriptFiles: [Optional] refer to DeleteCssFiles, above.

LineBreakPosition: [Optional] the position where a line feed is appened when the next semicolon is reached. Default is -1 (never add a line break).

                               0 (zero) means add a line break after every semicolon. (This might help with debugging troublesome files).         

LoggingType: None | ALittleBit | HardcoreBringItOn;  Hardcore also lists javascript verbose warnings, if there are any (and there usually is :P ).

ThreadCulture: [Optional] the culture you want the thread to run under. Default is 'en-gb'.

IsEvalIgnored: [Optional] compress any functions that contain 'eval'. Default is False, which means a function that contains

                           'eval' will NOT be compressed. It's deemed risky to compress a function containing 'eval'. That said,

if the usages are deemed safe this check can be disabled by setting this value to True.

        -->

<ItemGroup>

<!-- Single files, listed in order of dependency -->

<CssFilesInclude="StylesheetSample1.css"/>

<CssFilesInclude="StylesheetSample2.css"/>

<CssFilesInclude="StylesheetSample3.css"/>

<CssFilesInclude="StylesheetSample4.css"/>

<JavaScriptFilesInclude="jquery-1.3.2.js"/>

<!-- All the files. They will be handled (I assume) in alphabetically. -->

<!--<CssFiles Include="*.css" />

<JavaScriptFiles Include="*.js" />

            -->

</ItemGroup>

<CompressorTask

CssFiles="@(CssFiles)"

DeleteCssFiles="false"

CssOutputFile="$(CssOutputFile)"

CssCompressionType="YuiStockCompression"

JavaScriptFiles="@(JavaScriptFiles)"

ObfuscateJavaScript="True"

PreserveAllSemicolons="False"

DisableOptimizations="Nope"

EncodingType="Default"

DeleteJavaScriptFiles="false"

LineBreakPosition="-1"

JavaScriptOutputFile="$(JavaScriptOutputFile)"

LoggingType="ALittleBit"

ThreadCulture="en-au"

IsEvalIgnored="false"

/>

</Target>

</Project>