There are many ways to achieve JavaScript and CSS minification. In an ASP.NET MVC project I have successfully set up one click(F6) minification of JavaScript and CSS files using YUI Compressor .NET and MSBuild in VS2010. This minification has reduce the JS and CSS file size to 50% less, which in turn increases the application’s performance. I thought I will share my experience.
I started by installing the YUICompressor .NET (MsBuild Task) package from Nuget gallary in my VS2010 web project.
YUICompressor .NET (MsBuild Task)
Download the Sample WebSite using Post-Build events. Copy the MSBuild folder to your project root.
Open MSBuildSettings.xml (inside the MSBuild folder in your project) and modify the element UsingTask‘s attribute AssemblyFile to AssemblyFile="(root folder for your solution)\packages\YUICompressor.NET-MsBuild-Task.1.6.0.1\lib\NET35\Yahoo.Yui.Compressor.MsBuildTask.dll". Also modify the path and the final file name for CSS and JS output. Click the image below to see the code.
MSBuildSettings Using Task
Now in the MSBuildSettings.xml file include all the JavaScript and CSS files under element ItemGroup as shown in the image below,
MSBuildSettings Item Group
Finally, 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.
VS2010 Build Events
You can copy the post-build event script from below,
$(MSBuildBinPath)\msbuild.exe "$(ProjectDir)MSBuild\MSBuildSettings.xml" /p:CssOutputFile="$(TargetDir)..\Content\themes\MyProject\MyProject.min.css" /p:JavaScriptOutputFile="$(TargetDir)..\Scripts\MyProject\MyProject.min.js"
Now, every time you build (or hit F6) in Visual Studio 2010, your project will create (if output JS or CSS files do not exist) or update the files (for e.g. in my case MyProject.min.css and MyProject.min.js) from all the files you have included in MSBuildSettings.xml earlier. In you _Layout.cshtml file add references as shown below. Do not add reference to other JavaScript and CSS files which you are minifying.
View reference to Js and Css
By using the above steps, I am automatically minifying JavaScript and CSS files in VS2010 using one click (F6). This minification has reduce the JS and CSS file size to 50% less, which in turn increases my application’s performance.
Good luck trying.
Related links,
YUI Compressor project on github
Yahoo! UI Library: YUI Compressor for .Net
Automatically minify and combine JavaScript in Visual Studio
Article helped me troubleshoot YUICompression
-33.867139
151.207114
Diganta Kumar's Blog 