Automatically minify and combine JavaScript and CSS files in any web site
page 5 of 8
by Matt Perdeck
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 57498/ 153

Installation

Installing the CombineAndMinify package involves these steps:

1.    Common installation - applies to all environments.

2.    IIS 7 related - only applies if your live site runs under IIS 7.

3.    IIS 6 related - only applies if your live site runs under IIS 6.

4.    Development environment related -  only applies if you want to use the package not just in your live site, but also in your development environment.

Common Installation 

Compile the package:

1.    Download the zip file with the source code, and unzip in a directory.         

2.    Open the CombineAndMinify.sln file in Visual Studio 2008 or later.         

3.    You'll find that the sources are organized in a solution, with these elements:         

·         Project CombineAndMinify is the actual package.             

·         Web site Testsite contains a lot of (functional but rather disorganised) test cases.              Ignore this unless you want to test the package.         

4.    Compile the solution. This will produce a CombineAndMinify.dll file in the CombineAndMinify\bin folder.     

Update your web site:    

1.    Add a reference to CombineAndMinify.dll to your web site (in Visual Studio, right click your web site, choose Add Reference)     

2.    Add the custom section combineAndMinify to your web.config:         

<configuration>
     ...
     <configSections>
         ...
         <section name=“combineAndMinify” type=“CombineAndMinify.ConfigSection”/>
          ...
     </configSections>
     ...
</configuration>

Make head sections updatable

Allow the package to process the head sections of your pages. That way, it can replace the tags loading individual JavaScript and CSS files with tags loading combined files:

1.    Make sure that the head tags of your pages have runat=“server”, like so:                           

<head runat=“server”>

When you create a new page in Visual Studio, it creates a head section with             runat=“server”, so you probably don't have to change anything here.                                

2.    Add a folder called App_Browsers to the root folder of your web site.                  

3.    Use your favorite text editor (such as Notepad) to create a text file in the App_Browsers folder. Call it HeadAdapter.browser. Into that file, copy and paste this code:             

<browsers>
   <browser refID=“Default”>
     <controlAdapters>
       <adapter controlType=“System.Web.UI.HtmlControls.HtmlHead”
          adapterType=“CombineAndMinify.HeadAdapter” />
     </controlAdapters>
   </browser> 
</browsers>

This tells ASP.NET to leave processing of all HtmlHead controls (which represent the head tags) to the class CombineAndMinify.HeadAdapter (which is part of the package).              

Trust level Full      

Make sure that your site has trust level Full. This allows it to access the combineAndMinify section.  If your web.config contains           

<trust level=... />

remove it. You'll than get the default trust level, which is Full.  

IIS 7

Only do these steps if you use IIS 7 for your live site or your development environment. If you only use IIS 6 or IIS 7 in classic mode, skip to the IIS 6 section.  

The package uses an HTTP Handler to combine and minify JavaScript and CSS files on the fly. To reduce CPU overhead, it caches the combined files, so they only get combined and minified after they have been changed on the file system.  

To configure the HTTP Handler, add the following to your web.config:  

</configuration>
     ...
     <system.webServer>
         <validation validateIntegratedModeConfiguration=“false”/>
         ...
         <handlers>
             ...
             <add name=“JavaScriptHandler” verb=“*” path=“*.js” 
type=“CombineAndMinify.HttpHandler, CombineAndMinify” 
resourceType=“Unspecified”/>
             <add name=“CssHandler” verb=“*” path=“*.css”
 type=“CombineAndMinify.HttpHandler, CombineAndMinify” 
resourceType=“Unspecified”/>
         </handlers>
         ...
     </system.webServer>
     ...
</configuration>

IIS 6 

Only do these steps if you use IIS 6 or IIS 7 in classic mode. If you use IIS 7, do the installation for IIS 7. If you want to invoke the package not only in your live environment but your development environment as well, than do the installation related to your development environment as well. 

1.    Configure the HTTP Handler in your web.config:           

<configuration>
     ...
     <system.web>
         ...
         <httpHandlers>
             ...
             <add verb=“*” path=“*.js” type=“CombineAndMinify.HttpHandler,
CombineAndMinify” />
             <add verb=“*” path=“*.css” type=“CombineAndMinify.HttpHandler, 
CombineAndMinify” />
         </httpHandlers>
         ...
     </system.web>
     ...
</configuration>

     

2.    Send all requests for JavaScript and CSS files to the ASP.NET handler. That allows the package to combine and minify them.         

a) Open the IIS Manager - click Start | Administrative Tools | Internet Information Services (IIS) Manager.                  

b) Expand your server. Expand Web Sites. Right click your web site and choose Properties.                  

