The Joomla! Community Magazine™

A Library to Compress & Combine Javascript & CSS Files

Written by | Saturday, 01 September 2012 00:00 | Published in 2012 September
I am happy to say that I have completed implementing the library for the platform and system plugin for the CMS to enable library functionality on CMS.

The library and the CMS plugin can be found in the following links:

In my previous article for the developer network, I have published a guide on using the library to combine and compress Javascript/CSS files. You can find that article here.

First of all, I have to mention that there are some possible changes that I can make to the code of the library as suggested by community members. For an example, removing the usage of JFile and JFolder from the library and using the native php functions instead. Those I have postponed as I didn't have much time to work on that before the final evaluations deadline. You can find my post on the developer mailing list here. You can give your feedback there.

The system plugin for the CMS will be called on onBeforeCompileHead event. The plugin will catch all the assets registered with native platform methods such as addStyleSheet(), addScript() etc. And it will compress, combine and cache the assets according to the options given for the pugin.

Here are some screen shots of the configuration page of the plugin, click to enlarge.

 Compression Options

1

Combining Options

2

 Caching Options

3

How does the plugin affect the code of the rendered page?

Well, the plugin is not involved in rendering the page. What it really does is replace the $_script, $_scripts, $_style and $_styleSheets attributes of JDocument object with the modified javascript/css files right before the head is compiled.

So, when the head is compiled, the modified assets will be used to render the head of the document. Note that when combining the files, file sets will be created according to the attributes, so only the files that have similar attributes, will be combined.

Below are some screen shots of source code of a rendered html page, before and after the plugin is enabled.

Source of the Page before enabling the plugin

4 1


Source of the page after enabling compression


(Note the changed file paths and file names and removed comments in javascript/css declarations)

5 1

 Source of the page after enabling combining assets

6 1

 

I hope the screen shots will give you a rough idea about the system plugin. All feedback is warmly welcomed. Please give your feedback.

 

Read 18569 times
Tagged under Google Summer of Code