Compress and Consolidation of JavaScript and CSS files for .NET

12 באוקטובר 2008

Hi,


There is cool open source project in codeplex called: Javascript and CSS Consolidation for ASP.NET that give infrastructure for compress and consolidation JS and CSS files for ASP.NET application.


Project Description


A library for ASP.NET that provides an easy way to consolidate external javascript and css files. The primary goals for this project are:

* Make the development environment mirror production as much as possible (e.g. files should be consolidated in all environments including the local dev box)
* Allow the developer to organize their scripts and styles in as many files as they please without compromising on performance
* Make the process seemless for the developer so that they can edit their files and immediately have them included on the next page request (without the need to build or run an external tool)
* Have it all integrate nicely with ASP.NET and MSBuild


Introducation


As the web progresses and AJAX becomes more and more popular, the amount of javascript in a typical website is growing. As a result, being able to manage your scripts (and css) is becoming critical. From the developer's point of view, you want to be able to organize your code into lots of files and freely include comments in your scripts where necessary. However, as a website grows, having lots of script includes and comments in the scripts has a significant effect on performance for the end user. (more round trips for the browser and larger files to download). What is ideal then, is to be able to break out your scripts into as many files as you want, adding as many comments as you would like, and then put your scripts through a packaging process so that when the website runs, it includes all of your scripts as one or two larger files with all of the comments and insignificant whitespace taken out). Out of the box, ASP.NET does not give you much help in this area, and while there are plenty of libraries out there that can compress and consolidate scripts, automating them and integrating them into your environment is not always easy. This library exists to make that process seem less.


How It Works



This library provides a configuration section where you can create groups in which your .js and .css files will be included on your page. The groups are specified using regular expressions. Here is an example of a config section:

<almWitt.web.resourceManagement consolidate="true">
<clientScripts compress="true">
<group consolidatedUrl="~/controls.js">
<include>
<add pattern=".ascx.js"/>
<add pattern=".aspx.js"/>
</include>
</group>
<group consolidatedUrl="~/default.js">
<!– no include so everything is included except that which is explicitly excluded –>
<exclude>
<add pattern="~/thirdpartyscripts/"/>
<add pattern="~/scripts/ExcludedScript.js"/>
</exclude>
</group>
</clientScripts>
<cssFiles>
<group consolidatedUrl="~/allstyles.css">
<include>
<add pattern=".css"/>
</include>
</group>
</cssFiles>
</almWitt.web.resourceManagement>

You can find the project here.


 


 

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

2 comments

  1. Avi Pinto12 באוקטובר 2008 ב 12:39

    thanks man, i have just started to think about doing something with all the js files in our projects…

    Reply
  2. Rotem Bloom13 באוקטובר 2008 ב 2:14

    Thanks for the comment Avi. You can also use the ScriptManager of .NET 3.5 if you want to Combine JS files. The is a new property that called: CompositeScript.








    Reply