I originally wanted to write this post in one, but there is quite a large amount of information which can be broken down into different areas, so I am going to publish it in three posts. Minification and Concatination of JavaScript and CSS Files – this post Versioning Combined Files Using Subversion – published shortly Versioning Combined Files Using Mercurial – published shortly Website Performance There are many ways to improve web site performance, two areas are reducing the amount of data that is served up from the web server and reducing the number of files that are requested. Here I will outline the process of minimizing and concatenating your javascript and css files automatically at build time of your visual studio web site/ application. To edit the project file in Visual Studio, you need to first unload it by right clicking the project in Solution Explorer. I prefer to do this in a third party tool such as Notepad++ and save it there forcing VS to reload it each time I make a change as the whole process in Visual Studio can be a bit tedious. Now you have the project file, you will notice that it is an MSBuild project file. I am going to use a fantastic utility from Microsoft called Ajax Minifier. This tool minifies both javascript and css. 1. Import the tasks for AjaxMin choosing the location you installed to. I keep all third party utilities in a Tools directory within my solution structure and source control. This way I know I can get the entire solution from source control without worrying about what other tools I need to get the project to build locally. 1: <Import Project="..\Tools\MicrosoftAjaxMinifier\AjaxMin.tasks" />
2. Now create ItemGroups for all your
js and css files like this. Separating out your non minified files and minified files. This can go in the AfterBuild container.
1: <Target Name="AfterBuild">
2:
3: <!-- Javascript files that need minimizing -->
4: <ItemGroup>
5: <JSMin Include="Scripts\jqModal.js" />
6: <JSMin Include="Scripts\jquery.jcarousel.js" />
7: <JSMin Include="Scripts\shadowbox.js" />
8: </ItemGroup>
9: <!-- CSS files that need minimizing -->
10: <ItemGroup>
11: <CSSMin Include="Content\Site.css" />
12: <CSSMin Include="Content\themes\base\jquery-ui.css" />
13: <CSSMin Include="Content\shadowbox.css" />
14: </ItemGroup>
1: <!-- Javascript files to combine -->
2: <ItemGroup>
3: <JSCat Include="Scripts\jqModal.min.js" />
4: <JSCat Include="Scripts\jquery.jcarousel.min.js" />
5: <JSCat Include="Scripts\shadowbox.min.js" />
6: </ItemGroup>
7: <!-- CSS files to combine -->
8: <ItemGroup>
9: <CSSCat Include="Content\Site.min.css" />
10: <CSSCat Include="Content\themes\base\jquery-ui.min.css" />
11: <CSSCat Include="Content\shadowbox.min.css" />
12: </ItemGroup>
3. Call AjaxMin to do the crunching.
1: <Message Text="Minimizing
JS and CSS Files..." Importance="High" />
2: <AjaxMin JsSourceFiles="@(JSMin)" JsSourceExtensionPattern="\.js$"
3: JsTargetExtension=".min.js" JsEvalTreatment="MakeImmediateSafe"
4: CssSourceFiles="@(CSSMin)" CssSourceExtensionPattern="\.css$"
5: CssTargetExtension=".min.css" />
This will create the *.min.css and *.min.
js files in the same directory the original files were.
4. Now concatenate the minified files into one for javascript and another for css. Here we write out the files with a default file name. In later posts I will cover versioning these files the same as your project assembly again to help performance.
1: <Message Text="Concat
JS Files..." Importance="High" />
2: <ReadLinesFromFile File="%(JSCat.Identity)">
3: <Output TaskParameter="Lines" ItemName="JSLinesSite" />
4: </ReadLinesFromFile>
5: <WriteLinestoFile File="Scripts\site-script.combined.min.js" Lines="@(JSLinesSite)"
6: Overwrite="true" />
7: <Message Text="Concat CSS Files..." Importance="High" />
8: <ReadLinesFromFile File="%(CSSCat.Identity)">
9: <Output TaskParameter="Lines" ItemName="CSSLinesSite" />
10: </ReadLinesFromFile>
11: <WriteLinestoFile File="Content\site-style.combined.min.css" Lines="@(CSSLinesSite)"
12: Overwrite="true" />
5. Save the project file, if you have Visual Studio open it will ask you to reload the project. You can now run a build and these minified and combined files will be created automatically.
6. Finally reference these minified combined files in your web page.
In the next two posts I will cover versioning these files to match your assembly.
