Configuración del Entorno

Para empezar, instale la interfaz de línea de comandos de Gulp globalmente y establezca un proyecto básico.

npm install -g gulp-cli
npx mkdir mi-proyecto
cd mi-proyecto
npm init -y

Luego, agregue Gulp como una dependencia de desarrollo y veriifque la versión instalada.

npm i -D gulp
gulp --version

Archivo de Configuración Inicial

Cree un archivo gulpfile.js en la raíz del proyecto con una tarea predeterminada simple.

function tareaInicial(cb) {
  cb()
}

exports.default = tareaInicial

Para probar, ejecute el comando gulp en la terminal. El archivo gulpfile se cargará automáticamente al ejecutar Gulp.

Conceptos Fundamentales del Gulpfile

Las API esenciales de Gulp 4 incluyen src(), dest(), series() y parallel(). Las tareas en Gulp son funciones asíncronas que pueden usar callbacks, streams, promesas u otros objetos similares para indicar finalización.

Las tareas exportadas desde el gulpfile se denominan tareas públicas y pueden invocarse directamente con Gulp. Las tareas no exportadas son privadas y se usan internamente, por ejemplo, dentro de combinaciones de series o paralelas.

const { series } = require('gulp')

// Tarea privada, típicamente usada en series()
function limpiar(cb) {
  console.log('Ejecutando limpieza')
  cb()
}

// Tarea pública, exportada para acceso directo
function construir(cb) {
  console.log('Ejecutando construcción')
  cb()
}

exports.construir = construir
exports.default = series(limpiar, construir)

Combinación de Tareas

Gulp ofrece dos métodos para combinar tareas: series() para ejecución secuencial y parallel() para ejecución concurrente máxima. Estos métodos pueden anidarse entre sí en múltiples niveles.

const { series, parallel } = require('gulp')

function limpiar(cb) {
  console.log('Limpieza completada')
  cb()
}

function compilarCss(cb) {
  console.log('CSS compilado')
  cb()
}

function minificarCss(cb) {
  console.log('CSS minificado')
  cb()
}

function compilarJs(cb) {
  console.log('JavaScript compilado')
  cb()
}

function empaquetarJs(cb) {
  console.log('JavaScript empaquetado')
  cb()
}

function minificarJs(cb) {
  console.log('JavaScript minificado')
  cb()
}

function publicar(cb) {
  console.log('Archivos publicados')
  cb()
}

exports.construir = series(
  limpiar,
  parallel(
    compilarCss,
    series(compilarJs, empaquetarJs)
  ),
  parallel(minificarCss, minificarJs),
  publicar
)

Manejo de Errores en Combinaciones

Cuando se usan series, cualquier error en una tarea detiene la ejecución de toda la combinación. En cambio, con parallel, un error en una tarea no interrumpe necesariamente las demás; algunas podrían completarse, otras no.

Procesamiento de Archivos

La función src() acepta patrones glob para leer archivos del sistema y genera un stream de Node. Este stream debe devolverse desde la tarea para señalar la finalización asíncrona.

const { src, dest } = require('gulp')

function copiarArchivos() {
  return src('./origen/**/*.js')
    .pipe(dest('destino/'))
}

exports.default = copiarArchivos

Patrones Glob

Los patrones glob son cadenas que combinan caracteres normales y comodines. Los comodines especiales incluyen * para cualquier carácter excepto barras, ** para cualqiuer número de directorios, y ! para negación.

const patronesEjemplo = [
  '*.js',
  'scripts/**/*.js',
  ['script/**/*.js', '!scripts/vendor/']
]

Vigilancia de Archivos

La función watch() usa el sistema de vigilancia del sistema operativo para monitorear archivos y ejecutar tareas asociadas cuando se producen cambios. Si la tarea no emite una señal de finalización, no se ejecutará nuevamente.

const { watch, series } = require('gulp')

function limpiar(cb) {
  console.log('Limpieza en vigilancia')
  cb()
}

function procesarJavaScript(cb) {
  console.log('Procesamiento JS')
  cb()
}

function estilizarCss(cb) {
  console.log('Procesamiento CSS')
  cb()
}

// Asociar una tarea individual
watch('src/*.css', estilizarCss)
// Asociar una combinación de tareas
watch('src/*.js', series(limpiar, procesarJavaScript))