In developing a recent project, I found myself with the need to combine multiple CSS and Javascript files together. I started to look around for an easy-to-implement helper that can take care of this for me, but from what I could find, everything seemed to require numerous third-party libraries, or the inclusion of a number of different files to get the script combination working.
Update: This script has also been released on the CakePHP Bakery. You can view it here.
Update #2: It is now available on Github.
I wrote this helper with the view to achieving the combination of multiple asset files without any external dependencies.
Installation instructions
Installing and making use of this helper is a simple task. The steps are outlined below:
- Download the package, and extract the files contained within into their respective directories.
- Add the helper reference to the $helpers array in either the relevant controller, or in the AppController.
- Reference the ScriptCombinerHelper in your views and layouts.
Example installation
1. Add a reference to the helper in the AppController:
class AppController extends Controller {
public $helpers = array('ScriptCombiner');
...
}
2. Reference the ScriptCombinerHelper in your views:
Instead of referencing multiple files, like this:
echo $this->Html->css('default');
echo $this->Html->css('legacy');
echo $this->Html->css('jquery/tooltip');
echo $this->Html->css('jquery/multiselect');
echo $this->Javascript->link('jquery/core');
echo $this->Javascript->link('jquery/tooltip');
echo $this->Javascript->link('custom');
echo $this->Javascript->link('cufon/core');
You would now reference it like this:
echo $this->ScriptCombiner->css('default', 'legacy', 'jquery/tooltip', 'jquery/multiselect');
echo $this->ScriptCombiner->js('jquery/core', 'jquery/tooltip', 'custom', 'cufon/core');
Alternately, you can supply all the files as a single array to the method:
echo $this->ScriptCombiner->css(array('default', 'legacy', 'jquery/tooltip', 'jquery/multiselect'));
echo $this->ScriptCombiner->js(array('jquery/core', 'jquery/tooltip', 'custom', 'cufon/core'));
How does the caching mechanism work?
In order to keep the overhead as low as I can, I’ve bypassed using the core CakePHP caching engine. In the configuration file, the directory into which the combined Javascript and CSS files will be saved is defined. Basically, an MD5 hash is generated from the input files, and the cache filename is built up using a combination of the cache directory specified and the generated MD5 hash.
This cached file is kept for as long as the cache length is, and is only regenerated after the cache life has expired. The indicator to determine whether the cache file has expired is the file’s modified time. So, should you manually modify the cached file, the cached file’s cache life will most probably be extended.
Bugs and fixes
Please let me know of any bugs you come across, and I’ll post fixes for them too. I’ll be sure to credit where possible for specific bug fixes.
If you have any queries, questions or comments, please don’t hesitate to ask me - I’ll try to be as helpful as I can be. Hopefully, the code is commented well enough for you to figure most things out for yourself, but if there is a particular issue you’re struggling with (only related to the implementation of this helper), then please get in touch.
Now that you have the information, you can download the packaged helper.