Gulp: Introduccion

Como hemos mencionado en un post anterior cuando desarrollamos aplicaciones o sitios web muchas veces nos topamos con ciertos problemas (optimizar los tiempos de carga reduciendo el tamaño de los archivos como los js, css y las imágenes). El problema de estas tareas radica en que debemos hacerlo por cada uno de los archivos que tenemos lo cual hace que sea tedioso y repetitivo. Gulp viene a solucionar estos problemas de una manera ordenada y simple

¿Que es Gulp?

Gulp es una librería Javascript que nos permite automatizar ciertas tareas repetitivas. Para poder automatizar distintas tareas existen plugins específicos que han sido desarrollados por la creciente comunidad de Gulp, estos plugins pueden ser descargados por medio de npm ya que dispone de una funcionalidad encargada de bajarnos cada uno de los plugins de forma automática. Todas las dependencias de plugins que son requeridos se van añadiendo a medida que las necesitemos dentro un archivo llamado package.json.

Ademas del archivo JSON que contiene todas las dependencias existe otro archivo Javascript que se debe llamar gulpfile 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 instalado en nuestra maquina cuando instalamos NodeJs o si contamos con una versión instalada superior 0.6.3. Una vez que tengamos instaladas ambas cosas procedemos a instalar a nivel global la librería para poder ejecutar los comandos de Gulp desde cualquier directorio, 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 sitio web) deberemos crear dos archivos necesarios para que Gulp funcione: el manejador de dependencias (package.json) y el archivo que contiene las tareas a realizar (gulpfile.js).

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 Gulp

Luego deberemos crear el gulpfile (gulpfile.js)  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 gulpfile 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 gulpfile 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.

Reduciendo el Javascript (Uglify)

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 gulpfile

La declaración de la tarea se puede hacer dentro de lo que es el task default que se ha mencionado anteriormente o bien como se encuentra aquí arriba por fuera y modificando el task para que quede de la siguiente manera

Esta ultima opción es la recomendada ya que si el día de mañana queremos hacer que no se ejecute una determinada tarea bastaría con removerla de array sin borrar el resto del código.

Reduciendo los CSS (minify-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 agregar la tarea dentro del archivo gulpfile

Luego debremos agregar la tarea para que se ejecute por default

Reduciendo las imagenes (imagemin)

Este plugin nos permite reducir el tamaño de cierto tipo de imagenes (PNG, JPEG, GIF y SVG)  mas alla de que usemos algun programa como ser Photoshop para optimizarlas.

Para usar este plugin primero deberemos instalarlo

Luego deberemos agregar la tarea dentro del archivo gulpfile

Luego debremos agregar la tarea para que se ejecute por default

Reduciendo el HTML (minify-html)

Este plugin nos permitira reducir el tamaño de los archivo HTML que tengamos eliminando al igual que los anteriores plugins todos los espacios en blanco que contiene. Estos espacios son necesarios a la hora de desarrollar para poder entender de forma mas facil la estructura del HTML pero el browser no los necesita para poder interpretarlo.

Para usar este plugin primero deberemos instalarlo

Luego deberemos agregar la tarea dentro del archivo gulpfile

Luego debremos agregar la tarea para que se ejecute por default

Diferencias con Grunt

Tanto Grunt como Gulp realizan tareas similiares y con una gran cantidad de plugins en ambos casos debido a su mayoria a la gran comunidad de desarrolladores que colaboran. A grandes rasgos las difrencias son:

  • Gulp tiene una forma mas sencilla de crear el archivo de configuracion (gulpfile)
  • Grunt tiene una comunidad mucho mas amplia y existen gran cantidad de tutoriales en la red
  • Gulp es mucho mas flexible y veloz

Conclusión

Gulp es una buena alternativa a Grunt en lo que respecta a realizar tareas de forma automatizada ya que posee ventajas en lo que es la creacion de la configuracion de las mismas, pero todavia no posee el mismo nivel de difusion que Grunt.

You may also like...

Deja un comentario

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