Ejecutar Gulp en Docker

Trabajar con Gulp automatiza tareas repetitivas en el desarrollo, y Docker facilita los procesos complejos en el desarrollo: ¡tenemos un match! Si trabajan a la par podemos dejar hacer el trabajo más rápido para todo el equipo, quitando la complejidad que implica usar un software que usa una versión concreta de Node (con la dificultad que implica instalarlo en todos los sistemas operativos) y acompañar dependencias evitando conflictos. Por ello voy a explicar los pasos ejecutar Gulp en Docker.

1. Crear archivo gulpfile.

Crea un archivo gulpfile.js con la configuración que uses habitualmente. En mi caso voy a usar un rápido ejemplo que compila archivos Sass.

//===
// IMPORTS
//===
const {src, dest, parallel, series, watch} = require('gulp');
const clean = require('gulp-clean');
const sass = require('gulp-dart-sass');
const sourcemaps = require('gulp-sourcemaps');

//===
// TASKS
//===
function cleanDist() {
  return src(['css/*'], { allowEmpty: true })
    .pipe(clean());
}


// Compile SASS + sourcemaps
function sassCompile() {
  return src(["sass/main.sass"])
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('css/'));
}

//===
// Run
//===

// Default: 'gulp'
const build = series(
  cleanDist,
  parallel(sassCompile)
);
exports.default = build;

2. Definir imagen.

Creamos un archivo con el nombre Dockerfile-gulp. Dentro indicamos como se va a construir la imagen.

Usaremos como base la imagen oficial de Node, con la versión 17 Alpine, para a continuación instalar el cliente de Gulp y las dependencias.

FROM node:17-alpine

# Set work directory
WORKDIR /usr/src/app

# Globals
RUN npm install -g gulp-cli

# Local
RUN npm install gulp gulp-clean gulp-dart-sass gulp-sourcemaps

En caso de disponer de un package.json, solo habrá que copiarlo y decirle que se instale su contenido.

FROM node:17-alpine

# Set work directory
WORKDIR /usr/src/app

# Install Gulp
RUN npm install -g gulp-cli

# Add package.json
COPY package.json package.json

# Dependencies
RUN npm install

3. Añadir servicio.

Si no dispones de un archivo docker-compose.yaml, créalo y añade el siguiente contendido.

version: '3.1'

services:

  gulp:
    build:
      context: .
      dockerfile: ./Dockerfile-gulp
    command: gulp
    volumes:
      - ./gulpfile.js:/usr/src/app/gulpfile.js
      - ./sass:/usr/src/app/sass
      - ./css:/usr/src/app/css

En caso de si disponer de este fichero, solo te interesaría añadir el servicio gulp.

Básicamente le estamos indicando que use la imagen que hemos definido, Dockerfile-gulp, que el comando a ejecutar será gulp y por último vinculamos el archivo gulpfile.js con las carpetas que usemos dentro del servicio por medio de los volúmenes.

4. Lanzar servicio

Tan sencillo como:

docker-compose up

En caso que dispongas de otros servicios, deberás ser más preciso.

docker-compose up gulp

Mucha suerte.