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.