c) Click the Home Directory tab, and then click the Configuration button.         

d) Get the path to the ASP.NET handler:

·         Click the line with the .aspx extension.                 

·         Click the Edit button.                 

·         Copy the contents of the Executable box. If you use .Net 2 or .Net 3.5, it will be  C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll.                                  

·         Click Cancel to dismiss the dialog.                              

e) Tell IIS 6 to let ASP.NET handle all requests for files with extension .js:

·         Click the Add button.                                  

·         Paste the path to the ASP.NET handler you just found into the Executable field.                 

·         Enter .js into the Extension field.                 

·         Uncheck the Verify that file exists box.                 

·         Click OK.             

f) Repeat the last step, but now for extension .css.         

g) Click OK to dismiss the Configuration dialog.         

h) Click the Apply button, and then click OK to dismiss the Properties dialog.

Development Environment

By default, the package is only active when your site is in Release mode - that is, if you have 

<compilation debug=“false”> 

in your web.config. That makes sense, because the package doesn't affect the functionality of your site - it just makes it faster. If this arrangement works for you, there is no need to do any installation related to your development environment, so you can skip this section.   

If you do want to activate the package in your development environment, you need to run your debugging sessions under IIS 7, instead of under Cassini (the web server that normally runs when you hit F5 in Visual Studio). This is because the package uses an HTTP Handler to process JavaScript and CSS files, and Cassini in .Net 3.5 doesn't support HTTP Handlers.  

Note that IIS 7 is included in the Home Premium, Business, Enterprise and Ultimate versions of Windows Vista and Win 7 (but not the Starter and Home versions). That means you probably already have it on your system.  

Here is how to run your debugging sessions under IIS 7:  

1.    Install IIS 7 on your development machine

2.    Create a development site in IIS 7

3.    Get Visual Studio to use IIS 7 instead of Cassini

4.    Do the installation steps related to IIS 7

5.    Make sure the package is active in debug mode

Let's go through these steps one by one. 

1. Install IIS 7 on your development machine 

1.    Click Start | Control Panel | Programs | Turn windows features on or off.

2.    Check Internet Information Services.

3.    Expand the Internet Information Services node, expand Web Management Tools and make sure IIS Management Console is checked. This will allow you to run the IIS Manager. 

4.    Expand IIS 6 Management Compatibility and make sure IIS Metabase and IIS 6 configuration compatibility is checked.  You need this to be able to use IIS from Visual Studio. 

5.    Expand the World Wide Web Services node and then the Application Development Features node.  Make sure that ASP.NET is checked, so the server can run ASP.NET applications. 

6.    Also under World Wide Web Services, expand Security and make sure  Windows Authentication is selected. You need this to be able to use IIS from Visual Studio. 

7.    Click OK. Windows will take a while to implement the changes. 

2. Create a development site in IIS

Now that you have installed IIS 7 on your machine, create a site in IIS 7 that Visual Studio can use for debugging sessions:  

1.    While still in IIS Manager, expand your machine. Right click Sites and choose Add Web Site. The Add Web Site dialog opens.

2.    Make up a site name. As the physical path, enter the root folder of your source files – the one with default.aspx and web.config. Enter a port that isn’t already in use, for example 1080. Click OK. 

3.    Enable Windows Authentication. Double click your new site, double click Authentication, right click Windows Authentication and choose Enable.

3. Get Visual Studio to use IIS 7 instead of Cassini

If you use a Web Site:  

1.    Run Visual Studio as administrator. Right click your web site and choose Start Options.  The Property Pages window opens, with the Start Options tab selected. 

2.    In the Server section, select Use custom server. In the Base Url field, enter the localhost address with the port you entered when you created the development site in IIS manager - for example http://localhost:1080

3.    Click OK. 

If you use a Web Application:  

1.    In Visual Studio, right click the web application and choose Properties. The properties window opens. 

2.    Click the Web tab.   

3.    Scroll down to the Servers section and select Use Local IIS Web server. In the      Project Url field, enter the localhost address with the port you entered when you created the development site in IIS manager. 

4.    Save the properties. 

Now when you hit F5 in Visual Studio to run your site in debug mode, you'll find it runs under IIS 7 instead of under Cassini. Apart from that, your debugging experience is the same - you can still set breakpoints, etc.   

4. Do the installation steps related to IIS 7

Now that you're using IIS 7 to do development, do the IIS 7 related installation if you have not already done that.   

5. Make sure the package is active in debug mode

To see how to do this, use the active attribute in the combineAndMinify element, as described in the Configuration section below.


View Entire Article

User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-12-14 4:33:33 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search