Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Gulp.js
Code

Administrando tareas de compilación con Gulp.js

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Santiago Carnago (you can also view the original English article)

Los beneficios de los ejecutores de tareas (task runners) en el desarrollo de software son obvios. Estos ayudan a la automatización de tareas comunes y frecuentemente tediosas y permiten centrarse de lleno en cosas más importantes, como escribir un mejor código. Hablando en serio, la capacidad de automatizar tareas como la compresión de imágenes, minificación de código, verificación de código y mucho más es un gran ahorro de tiempo.

Para muchos desarrolladores front-end, el ejecutor de tareas (task runner) más elegido hasta la fecha es Grunt, que permite definir tareas utilizando lenguaje JavaScript en un archivo llamado Gruntfile.js (Conocido popularmente como Gruntfile). Básicamente, si sabes JavaScript entonces la creación de tareas en Grunt es un proceso bastante sencillo y extendible con plugins de terceros a otras herramientas como JSHint, Sass y Uglify, que lo convierte en una de las herramientas disponibles más flexibles.

En mayor medida, Grunt es el ejecutor de tareas (task runner) de mayor preferencia, pero recientemente, uno nuevo llamado Gulp.js ha estado recibiendo mucha atención por su increíble sencillez de configuración y un formato de archivo que lo hace simple y fácilmente administrable.

En este tutorial, te mostraré cómo instalar Gulp y crear un archivo de configuración simple e introducirte a este grandioso y nuevo ejecutor de tareas (task runner).

Instalando Gulp.js

Gulp.js es un ejecutor de tareas (task runner) basado en Node al igual que Grunt y como tal, necesitarás tener Node.js instalado para usarlo. Esto puede hacerse de varias maneras, sobre todo en función de su sistema operativo. Estando en OS X, yo elijo usar nvm, un maravilloso script de Tim Caswell para administrar múltiples versiones de Node.js. También puedes descargar los binarios directamente desde el sitio de Node.js. Si eres totalmente nuevo en Node.js, asegúrate de revisar la serie de Nettuts+ sobre como comenzar a trabajar con Node.js.

Gulp.js viene empaquetado como un módulo de Node que es increíblemente fácil de instalar utilizando npm (Node Package Manager). Para instalar Gulp, abre una terminal y escribe lo siguiente:

Esto carga Gulp desde el registro de npm y lo configura globalmente en tu sistema, así lo puedes acceder via la línea de comandos.

Para todos los propósitos, Gulp.js está instalado en este punto y ya estás listo para comenzar a usarlo en tus proyectos.

Configuración del proyecto para utilizar Gulp.js

Para utilizar Gulp en su proyecto hay un par de cosas claves que debes hacer:

  • Instalar las dependencias de paquetes
  • Instalar cualquier plugin que desees utilizar
  • Crear un fichero Gulp.js para definir las tareas que deseas ejecutar

Estos pasos deben realizarse dentro del directorio del proyecto para que los paquetes y archivos de configuración estén disponibles para Gulp.

Primero, vamos a instalar las dependencias:

Ahora, necesitaremos instalar los plugins de Gulp que van a desarrollar las tareas que hemos definido en nuestro archivo de configuración. Estos plugins también son paquetes de módulos de Node así que vamos a utilizar npm nuevamente para instalarlos.

En mi caso, estoy instalando dos plugins que me permitirán minificar/comprimir mi código JavaScript empleando el compresor de Uglify.js y concatenar todos mis ficheros JavaScript en un único fichero.

Note que he utilizado el parámetro --save-dev para instalar las dependencias de Gulp y los plugins que necesitaré para mi proyecto. Esto asegura que que cada entrada realizada se agregará a mi lista devDependencies dentro de mi fichero package.json como sigue:

