JavaScript and CSS minified with Carabiner in CodeIgniter

Today we will talk about a powerful library available for the framework CodeIgniter, it is: Carabiner. This library allows us to include specifically for each view of our site the JavaScript and CSS files that are needed, avoiding to have to include them all at once, and also it sends them to the user in only one single file .”js” and one “.css” with all that we have including before but minified, so the size of the “.js” and “.css” that are sent to the user is much lower, with the improvement of loading time of the site that this implies.

Installing Carabiner in our project

The first thing we need for installing Carabiner in our CodeIgniter project is to download it. We can download it from the CodeIgniter forum. In order to install it, we simply have to place the files “carabiner.php”, “jsmin.php” and “cssmin.php” files into the directory /application/libraries of your project. Once this is done, we have to place the configuration file “carabiner.php” into the directory /application/config. In this file we have to specify the path to the directories that contain our files “.js” and “.css”.

Furthermore, we have to create the cache folder within the directory system/logs of our project. The cache directory is where the library carabiner places the files “.css” and “.js” minified that are generated and are sent to the user’s browser. This directory requires write permissions by the web server, since it is the web server who actually writes the minified files.

Using Carabiner

To use Carabiner in our view we simply load the three library files in those controllers that use views that contain JavaScript or CSS code. For convenience, we can add them to the file “autoload.php” within the directory /application/config, so that our code is something like this:

$this->load->library('carabiner');
$this->load->library('cssmin');
$this->load->library('jsmin');

Once we have loaded the libraries, we only have to go on adding the “.js” and “.css” that we will need for our site to the different view files. The code would look something like this:

$this->carabiner->js('file1.js');
$this->carabiner->js('file2.js');

It is remarkable that you only need to put the file name, without the directory path, since the path have been set already in the configuration file of Carabiner. The way that Carabiner works is that each file we include in Carabiner, she will include it in a “queue”, so that in the end, when we set the command, she will minify all those files and send them to the client.

For the inclusion of “.css” files I would recommend to do it through a library developed by us for this purpose, I call it css_loader. There we have a function that will simply make the inclusions of the “.css” files needed for the proper layout of the site, something like this:

function load_css()
{
    $ci =& get_instance();
    ...
    $ci->carabiner->css('my_file1.css');
    $ci->carabiner->css('my_file2.css');
    $ci->carabiner->css('my_file3.css');
    ...
}

So in our main template, within the block <head>, our code would be something like:

...
<?php css_loader->load_css(); ?>
...

Sending the files to the client

Last but not least, we simply need to order to Carabiner to send the minified files to the user’s browser with the rest of the HTML code. To generate the minified css files we could do it like this:

...
<?php
    $this->css_loader->load_css();
    $this->carabiner->display('css');
?>
...

This will send all css previously added to Carabiner from our own library. To generate the minified “js” file, I recommend doing it just before the tag </ body> of our main template, so that, the loading of the page is not blocked with the execution of the JavaScript files in the browser. Your code might look like:

...
<?php
$this->carabiner->display('js');
$this->carabiner->empty_cache('both','yesterday');
?>
</body>

The function empty_cache(‘both’, ‘yesterday’) will cause that Carabiner deletes from the cache directory all the files that were generated yesterday (or before), both the “.js” files as the “.css”. So that, we avoid this directory starts to fill up with unnecessary files every time we modify any of our original “.js” or “.css” files, because, although it keeps the files in cache and a new file is not generated each time a user accesses our site, a new minified file is actually generated when we modify one of our original “.js” or “.css”.

With this we would have it, and the loading speed in the browser of our website has been improved.

1 thought on “JavaScript and CSS minified with Carabiner in CodeIgniter

Leave a Reply

Your email address will not be published. Required fields are marked *