Dynamically combine and minify your Javascript and CSS files with CodeIgniter

Update 10/27/2011: This method is outdated. I recommend using the very awesome Carabiner for your minification/concatenation needs.

If you still want to stick to this method, I would recommend implementing some sort of caching for your minified/concatenated files. Carabiner does this for your automatically, however!

——–
As any good UI developer will tell you, one of the best practices for speeding up your website is to minimize HTTP requests. Since most of the user’s loading time is tied up in things like loading scripts, images, flash, stylesheets, etc., reducing the number of these requests can drastically help improve loading time. It also helps to Gzip the components as well, which we’ll also cover in this tutorial.

This first tutorial will cover how to concatenate and minify your javascript and CSS files into a single HTTP request, using the CodeIgniter framework. For sites that load lots of scripts like jQuery plugins, this can be very beneficial for performance. Additionally, minification of scripts and stylesheets can help reduce the size of files, saving you bandwidth and shortening loading times for user.

So, let’s get started!

NOTE: I am assuming in this tutorial that you are already using an .htaccess file to eliminate index.php from your URIs.

Create an assets directory

You’ll want to manage your static assets (js, css, images, etc) by placing them in a directory called /assets in your web root. Here’s what your CI folder structure should look like:

You may have your application/ folder elsewhere, but for this tutorial we’ll have it in the default location, inside the /system folder.

You’ll also need the below two libraries, which are essential to this tutorial:

Let’s grab copies of the following two libraries:

JSMin-PHP, Ryan Grove’s PHP port of Douglas Crockford’s JSMin.
Joe Scylla’s CssMin

Name these two files JSMin.php and CssMin.php, respectively, and place them in your application/libraries folder.

Create an asset_url() helper function

Having a helper function to access your assets URL can be helpful in the event you decide to rename or change the location of your application. It works like the base_url() function, only it will link to your assets rather than your base URL (obviously). In config.php, add the following code:

We’ll be using css_path and js_path a little later in this tutorial, so keep those in mind.

Next, add this function in /system/helpers/path_helper.php

Add the following to your config/autoload.php file, to helpers:

Now you’re set! You can now call asset_url() anywhere to access your asset URL path. So instead of writing:

You would write instead:

Now that that’s out of the way, let’s get to the good stuff:

Create asset loader helper functions

In order to reduce our HTTP requests for our scripts to a single call, we’ll need a script tag that does the call for all files in one <script>tag. In your application/helpers folder, create a new file called asset_helper.php and insert the following code:

These helpers will be used on pages that you need to load specific JS or CSS files. Usage would be:

You might want to also add this helper to your autoload.php file as well, just like the path helper above. Just add it to the array.

Create a loader controller

In order to actually load our asset files, we’ll need a controller that handles the concatentation and minification of the scripts and files. Create a new file in your application/controllers directory called loader.php with the following code:

And that’s it!

Usage examples:

Javascript:

CSS:

To load files inside a directory, for example, assets/js/plugins/example.js, you would include 'plugins/example' inside your the array as shown above.

If you update your css/js, you can use the option $version parameter. Simply use an incrementing integer value of your choice and the browser will read the file as a new file rather than loading the cached file.

Happy coding!