Comprimir Css y Js de forma automatizada

Comprimir Css y Js de forma automatizada

Cuando estamos desarrollando páginas web es bastante común, encontrarnos con situaciones en las cuales los desarrolladores y maquetadores, trabajamos en entornos de desarrollo con los archivos sin comprimir, de forma que se puedan modificar con facilidad. El problema viene a la hora de subir estos archivos a entornos de producción. En estos entornos los ficheros Css y Js deben estar comprimidos. En este post propongo una solución a este problema, explicando cómo comprimir Css y Js de forma automatizada.

Esta comprensión no es caprichosa, la compresión de archivos Css y Js aumenta la velocidad de carga de las páginas web, a las que Google da una mayor relevancia. Y no es menos importante en lo referente a la usabilidad, una velocidad de carga elevada puede provocar que los usuarios abandonen la página.

Para automatizar la compresión de archivos se ha elegido un servidor CentOS 7. Además vamos a necesitar instalar Java, una herramienta de compresión desarrollada en Java llamada YUI Compressor y un proceso demonio como Incron.

La idea es la siguiente, cuando subamos los archivos desde el entorno de desarrollo a producción, el proceso demonio detectará la modificación en cualquier fichero Css o Js de ciertos directorios. Cuando este proceso de modificación finalice, el demonio lanzará un fichero *.sh que contendrá los comandos necesarios para ejecutar la aplicación de compresión de los archivos Css y Js contenidos en el directorio en concreto.

Instalar Java 7

El primer paso es instalar Java en nuestro servidor, en caso de no tenerlo ya hecho, podéis visitar el siguiente enlace en el cual se instala java 7 y java 8.

Instalar YUI Compressor

Para comprimir los archivos Css y Js, vamos a descargar YUI Compressor. Para obtener información sobre su funcionamiento podéis visitar su página web oficial. YUI no requiere instalación, por lo tanto únicamente debemos descargarlo. Para ello podemos usar los siguientes comandos, o si lo preferimos descargarlo desde nuestro navegador y subirlo mediante alguna herramienta FTP como Filezilla al directorio elegido de nuestro servidor.

# mkdir /etc/minimizer/
# cd /etc/minimizer/
# wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar

Creación de los ficheros *.sh

Los archivos *.sh contienen los comandos de texto que se escribirían en una Shell para ejecutar el programa de compresión de forma automática. En primer lugar debemos crear el archivo *.sh tal y como se puede muestra a continuación.

#mkdir /home/sh/
#vi /home/sh/ejemplo.sh

Cuando hayamos ejecutado estos comandos nos aparecerá el editor. En el debemos poner las siguientes líneas.

mv /ruta_archivo/archivo.js /archivo.js
java -jar /etc/minimizer/yuicompressor-2.4.8.jar /archivo.js -o /archivo.js
mv /archivo.js /ruta_archivo/archivo.js

Una vez creado este archivo debemos darle permisos de ejecución a todos los usuarios de forma que evitemos algún posible problema con los permisos.

#chmod 755 /home/sh/ejemplo.sh

Debemos crear un archivo para cada directorio que queramos monitorear y repetir estas tres líneas por cada fichero que queramos comprimir. La idea consiste en configurar el proceso demonio para que escuche la modificación de algún fichero de un directorio. Cuando esta modificación se produzca debemos sacar el fichero a comprimir del directorio, comprimirlo y volverlo a colocar en el directorio. De otra forma podemos provocar un bucle infinito.

Instalación y configuración de Incron

En el último paso debemos descargar Incron desde el repositorio de CentOS y posteriormente configurarlo. Los archivos de configuración se guardan en el directorio «/etc/incron.d». Si queréis más información en las páginas referenciadas a bajo  tenéis un par de enlaces de interés.

# yum install incron

Una  vez descargado Incron, podemos comprobar mediante los siguientes comandos que no tiene reglas establecidas inicialmente y la lista de eventos soportados.

# incrontab -l
# incrontab -t

Si todo ha salido correctamente veremos la siguiente ventana.

incrontab-l-y-incrontab-t-comprimir-cssAntes de empezar a introducir nuestras reglas, debemos configurar un editor para Incron en el archivo «/etc/incron.conf»

# vi /etc/incron.conf

En mi caso yo utilizo «vi», pero podemos configurar cualquier otro a nuestra elección. Basta con añadir cualquiera de las siguientes líneas al final del fichero.

editor = vi
editor = nano

Una vez que tenemos preparado Incron, el siguiente paso es crear nuestras propias reglas. Para ello debemos usar el siguiente comando, que nos abrirá el editor de texto para que introduzcamos las reglas.

# incrontab -e
/ruta_archivo/ IN_MODIFY /home/sh/ejemplo.sh
# incrontab -d

Gracias a CentOS configurar Incron para que se ejecute automáticamente en caso de caída o reinicio del servidor es muy fácil, basta con usar los siguientes comandos.

# service incrond start
# systemctl enable incrond.service
# service incrond status

Si todo ha salido correctamente deberíamos ver una pantalla como la siguiente, en la cual el proceso se encontraría «active (running)» y la carga del servicio «enabled». Además a través de la última línea de comandos se puede ver información de los eventos lanzados por Incron.

resultado-de-comprimir-css

Referencias

Linux incrond inotify: Monitor Directories For Changes And Take Action

http://www.cyberciti.biz/faq/linux-inotify-examples-to-replicate-directories/

Tutorial de «incron»

http://www.cyberhades.com/2009/01/30/tutorial-de-incron/

 

 

Debes haber iniciado sesión para publicar un comentario.