JavaScript y CSS minimizados con Carabiner en CodeIgniter

Publicado: 11/12/2010 en CodeIgniter, css, desarrollo, JavaScript, php, Programación
Etiquetas:, , , , , , ,

You can read the English version of this post in http://phpsblog.agustinvillalba.com/javascript-css-minified-carabiner-codeigniter/

Hoy vamos a hablar de una potente librería disponible para el framework CodeIgniter, es: Carabiner. Esta librería nos permite incluir de forma específica para cada vista de nuestro sitio los archivos JavaScript y CSS que son necesarios, ahorrándonos tener que incluirlos todos, y además, los envía al usuario en un único archivo “.js” y “.css” con todos los que hemos ido incluyendo pero minimizados, con lo que el tamaño del “.js” y “.css” que se envía al usuario es mucho menor, con la consiguiente mejora de tiempo de carga del sitio que ello implica.

Instalando Carabiner en nuestro proyecto

Lo primero para instalar Carabiner en nuestro proyecto es descargarlo, podemos hacerlo desde su hilo en el foro de CodeIgniter. Para instalarlo simplemente hemos de colocar los archivos carabiner.php, cssmin.php y jsmin.php en el directorio /application/libraries de nuestro proyecto. Una vez hecho esto, hemos de colocar el archivo de configuración carabiner.php en el directorio application/config. En este archivo hemos de especificar la ruta de los directorios que contendrán nuestros archivos “.js” y “.css”.

Además, hemos de crear la carpeta cache dentro del directorio system/logs de nuestro proyecto. El directorio cache es donde la librería carabiner colocará los archivos .js y .css minimizados que genera y que son enviados al navegador del usuario. Este directorio necesita permisos de escritura por parte del servidor web, dado que es él quien genera los archivos.

Utilizando Carabiner

Para utilizar Carabiner en nuestras vistas simplemente hemos de cargar las tres librerías en aquellos controladores que carguen vistas con JavaScript o CSS o bien, para más comodidad, podemos añadirlas al archivo autoload.php dentro del directorio application/config, de forma que nuestro código sería algo así:

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

Una vez cargadas las librerías, tan sólo nos queda ir añadiendo en la vistas los distintos archivos “.js” y “.css” que necesitaremos para nuestro sitio. El código sería algo parecido a esto:

$this->carabiner->js('mi_archivo1.js'); $this->carabiner->js('mi_archivo2.js');

Es importante resaltar que únicamente es necesario poner el nombre del archivo, y no la ruta de directorios, dado que la ruta ya la hemos especificado en el archivo de configuración de Carabiner. El modo de funcionamiento de carabiner es que cada archivo que nosotros incluimos él lo va incluyendo en una “cola”, de forma que al final, cuando nosotros lo indiquemos todos esos archivos se minimizarán y enviarán al cliente.

Para la inclusión de los “.css” yo recomiendo hacerlo a través de una librería, llamémosla css_loader, en la que tendremos una función que simplemente hará las inclusiones de los archivos “.css” necesarios para la correcta maquetación del sitio, de la forma:


function load_css()
{
$ci =& get_instance();
...
$ci->carabiner->css('mi_archivo1.css');
$ci->carabiner->css('mi_archivo2.css');
$ci->carabiner->css('mi_archivo3.css');
...
}

De forma que en nuestra plantilla principal, dentro del bloque <head> nuestro código sería algo así:


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

Enviando los archivos al cliente

Por último, ya sólo nos queda ordenarle a Carabiner que genere los archivos minimizados y los envíe al navegador con el resto de la página HTML. Para generar los archivos css, podríamos hacerlo así:
...
<?php
$this->css_loader->load_css();
$this->carabiner->display('css');
?>
...

De esta forma se enviarán minimizados todos los css previamente añadidos a Carabiner en nuestra librería. Para generar el archivo js minimizado, yo recomiendo hacerlo justo antes del tag </body> de nuestra plantilla principal, para no retrasar la carga de la página con la ejecución de los archivos JavaScript en el navegador, nuestro código sería algo así:


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

La función empty_cache(‘both’,’yesterday’) hará que Carabiner elimine del directorio cache los archivos generados ayer, tanto los “.js” como los “.css”, así evitamos que este directorio empiece a llenarse de archivos de forma innecesaria cada vez que nosotros modificamos alguno de nuestros “.js” o “.css”, dado que, aunque los mantiene en cache, y no se genera un nuevo archivo cada vez que un usuario accede a nuestro sitio, sí se genera un nuevo archivo minimizado cuando nosotros modificamos uno de nuestros “.js” o “.css”.

Con esto ya lo tendríamos, y la velocidad de carga en el navegador de nuestro sitio web ha de verse mejorada.

You can read the English version of this post in http://phpsblog.agustinvillalba.com/javascript-css-minified-carabiner-codeigniter/

Anuncios
comentarios
  1. armando dice:

    NO logro bajar los archivos

  2. Bastante bueno.

    Hace un tiempo hice algo parecido pero esto sin duda está mejor, lo he probado y funciona bastante bien!

    Gracias por el dato

  3. ezekkiel dice:

    “Además, hemos de crear la carpeta cache dentro del directorio system/logs de nuestro proyecto.”.. En system o en application? porque en system no tengo una carpeta “log” para crear la carpeta “cache”..

    Muy bueno el dato!, Muchas Gracias!

  4. recién comencé a utilizar CodeIgniter y ya sé de su rendimiento…necesito saber si tengo la posibilidad de agregarle un CSS o una plantilla ya hecha y no utilizar una que me sale predeterminada creo!…

    PD: me sería muy útil una respuesta…saludos…gracias…

    • Nunca he utilizado plantillas en CI, pero si no me equivoco, estoy seguro de que podrías utilizar tus propias plantillas sin problemas, incluso utilizar motores de plantillas estilo Smarty y demás. No deberías tener problemas con la plantillas, en la guía de uso de CI hay algún ejemplo de uso de plantillas.
      Saludos.

  5. Alberto Morales Morales dice:

    Muy bueno el blog.
    Sería muy interesante un artículo sobre la instalación y utilización de CodeIgniter.

    Un saludo.

  6. Agustín, me ha parecido un artículo absolutamente genial y sencillo de poner en práctica. Estupendo, manteniendo el nivel al que nos tienes acostumbrado 😉

    Un abrazo crack!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s