Esto garantiza que cualquier paquete establecido como dependencia para este proyecto pueda ser fácilmente instalado posteriormente utilizando npm. Si no tienes un fichero package.json en tu proyecto, sólo escribe npm init en la línea de comandos o abre un fichero nuevo en tu editor, incluye desde las llaves de apertura hasta las de cierre y guárdalo como "package.json". Luego vuelve a ejecutar los comandos npm listados anteriormente para actualizarlo. Note que agregar las llaves es obligatorio. De otra forma, cuando trates de utilizar el parámetro --save-dev en el comando, npm lanzará un error diciendo que no es un fichero JSON válido.

Mientras que sólo estoy utilizando dos plugins para mi tutorial, Gulp ofrece más de 200 plugins para todo tipo de funcionalidad, incluyendo:

y muchos más.

El fichero Gulpfile.js

Al igual que Grunt, Gulp tiene un archivo de configuración del mismo nombre llamado gulpfile.js que define todos los plugins requeridos junto a las tareas que estarás ejecutando. Necesitarás crear este fichero dentro de la carpeta raíz de tu proyecto.

La sintaxis es sencilla y concisa por lo que es muy fácil de leer y entender:

Esto simplemente le dice a Gulp que plugins se requieren para completar las tareas definidas.

A continuación, es necesario definir las tareas que ejecutará Gulp. En mi caso, estoy buscando hacer dos cosas:

  • Comprimir las imágenes
  • Minificar mis ficheros JavaScript

Definir una tarea, es en todos los casos, una llamada en JavaScript. Para ello, utilizamos el método de Gulp task() para definir la tarea que queremos ejecutar:

Observando el código anterior, es una mezcla de métodos de llamadas a partir de los plugins que especifique como requeridos. El primer método, task(), toma un nombre semántico para la tarea (en este caso 'js') y una función anónima la cual contiene la verdadera sustancia. Vamos a diseccionar el código:

El método src() me permite especificar donde encontrar los ficheros JavaScript que me gustaría comprimir y convertir en un único archivo, representando una estructura de archivo que puede ser pasada a otros plugins para su procesamiento. Esto es parte del comportamiento de los Streams API de Node.js y una de las razones de la habilidad de Gulp para tener una sintaxis de API tan simple y concisa.

El método pipe() toma el flujo inicial derivado del método src() y lo pasa a través del plugin especificado que ha sido referenciado. En este ejemplo, el plugin uglify recibirá el flujo inicial.

Así como lo hizo uglify, el plugin concat recibe el flujo de datos via el método pipe() y concatena todos los ficheros JavaScript en un único archivo llamado "all.js"

Finalmente, utilizando el método de Gulp dest(), el fichero all.js será escrito en el directorio de destino. El proceso en sí, es muy sencillo y claro.

La última cosa que necesitamos hacer es actualizar la tarea por defecto ('default') de Gulp para ejecutar nuestra tarea "js".

Al regresar a la línea de comandos y escribir 'gulp', Gulp encontrará el fichero gulpfile.js, carga los plugins y dependencias necesarias, da inicio a la tarea por defecto y ejecuta la tarea 'js'. Puedes ver el resultado final de la minimización y concatenación de mi archivo jQuery JavaScript aquí:

compressed-jquery

Dando un paso más, Gulp también ofrece otro método llamado watch() el cual proporciona un medio para comprobar automáticamente si un recurso específico recibió cambios. Esto permite una gran automatización de tareas frente a tener que escribir constantemente de forma manual el comando 'gulp' en la línea de comandos.

Cuando esto se ejecuta, Gulp continuará monitoreando la directiva especificada verificando los archivos y si se produce algún cambio, y ejecutará nuevamente la tarea 'js' para minificar y concatenar los ficheros JavaScript. ¡Muy bien!

Cambiando a Gulp.js

Cuando al principio me enteré de Gulp, mi primera reacción fue "¡Oh hermano, otra herramienta!". Gulp.js realmente tiene una sintaxis convincente y un API que facilita la configuración de las tareas. Si bien no tiene la amplitud de plugins que Grunt posee, su repositorio de plugins parece estar creciendo a buen ritmo, especialmente ahora que tiene tanto interés por parte de los desarrolladores.

He hablado con muchos desarrolladores que están migrando activamente a Gulp, por lo que parece un buen momento para comenzar con Gulp.js.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.