Primeros pasos para automatizar tareas con Gulp

19/09/2019 | Gulp, JavaScript, Node.js | 0 comentarios

Automatiza tus tareas en tu flujo de desarrollo con Gulp y ahorra tiempo en la implementación de proyectos web.

Descargar archivos

Gulp

Gulp es una herramienta de Node.js que permite automatizar tareas, se usa ampliamente en la automatización de tareas de desarrollo para evitar ejecutar manualmente las tareas repetitivas.

La ventaja es que las tareas se escriben utilizando JavaScript y se puede utilizar paquetes creados por la comunidad y que se pueden encontrar en npm.

Instalar Gulp

Para instalar Gulp se requiere tener instalado previamente Node.js, con este requisito el primer paso es inicializar el proyecto con npm y luego instalar el paquete de Gulp, esto se realiza en línea de comandos:

npm init
npm i gulp

Luego se debe crear un archivo llamado gulpfile.js donde se escribirán las tareas.

Tareas en Gulp

Una tarea en Gulp es una función JavaScript ubicada en el archivo gulpfile.js y que se expone para uso externo mediante la propiedad exports:

Las tareas se ejecutan en línea de comandos utilizando el comando gulp seguido del nombre de la tarea, por ejemplo:

gulp task

Métodos de Gulp

Gulp ofrece varios métodos que ayudan en la creación de las tareas, entre las mas utilizadas se tienen:

  • src: permite definir los archivos a procesar en la tarea.
  • dest: permite definir la carpeta donde se guardarán los resultados.
  • series: permite ejecutar tareas en secuencia (uno después de otro).
  • parallel: permite ejecutar tareas en paralelo (al mismo tiempo).
  • watch: permite detectar cambios en los archivos y ejecutar una tarea.
  • pipe: permite encadenar el resultado de una tarea con la siguiente.

Estos métodos permiten utilizar funciones sencillas para encadenarlas de forma secuencial o pararela y lograr la construcción de tareas complejas.

Veamos un ejemplo de uso de estos métodos:

En el ejemplo se declaran tres funciones:

  • styles: procesa los archivos .scss y guarda el resultado en la carpeta public.
  • scripts: procesa los archivos .js y guarda el resultado en la carpeta public.
  • listen: detecta los cambios en los archivos y ejecuta las funciones asociadas.

Luego se exponen dos tareas:

  • build: ejecuta en pararelo las funciones styles y scripts.
  • listen: ejecuta secuencialmente las funciones declaradas previamente.

Ejemplo: automatizar Sass

Como ejemplo implementamos una tarea para procesar automáticamente los archivos Sass y convertirlos en CSS. Para ello instalamos el paquete gulp-sass que permite procesar archivos Sass y se controla con Gulp.

npm i gulp-sass

Luego creamos la tarea para procesar archivos Sass, donde procesamos los archivos .scss ubicados en la carpeta styles y al terminar lo guardamos en la carpeta public.

Una vez implementada la tarea se ejecuta en línea de comandos con:

gulp styles

Como se puede observar, con pocas líneas de JavaScript se pueden automatizar tareas y con ello ahorrar tiempo por que los archivos CSS se generan automáticamente cuando se modifican los archivos fuente.

Referencias

Envíar Comentario

En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas <pre></pre>