Asset compression is a small thing you can do to create more responsive applications. Rather than having your application serve up hundreds of smaller css and javascript files, you can serve up one or two and still retain the benefits of using separate files for different libraries in development.

A How-to

We’ll be using the AssetCompress plugin from CakePHP Lead Developer Mark Story

You’ll want to install the asset_compress plugin by Mark Story. In your composer.json, add the following:

"markstory/asset_compress": "dev-master"

Then you’ll want to run composer update. Next, ensure the plugin is loaded. It must be loaded after the global Dispatcher.filters in your bootstrap.php:

<?php
// in app/Config/bootstrap.php
Configure::write('Dispatcher.filters', array(
    'AssetDispatcher',
    'CacheDispatcher'
));
CakePlugin::load('AssetCompress', array('bootstrap' => true));
?>

Finally, we’ll need an app/Config/asset_compress.ini file to configure the plugin:

[General]
cacheConfig = false
[js]
cachePath = WEBROOT/cache_js/
[css]
cachePath = WEBROOT/cache_css/

The paths are used to cache the files on disk. Those paths must exist, so create them:

mkdir -p path/to/webroot/cache_js path/to/webroot/cache_css

Now we’ll need to add a js section to our asset_compress.ini. This will be used to specify a list of libraries to handle as one build:

[externals.js]
files[] = zepto.js
files[] = underscore.js
files[] = backbone.js

When you want to include this build on your page, you can use the AssetCompress helper:

<?php echo $this->AssetCompress->script('externals'); ?>

The name here refers to the build you created earler. Note that we do not use the extension when refering to it in your view.

Lets assume we want a custom filter. This filter should prepend some ascii text to the output:

<?php
App::uses('AssetFilterInterface', 'AssetCompress.Lib');
class AsciiFilter implements AssetFilterInterface {
    public function output($file, $contents) {
        $art = <<<ART
/*
 (\_/)
(='.'=)
(")_(")
*/
ART
        return $art . $contents;
    }
}
?>

Next, we’ll need to configure this for general usage. In the [js] section of your asset_compress.ini, add the following:

filters[] = AsciiFilter

Now when you reference it, it will contain the ascii art!

For production use, I recommend running the associated shell to generate css/js assets on deploy. For instance, you might do:

### clear existing assets
cake AssetCompress.AssetCompress clear
# build assets
cake AssetCompress.AssetCompress build

The above would build asset files in the defined directories for you. If your server - apache, cherokee, nginx - serves files on disk up before hitting PHP, then this should be an instant performance gain. Otherwise, the asset_compress plugin has the ability to generate these files dynamically on request.

Wrap up

This was a short article meant to display what you can do with the asset_compress plugin. Hopefully you have this or a similar system setup in your CakePHP application. Happy baking!