We all know JQuery is awesome right? That should be common knowledge by now. But, if you have ever created an app that makes use of several of the fantastic plugins available for JQuery, then you are going to end up with multiple tags for JQuery alone...not to mention any of your own external javascript files.

So, why is this a problem?

First of all, there is a little bit of bloat going on in this scenario. One could easily end up with over 200Kb of javascript in an assortment of these files. The other thing to consider is that the browser can only make so many concurrent connections to the web server (each external javascript file is one connection by the way) so add all of these files, a bunch of images, a couple .css files and we are making that user wait longer than really necessary.

Lets reduce the number of browser - to - server connections.

That seems easy enough. Instead of multiple external script calls:

<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.jqModal.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.history_remote.pack.js"></script>

We could combine them all into one big javascript file and reference it:

<script type="text/javascript" src="/js/myBigScript.js"></script>

Well what happens when you want to make a change to one of the source js files? Or you need to change the order of how the files are included? Or maybe the javascript files needed vary based off of where you are in your app and you don't want to include ALL of the files every time? Thats where I think I can help...

I have just recently (as in today) finished up a custom tag to do just that. For lack of a better name I called it <cf_scriptalizer> Here is an example use of the custom tag.

<cf_scriptalizer 
	filePrefix="myscript"
		
	scriptalizerDirectory="/js" 
	
	scriptFileList="
		/js/jquery/jqModal.js,
		/js/jquery/jquery.js,
		/js/jquery/jquery.MultiFile.js,
		/js/jquery/jquery.blockUI.js,
		/js/jquery/jquery.corner.js,
		/js/jquery/jquery.form.js,
		/js/jquery/jquery.history_remote.pack.js,
		/js/jquery/jquery-dom.js
		"

	reload="true"
	>

• filePrefix (optional): prefix of the generated javascript file. "scriptalizer" by default
• scriptalizerDirectory: relative path to the desired output location
• scriptFileList: list of js files in the order you would include them
• reload (optional) - scriptalizer will inspect each js file for changes made since last access

More about reload: When/if you pass reload=true, <cf_scriptalizer> will inspect each of the source javascript files and if a change is detected, regenerate the combined javascript file.

Now that we have reduced the number of connections for external javascript files down to just one for this request, what can we do about reducing the size.

<cf_scriptalizer> takes an additional optional attribute of "minifierObject" as seen in the example below:

<cfset minifier = CreateObject("component","com.cfyuiminifier.cfYUIMinifier").init(path="/com/cfyuiminifier")/>

<cf_scriptalizer 
	filePrefix="myscript"
	scriptalizerDirectory="/js" 
	scriptFileList="
		/js/jquery/jqModal.js,
		/js/jquery/jquery.js,
		/js/jquery/jquery.MultiFile.js,
		/js/jquery/jquery.blockUI.js,
		/js/jquery/jquery.corner.js,
		/js/jquery/jquery.form.js,
		/js/jquery/jquery.history_remote.pack.js,
		/js/jquery/jquery-dom.js
		"
	minifierObject = #minifier#	
	reload="true"
	>

As you can see, I am passing in the object "minifier" that contains the method minify() that accepts a string of all of the comibined javascript and returns a string of the minified javascript.

This additional component was abstracted from the custom tag itself just in case the user has some issue with YUICompressor or wants to implement his/her own solution to compress/clean/minify/etc the source javascript.

In this example, the combined jquery files resulted in a 123.1 KB javascript file (pre-minification). But, once cfyuiminifier.minify() was run on the source, we ended up with a combined javascript file that was only 79.7 KB!

CAVEATS:

I have not yet run this on any live sites.

This is brand new code from my scribble pad, so please be aware you may encounter some bugs!

This was developed on my Linux machine and haven't tested it anywhere outside of this environment.

DOWNLOADS:

If anybody has any specific requests for features, or would like to contribute please let me know. I wrote this in an attempt solve a specfic need for some applications I have been working on, and ended up with something I thought might be beneficial to others. Please report back with any successes (or failures) with this tool...I am very interested in hearing about your experience(s).

How cool?! My uncle, Jim, has been creating pieces of art in various forms for as long as I can remember. Lately he has been creating t-shirt designs. Tonight at midnight, his first approved shirt.woot.com design goes on sale.

He has titled this piece Feed The Whale.

Jim describes it as "a kind of Haida and Tlingit
Indian influenced thing"

From what I hear, the shirt will be a creme american apparel shirt.

Very cool, and way to go Jim!

Check out more of Jim's art at his flickr page here.

Wow, this took some serious memorization and trial/error I bet.