Desarrollo Web

Qué es Gulp, para qué se utiliza y cómo funciona

Gulp es una herramienta muy utilizada dentro del desarrollo web, debido a la multitud de tareas que permite automatizar de una forma sencilla.

Publicado el 24 de Noviembre de 2019
Compartir

Conviértete en Frontend Developer
Domina las tecnologías más demandadas. Accede a cursos, talleres y laboratorios prácticos de JavaScript, React, Angular, HTML, CSS y más.
Comenzar gratis ahora

 

Para qué se usa Gulp

Gulp se utiliza para:

  • Definir las tareas que se van a ejecutar en el proceso.

  • Definir el orden de esas tareas y cuándo van ejecutarse.

  • Paralelizar tareas.

  • Ejecutar tareas condicionales, atendiendo a las condiciones y opciones que se hayan definido.

Tareas para el desarrollo web con Gulp

Gulp se utiliza para el desarrollo web ejecutando todo tipo de tareas, de las que destacamos algunas como:

  • Generar el CSS.

  • Procesar el HTML para comprobar que todos los enlaces sean correctos.

  • Empaquetar todo, ya sea JavaScript, CSS, HTML y con la estructura de directorios que queremos para ejecutar el script de la página web con el servidor.

  • Optimizar imágenes.

  • Desplegar la página web en el servidor.

  • Generar documentación.

Ejemplo de fichero gulpfile.js

Todas las tareas que queremos ejecutar con Gulp las definimos en el fichero gulpfile.js, del que vemos un ejemplo a continuación:

const { watch, series, parallel, src, dest } = require(“gulp”);

//Tarea Hola Mundo
function holamundo(cb) {
    console.log(“HOLA:” + Date.now());
    cb();
}

//Tarea Adios Mundo
function adiosmundo(cb) {
    console.log(“ADIOS:” + Date.now());
    cb();
}

//Declaro las tareas públicas con exports
exports.holamundo = holamundo;
exports.adiosmundo = adiosmundo;
exports.default = holamundo;

Órdenes básicas en Gulp

Las ordenes básicas en Gulp son:

  • gulp (EJECUTA LA TAREA POR DEFECTO)

  • gulp nombre_de_tarea (EJECUTA ESA TAREA)

  • gulp --tasks (LISTA LAS TAREAS DEFINIDAS)

En el video puedes ver el uso de las mismas de forma aplicada al ejemplo anterior.

Plugins para Gulp

Actualmente existen más de 3000 plugins para Gulp, que permiten ejecutar todo tipo de tareas, como minimizar, procesar, subir al servidor, hacer FTP, hacer SSH, dar formato y prácticamente todo lo que se os ocurra.

Estos plugins se encuentran en la web https://gulpjs.com/plugins/

Mejora la colaboración entre tus equipos de diseño y desarrollo
Cursos, talleres y laboratorios de JavaScript, React, Angular, UX, HTML y CSS para todos los niveles. Incrementa la productividad de tus proyectos en un 45%
Solicitar más información


Compartir este post

También te puede interesar...

Tecnología

Qué es Sass: ventajas, desventajas y ejemplos de desarrollo

20 Noviembre 2019 Juan Diego Pérez Jiménez
Tecnología

Sass vs Less

20 Noviembre 2019 Juan Diego Pérez Jiménez
Curso de Sass

Curso de Sass

4 horas y 17 minutos · Curso

Este curso de Sass te permitirá dar un salto cualitativo en tu formación como desarrollador frontend, aprendiendo a usar Sass y Gulp de forma conjunta.

  • Desarrollo Web
Artículos
Ver todos