Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

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

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 24 de Noviembre de 2019
  • 1 min de lectura Desarrollo Web
Qué es Gulp, para qué se utiliza y cómo funciona

Gulp es un task runner o build tool, es decir, es una herramienta que permite automatizar una serie de tareas dentro del desarrollo web, que se definen en un fichero.

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/

Relacionado

Te dejamos una selección de cursos, carreras y artículos

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

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

Desarrollo Web

20 de Noviembre de 2019

Si no conoces Sass o no sabes qué es un preprocesador CSS, te explicamos aquí todo lo que necesitas saber sobre ellos, y además realizamos un ejemplo práctico para que puedas comprobar la potencia ...

Sass vs Less

Sass vs Less

Desarrollo Web

20 de Noviembre de 2019

Hemos realizado una interesante comparativa entre dos de los preprocesadores CSS más conocidos, como son Sass y Less. Te contamos los resultados en este video artículo.

Curso de Sass

Curso de Sass

curso

Con este curso aprenderás:

  • ✓ Conocerás toda la potencialidad de un preprocesador CSS como Sass
  • ✓ Practicarás muchas de las posibilidades de Sass mediante la ejecución de casos prácticos propuestos.
  • ✓ Usarás la herramienta Gulp para, junto con Sass, desarrollar un workflow para el desarrollo FrontEnd

Duración: 4 horas y 17 minutos

Más de 300 empresas confían en nosotros

Oesia
Vass
Everis
Ayesa
Altran
Ibermatica
Atmira
GFI
Accenture
GMV
Concatel
Telefonica
Caser
Banco de España
kpmg
Mapfre
Randstad