Grunt: Introduccion

Cuando desarrollamos aplicaciones o paginas web muchas veces nos topamos con problemas como el optimizar los tiempos de carga y para esto buscamos reducir el tamaño de los archivos javascript, CSS o las imágenes pero siempre haciéndolo de manera artesanal (o sea archivo por archivo). Estas y otras tareas las podemos realizar con Grunt.

¿Que es Grunt?

Grunt es una librería Javascript que nos permite realizar tareas repetitivas de forma automática. Lo importante a mencionar de esta librería es que hay una gran comunidad de desarrolladores que aportan nuevos plugins para optimizar mas tareas, estos plugins no hace falta descargarlos uno mismo sino que ya npm  dispone de un mecanismo por el cual hacerlo con solo colocar el nombre del plugin y la versión en un archivo JSON (para los que conozcan Java esto seria un equivalente al pom.xml de Maven).

Ademas del archivo JSON que contiene todas las dependencias existe otro archivo Javascript que se debe llamar Gruntfile el cual contendrá todas las tareas que se deben realizar.

¿Como lo uso?

Para poder usar Grunt debemos previamente tener instalado NodeJs y npm, en general este ultimo se encuentra presente en nuestra maquina cuando instalamos NodeJs  o si contamos con una versión superior a la 0.6.3. Una vez que tengamos instaladas ambas cosas procedemos a instalar a nivel global (que este disponible para todos los proyectos sin necesidad de instalarlo para cada uno) el cliente de Grunt para ello ejecutamos el siguiente comando:

Ahora bien dentro de nuestro proyecto (nos referimos a la carpeta que contiene el código de la aplicación o la pagina web) deberemos crear dos archivos necesarios para que Grunt funcione: el manejador de dependencias (package.json) y el archivo que contiene las tareas a realizar (Gruntfile).

Para empezar creamos el archivo package.json y le colocamos la estructura básica

La forma optima de crear este archivo es por medio de ejecutar el comando npm init el cual nos hará una serie de preguntas (el nombre del proyecto, el autor, la versión entre otras cosas) luego de las cuales nos generara el archivo automáticamente.

Una vez hecho esto por linea de comando ejecutamos el comando de npm para instalar el módulo de grunt dentro del proyecto

Una vez hecho esto si abrimos el archivo de dependencias (package.json) veremos que nos agrego Grunt

Luego deberemos crear el Gruntfile que contendrá las tareas a realizar, para explicar esto en mejor detalle en el próximo apartado hablaremos mas en detalle de algunos plugins básicos. A grandes rasgos el Gruntfile contendrá:

Lo ultimo que tenemos que hacer luego de completar el archivo con los datos que faltan es ejecutar las tareas, para esto nos posicionamos dentro de la carpeta que contiene el Gruntfile y ejecutamos

Esto ejecutara todas las tareas por default que se encuentran declaradas. Supongamos que queremos ejecutar un tarea en especial deberíamos especificar el nombre de la tarea y la función definida por nosotros. Por ejemplo reducir el tamaño de un Javascript:

Algunos plugins básicos

Si bien existen gran cantidad de plugins con gran difusión en este apartado trataremos brevemente solo algunos que son los que mas uso se les da.

Uglify (reduciendo Javascript)

Este plugin nos permite reducir el tamaño de casi todos los archivos Javascript que tengamos a excepción de los archivos que manejan AngularJS que usan un plugin en particular. Por reducción se entiende quitarle todos los espacios en blanco que tiene el archivo.

Para usar este plugin primero deberemos instalarlo

Luego deberemos agregar la tarea dentro del archivo Gruntfile, hay varias variantes de como declarar la tarea dependiendo de como se quiera hacer

  • Un archivo que contenga todos los demas

  • Un archivo reducido por cada uno de los que existe pero declarandolos uno por uno

  • Un archivo reducido por cada uno de los que existe pero sin la necesidad de declararlos uno por uno

Luego de seleccionar la estrategia que mas nos convenga deberemos cargar la librería y si es necesaria ponerla como default

Cssmin (reduciendo CSS)

Este plugin nos permite reducir cualquier tipo de archivo CSS eliminando al igual que lo hace Uglify todos los espacios en blanco que son innecesarios.

Para usar este plugin primero deberemos instalarlo

Luego deberemos configurar la tarea dentro del Gruntfile, a continuación se mostrara una de las formas de configurar la tarea pero las estrategias son las mismas que las que se describen en Uglify

Por ultimo deberemos cargar la librería y ponerla como tarea por default

Ngmin (reduciendo archivos AngularJS)

Este plugin es exclusivo para poder reducir el tamaño de los archivos que tienen funcionalidad de AngularJS.

Para usar este plugin primero deberemos instalarlo

Luego deberemos configurar la tarea dentro del Gruntfile, a continuación se mostrara una de las formas de configurar la tarea pero las estrategias son las mismas que las que se describen en Uglify

Por ultimo deberemos cargar la librería y ponerla como tarea por default

Conclusión

Como se ha visto a lo largo  de esta breve introducción sobre el mundo de Grunt nos permite realizar muchas tareas repetitivas de manera fácil y sencilla sin necesidad de invertir gran cantidad de tiempo

 

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *