Como minimizar (minify) CSS y JS desde PHP (y uso con Zend Framework)

Minimizar (traduccion extraña del verbo inglés "minify"), se refiere a reducir lo más posible el tamaño  de los archivos CSS y JS antes de ser enviados al cliente. También a veces se pueden combinar varios archivos en uno solo.

El motivo por el cual la minimizacion es deseable es simple: mientras menos sean, y más pequeños, los archivos que se envíen al browser a través de internet, menos ancho de banda se ocupa y menos tiempo se demora en cargar la página web.

Recordemos que para poder ver una página web, se deben descargar desde el servidor múltiples archivos:

• el archivo HTML, con la estructura base de la página
• el o los archivos CSS
• el o los archivos JS
• imágenes, etc.

La descarga de cada archivo implica una conección distinta al servidor, y el browser debe esperar hasta que todos los archivos estén descargados para que la págiina se muestre y sea completamente funcional. Por lo tanto, mientras menos archivos tenga que descargar el browser, y mientras menos pesen, el rendimiento será mejor.



¿Pero cómo se empequeñece (minify) un archivo? Pues, quitándole todo lo que al browser no le sirve, aunque a los programadores sí: espacios en blanco, saltos de línea, comentarios, etc.



Existen varias librerías que pueden hacer esto por nosotros. En este tutorial descargaremos y utilizaremos dos de ellas para crear una clase que haga lo siguiente:

A partir de un listado de archivos CSS y JS, cree sus versiones minimizadas sólo si es necesario.

Pasos a seguir:

1. Segun un listado de archivos CSS y JS, verifique su fecha de modificación
2. si la fecha de modificación es posterior a la de su versión minimizada, o si la versión minimizada no existe, crear el archivo minimizado.

Bien, veamos de que va esto.

Librerías  a utilizar:

Para minimizar archivos CSS, utilizaremos la librería CssMin, la cual podemos descargar desde acá: http://code.google.com/p/cssmin/

Para minimizar los archivos JS, utilizaremos JSMin, cuyo sitio es: https://github.com/rgrove/jsmin-php

Ambas se utilizan en forma muy similar.

Ahora, crearemos una clase con un métido que reciba un listado de archivos a minimizar, y realice el proceso. La clase es esta:

<?php

//librerias necesarias, las que se indican mas arriba
require_once "minify/cssmin.php";
require_once "minify/jsmin.php";

class JasonMinify
{

    /**
     *  recibe un array de archivos css y js de entrada, y escribe las versiones
     *  minimizadas de cada uno de ellos en la carpeta de origen.
     * Ej: entra estilo.css, y se crea estilo.min.css
     * @param array $files
     */
    public static function doMinify(array $files)
    {
//solo si quieres ver los errores
        CssMin::setVerbose(true);

// se pueden indicar filtros para procesar, pero no los usaremos aqui
        $filters = array(/* ... */);
        $plugins = array(/* ... */);

//recorro el arreglo de archivos
        foreach ($files as $f)
        {
            echo("Minify: procesando $f...<br/>");
            if (!file_exists($f))
            {
                echo("--- $f NO EXISTE<br/>");
                continue;
            }

//fecha modificacion arch de entrada
            $fecha_update = filemtime($f);
//            echo("$f was last modified: " . date("F d Y H:i:s.", $fecha_update) . ".<br/>");

            $info = pathinfo($f);
            $output = $info['dirname'] . '/';

//nombre del archivo de salida: nombrearchivoentrada.min.extension
            $new_name = $output . $info['filename'] . '.min.' . $info['extension'];

//fecha modificacion archivo de salida
            $fecha_update2 = filemtime($new_name);

//solo si arch origen es mas nuevo que arch de destino,
//lo minimizo
            if ($fecha_update > $fecha_update2)
            {
                $result = null;
//segun la extensión, llamo a la librería correspondiente
                switch ($info['extension'])
                {
                    case 'css':
// Minify via CssMin adapter function
                        $result = CssMin::minify(file_get_contents($f)); //, $filters, $plugins);
                        break;
                    case 'js':
                        $result = JSMin::minify(file_get_contents($f));
                        break;
                }
                if ($result != null)
                {
                    echo("\tescribiendo en $new_name...<br/>");
                    file_put_contents($new_name, $result);
                }
            } else
            {
                echo ("$new_name no necesita ser actualizado.<br/>");
            }
        }
    }

}

?>

Listo. Tenemos la clase. Ahora un ejemplo de como utilizarla:

<?php
    require_once "JasonMinify.php";

    //minify archivos
    $files = array(
        'js/AjaxUtils.js',
        'js/VariosUtils.js',
        'js/onload.js',
        'css/print.css',
        'css/estilos.css'
    );
    //llamo al metodo estatico
    JasonMinify::doMinify($files);

?>

Y eso sería todo.

Puedes descargar las librerías y el código de ejemplo desde acá:
https://docs.google.com/open?id=0BzYMbwEMj1hwRjVBXzFxRHdKeEk

Ahora, ¿cómo usarlo dentro de Zend Framework?

Simple, solo hay que seguir estos sencillos pasos:

1) incluir los archivos
JasonMinify.php, cssmin.php y jsmin.php
 en la carpeta /library del proyecto.

2)  En el archivo /public/index.php en algun lugar antes de la instruccion

$application->bootstrap()
        ->run();

debemos colocar

Zend_Loader::loadClass('JasonMinify');


Y luego podemos usarla donde queramos, segun el ejemplo, sin la necesidad de colocar la instrucción 

require_once "JasonMinify.php";


Bien, espero que les haya sido de utilidad.

Si no sabes lo que es Zend Framework, puedes revisar mi tutorial aca.

Suerte!