Optimize your Js/Css on your site with a post-build event in Visual Studio

These days we are using increasingly more js libraries for our sites.

However, a small issue arises, the headers of our sites become a bit like this

<head>

<script type=”text/javascript” src=”/Content/Scripts/Js/jquery-plugins/jquery-ui-

1.8.10.custom.min.js”></script>
<script type=”text/javascript” src=”library1.js”></script>
<script type=”text/javascript” src=”library2.js”></script>
<script type=”text/javascript” src=”library3.js”></script>
<script type=”text/javascript” src=”library4.js”></script>
<script type=”text/javascript” src=”library5.js”></script>
<script type=”text/javascript” src=”custom_fix_of_lib5.js”></script>
……

<link rel=”stylesheet” type=”text/css” href=”/Header.css” />
<link rel=”stylesheet” type=”text/css” href=”/Footer.css” />
<link rel=”stylesheet” type=”text/css” href=”/library1.css” />
<link rel=”stylesheet” type=”text/css” href=”/library2.css” />
….

and the list goes on

</head>

The best practice is to have all css/js, or chunks of it, in one file and have that file minimized.
This way we decrease the calls made to our server, our site is faster and our users are happy.

Wouldn’t it be great if we could have a post-build event in visual studio tha would take our js/css files, merge them together and minimize them?
Also, wouldn’t it be extra cool if we could load all of the files in debug mode so we could debug our javascript and for all of this to happen only in release mode?

A great resource I came accross to was http://yuicompressor.codeplex.com/.

Step 1

You’ll dowload the dll files from the codeplex project and add them in your project

Step 2

You’ll create a .msbuild file with the following structure

<?xml version=”1.0″ encoding=”utf-8″?>

<Project xmlns=”http://schemas.microsoft.com/developer/MsBuild/2003″>

<UsingTask TaskName=”CssCompressorTask” AssemblyFile=”lib\Yahoo.Yui.Compressor.MsBuildTask.dll” />

<UsingTask TaskName=”JavaScriptCompressorTask” AssemblyFile=”lib\Yahoo.Yui.Compressor.MsBuildTask.dll” />

<Target Name=”AfterBuild”>

<ItemGroup>

<JavaScriptFiles Include=jquery-1.3.2.min.js”>

<CompressionType>None</CompressionType>

</JavaScriptFiles>

<JavaScriptFiles Include=”library1.js”/>
<JavaScriptFiles Include=”library2.js”/>
<JavaScriptFiles Include=”library3.js”/>
<JavaScriptFiles Include=”library4.js”/>

</ItemGroup>

<JavaScriptCompressorTask

SourceFiles=”@(JavaScriptFiles)”

DeleteSourceFiles=”false”

OutputFile=”libs.min.js”

/>

</Target>

</Project>

Step 3

You’ll create a post-build event like this
$(MSBuildBinPath)\msbuild.exe “$(ProjectDir)YUICompress.msbuild”

Step 4

You’ll create a helper like the following one

public static class HtmlHelperExtensions    {

public static bool IsInDebugMode(this HtmlHelper helper)        {#if DEBUG            return true;#else                return false;  #endif        }

}

Step 5

You’ll include your js/css like this

<% if (Html.IsInDebugMode())

{%>

<script type=”text/javascript” src=”library1.js”></script>
<script type=”text/javascript” src=”library2.js”></script>
<script type=”text/javascript” src=”library3.js”></script>
<script type=”text/javascript” src=”library4.js”></script>
<script type=”text/javascript” src=”library5.js”></script>

<% } else {%>

<script type=”text/javascript” src=”libs.min.js”></script>

<% } %>

 

With these 5 simple steps you have gloriously optimized your js/css files on your site and have your users to thank you!