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.
