Configuring YUI compressor for .NET

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.

Then we need to create a MSBuildCompressor.xml file where we are going to define the compressor options and the files to compress. If you want to know about the format and instructions on how to configure this file click here.

The following is an example of how is going to be shown. Normally, is only necessary to change paths for the files that are needed to compress, highlighted in the example.

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" />

<PropertyGroup>

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

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

PropertyGroup>

<TargetName="MyTaskTarget">

<ItemGroup>

<CssFilesInclude="StylesheetSample1.css"/>

<CssFilesInclude="StylesheetSample2.css"/>

<CssFilesInclude="StylesheetSample3.css"/>

<CssFilesInclude="StylesheetSample4.css"/>

<JavaScriptFilesInclude="jquery-1.3.2.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>

After this, we need to configure the compiler to automatically generate these files within the time we click on build to our project.

We enter to the properties of our project making a right click to the project and then selecting properties. Then we select Build Events and in the Post-buildeventcommand line section we add the following line:

$(MSBuildBinPath)\msbuild.exe "$(ProjectDir)MSBuild\MSBuildCompressor.xml" /p:CssOutputFile="$(TargetDir)..\Content\

Sieena.min.css" /p:JavaScriptOutputFile="$(TargetDir)..\Scripts\Sieena.min.js"

Once configured you can go with Build and from the output window validate how the file combine and minimize.

T