Gulp.js: Plugins más usados y sus configuraciones básicas

En nuestro artículo anterior aprendimos ¿Qué es Gulp.js? y ¿Cómo funciona?, es por eso que ahora nos enfocaremos en la configuración de tareas comunes mediante los plugins que Gulp.js nos ofrece.

A continuación listaremos algunos de los plugins más usados de Gulp.js y sus configuraciones básicas:

gulp-concat

Plugin de Gulp.js que sirve para concatenar archivos. Concatena archivos usando el salto de línea(newLine) desde el sistema operativo.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-concat

Luego en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    concat = require('gulp-concat');

gulp.task('concatenar', function() {
    gulp.src(['./lib/1.js', './lib/2.js', './lib/3.js'])
        .pipe(concat('libs.js'))
        .pipe(gulp.dest('./dist/js/'))
});

Y finalmente ejecutamos la tarea concatenar.


gulp concatenar

Para cambiar el salto de línea simplemente pasamos un objeto como segundo parámetro, por ejemplo así:


.pipe(concat('libs.js', {newLine: ';'}))

Con lo cual concatenaremos los archivos indicados pero en vez de que se separen por un salto de línea, estarán separados por un punto y coma(;).

gulp-stylus

Plugin de Gulp.js que sirve para compilar archivos stylus(.styl) a .css utilizando el API de Stylus.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-stylus

Luego en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    stylus = require('gulp-stylus');

var path = {
    stylus: ['stylus/**/*.styl'],
    css: 'public/css/'
};

gulp.task('estilos', function () {
    return gulp.src(path.stylus)
        .pipe(stylus({
            compress: true
        }))
        .pipe(gulp.dest(path.css));
});

Y finalmente ejecutamos la tarea estilos.


gulp estilos

Adicionalmente, al plugin le estamos pasando como parámetro un objeto { compress: true } para que comprima el css resultante.

gulp-coffee

Plugin de Gulp.js que sirve para compilar archivos CoffeeScript(.coffee) a .js utilizando CoffeeScript.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-coffee

Luego en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    coffee = require('gulp-coffee');

var path = {
    coffee: ['coffee/**/*.coffee'],
    js: 'public/js/'
};

gulp.task('coffee', function() {
    return gulp.src(path.coffee)
        .pipe(coffee({bare: true}).on('error', function(err){
            console.log(err.name + " en " + err.plugin);
        }))
        .pipe(gulp.dest(path.js));
});

Y finalmente ejecutamos la tarea coffee.


gulp coffee

Adicionalmente, al plugin le estamos pasando como parámetro un objeto { bare: true } para que genere código Javascript sin un wrapper(envoltorio) de código.

CoffeeScript emitirá un error para casos en los que la sintaxis de CoffeeScript sea inválida,
es por eso que le agregamos el listener(oyente) .on(‘error’, function(err){ } para poder estar atentos a cualquier fallo al compilar.

Si están interesados en profundizar más sobre CoffeeScript aquí les dejo un enlace bastante interesante sobre CoffeeScript.

gulp-jade

Plugin de Gulp.js que sirve para compilar plantillas .jade hacia archivos .html utilizando el API de jade language.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-jade

Luego en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    jade = require('gulp-jade');

var path = {
    jade: ['jade/**/*.jade'],
    html: 'public/'
};

gulp.task('html', function() {
    return gulp.src(path.jade)
    .pipe(jade({
        pretty: true
    }))
    .pipe(gulp.dest(path.html))
});

Y finalmente ejecutamos la tarea html.


gulp html

Adicionalmente al plugin le estamos pasando un objeto { pretty: true } en el que le indicamos que el código HTML generado sea legible y este correctamente tabulado.

Así como la opción pretty, existen otras opciones más. Las puedes encontrar en la documentación oficial del API de jade language.

Y si aún tienes dudas sobre algo como ['jade/**/*.jade'] dale una revisada a este artículo.

gulp-rename

Plugin de Gulp.js que sirve para renombrar archivos, usualmente se utiliza para cambiar extensiones de archivos.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-rename

Vamos a usar como ejemplo nuestra tarea html, por lo cual en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    jade = require('gulp-jade'),
    rename = require('gulp-rename');

var path = {
    jade: ['jade/**/*.jade'],
    html: 'public/'
};

gulp.task('html', function() {
    return gulp.src(path.jade)
    .pipe(jade({
        pretty: true
    }))
    .pipe(rename({extname: '.phtml'}))
    .pipe(gulp.dest(path.html))
});

Y finalmente ejecutamos la tarea html.


gulp html

Como necesitamos que nos devuelva archivos con la extensión .phtml, entonces al plugin le pasamos como único parámetro el siguiente objeto: {extname: ‘.phtml’}.

En el cual le dicemos al plugin que la nueva extensión de los archivos será .phtml.

gulp-uglify

Plugin de Gulp.js que sirve para comprimir código JavaScript con UglifyJS2.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-uglify

Luego en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    uglify = require('gulp-uglify');

gulp.task('min', function() {
    return gulp.src('source/scripts/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/scripts/'))
});

Y finalmente ejecutamos la tarea min.


gulp min

En nuestro ejemplo, al ejecutar la tarea min, esta comprimirá todos los archivos .js dentro de la carpeta source/scripts/ y los guardará en la carpeta dist/scripts/.

Este plugin tiene más opciones para personalizar la compresión de los archivos y las puedes encontrar aquí.

gulp-if

Plugin de Gulp.js que sirve para controlar condicionalmente el flujo de la ejecución de subtareas.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-if

Para este ejemplo usaremos la tarea min, así que en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    if = require('gulp-if');

var comprimir = false;

gulp.task('min', function() {
    return gulp.src('source/scripts/*.js')
               .pipe(if(comprimir, uglify()))
               .pipe(gulp.dest('dist/scripts/'))
});

Y finalmente ejecutamos la tarea min.


gulp min

En nuestro ejemplo, al ejecutar la tarea min, esta comprimirá los archivos sólo si la variable comprimir es true, de lo contrario simplemente avanzará hacia la siguiente subtarea.

Si no hay más subtareas sencillamente finalizará la subtarea.

gulp-debug

Plugin de Gulp.js que sirve para ver información de archivos formato vinyl(el formato que tienen los archivos que pasan por el método gulp.src()).

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-debug

Para este ejemplo usaremos la tarea min, así que en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    debug = require('gulp-debug');

gulp.task('min', function() {
    return gulp.src('source/scripts/*.js')
               .pipe(debug({verbose: true})
               .pipe(gulp.dest('dist/scripts/'))
});

Y finalmente ejecutamos la tarea min.


gulp min

Le pasamos como único parámetro el siguiente objeto: {verbose: true} para que nos muestre la mayor información posible de cada archivo.

Este plugin es muy útil para poder detectar errores, por ejemplo si una tarea esta fallando, con este plugin realizamos una depuración de la tarea archivo por archivo, esto hará que la tarea se detenga justo en el archivo que nos esta dando problemas y a su vez nos dará toda la información relacionada.

gulp-imagemin

Plugin de Gulp.js que sirve para minificar imágenes PNG, JPEG, GIF y SVG con imagemin.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-imagemin

En nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('imagenes', function () {
    return gulp.src(['src/images/*.*'])
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images/'));
});

Y finalmente ejecutamos la tarea imagenes.


gulp imagenes

Este plugin tiene más opciones para personalizar la compresión de las imágenes y las puedes encontrar aquí.

gulp-minify-css

Plugin de Gulp.js que sirve para minificar archivos css con clean-css.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-minify-css

En nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    minifyCSS = require('gulp-minify-css');

gulp.task('mincss', function() {
    gulp.src('./source/css/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('./dist/css/'))
});

Y finalmente ejecutamos la tarea mincss.


gulp mincss

Este plugin tiene más opciones para personalizar la compresión de css, las toma de clean-css y las puedes encontrar aquí.

gulp-rimraf

Plugin de Gulp.js que sirve para eliminar archivos, directorios, enlaces simbólicos, etc. Se utiliza generalmente para limpiar las carpetas o archivos que generamos con alguna tarea, como por ejemplo: Javascript compilado desde CoffeeScript.

Lo instalamos en nuestro proyecto.


npm install --save-dev gulp-rimraf

Luego en nuestro gulpfile.js escribímos lo siguiente:


var gulp = require('gulp'),
    clean = require('gulp-rimraf');

gulp.task('limpiar', function() {
    return gulp.src(['../dist/js/*.js'], { read: false })
           .pipe(clean({ force: true }));
});

Y finalmente ejecutamos la tarea limpiar.


gulp limpiar

En nuestro ejemplo, al ejecutar la tarea limpiar, esta eliminará todos los archivos .js dentro de la carpeta ../dist/js/

Adicionalmente, al método .src() le pasamos como segundo parámetro { read: false } para que cuando encuentre estos archivos, no los lea. Ya que no queremos perder tiempo leyendolos porque finalmente los borraremos.

Y al plugin le pasamos como único parámetro un objeto { force: true } para que este pueda eliminar archivos fuera del directorio actual de trabajo.

gulp.watch

gulp.watch() observa cambios en los archivos que le indiquemos y luego nos permite realizar las tareas que deseemos. Como ven este no es un plugin, es parte del API de Gulp.js y es un método muy usado.

Para probarlo en nuestro gulpfile.js escribíremos lo siguiente:


var gulp = require('gulp'),
    path = {},
    jadeTasks = ['html:frontend'],
    coffeeTasks = ['js'],
    stylusTasks = ['styles'];

path.watch = {
    jade: ['jade/**/*.jade'],
    stylus: ['stylus/**/*.styl'],
    coffee: ['coffee/**/*.coffee']
};

gulp.task('watch', function () {

    gulp.watch(path.watch.jade, jadeTasks);
    gulp.watch(path.watch.coffee, coffeeTasks);
    gulp.watch(path.watch.stylus, stylusTasks);
});


Y finalmente ejecutamos la tarea watch.


gulp watch

Luego veremos algo parecido a lo siguiente:


[11:17:05] Using gulpfile ~/frontend/gulpfile.js
[11:17:05] Starting 'watch'...
[11:17:05] Finished 'watch' after 126 ms

Con lo cual veremos Gulp.js se quedará observando si existe algún cambio y apenas lo hagamos se ejecutarán las tareas que le indiquemos.


[11:32:13] Starting 'js'...
[11:32:15] Finished 'js' after 1.36 s

Es muy probable que una vez que empiezes a usar este método, no lo dejes de usar nunca más!.

Si continuamos listando todos los plugins de Gulp.js esta lista sería muy grande ya que actualmente existen alrededor de 780 plugins oficiales de Gulp.js tales como gulp-minify-css, gulp-jshint, gulp.spritesmith, gulp-connect, gulp-zip, run-sequence, gulp-load-plugins, gulp-bump y muchos plugins más.

Estoy seguro que este artículo le servirá a más de uno para comenzar a programar sus tareas con Gulp.js, hasta la próxima.

  • Jair

    Como usar stylus con nib?

    • erikfloresq

      Hola Jair, tu tarea de gulp tendria que ser la siguiente :
      gulp.task(‘stylus’,function(){
      return gulp.src(path.stylus)
      .pipe(stylus({use:[jeet(),rupture(),nib()]}))
      .pipe(gulp.dest(path.rootCss));
      });

      Stylus usa “use” para poder pasarle librerias, en la configuración que se ha colocado, estoy llamando aparte de nib, a jeet (grillas) y rupture (mediaqueries).

      Si de seas puedes revisar este gulpfile.js donde lo tengo mas detallado: https://github.com/erikfloresq/skeletor/blob/master/gulpfile.js

      Saludos!

    • Frontend Labs

      Hola Jair, tal vez podrías hacer esta forma, recuerda que no es la unica, hay varias formas de como organizar las tareas:

      var gulp = require(‘gulp’);
      var stylus = require(‘gulp-stylus’);
      var nib = require(‘nib’);

      // stylus
      gulp.task(‘stylus’, function () {
      gulp.src(‘./static/stylus/screen.styl’)
      .pipe(stylus({error: true, use: [nib()]}))
      .pipe(gulp.dest(‘./static/css/’));
      });

  • Leo Zeron

    Excelente me haz ayudado mucho gracias

  • Leo Zeron

    imagemin vendria siendo lo mismo que responsive-image en grunt ?

    • Frontend Labs

      Hola Leo, sí efectivamente. Te recomendamos usar Gulp.js. Simplemente es más practico porque es más moderno.
      Si te gusto el post, compartelo en las redes sociales, muchas gracias por seguirnos.

      • Leo Zeron

        Gracias por la pronta respuesta y recomendaciones No te preocupes a compartir

    • Frontend Labs

      Gulp tiene un gran numero de plugins para todas las tareas que te puedas imaginar, lo que tu andas buscando es algo como gulp-responsive o gulp-responsive-images. Recuerda que no son los unicos, hay muchos muchos plugins.

  • SalahAdDinYusuf

    Tengo que aprenderlo pues.

    En cuanto a webpack, se parece mucho a gruntjs, que tal es?

  • Fabian Pernia

    Hola una pregunta: ¿Por qué en algunos ejemplos el task tiene return y en otros no?

    • Frontend Labs

      El “return” es para indicar que la tarea es asíncrona. Sin ese “return”, gulp no sabría cuando terminó la tarea. Y hay casos en los que tu deseas saber si la tarea termino o no. Como por ejemplo en el caso de la tarea “watch”, no pusimos el return porque no lo consideramos importante saber si esa tarea terminó. Pero hay casos en los cuales si deseamos saberlo porque por ejemplo queremos hacer una lista de tareas de forma secuencial, entonces en ese caso si ponemos el return para que ese return nos diga que la tarea ya terminó.

  • Cristian Sanchez

    hola, estoy realizando practicas con gulp-smoosher, pero me da un problema con el CSS que no me lo coloca en index.html y solo me sale la etiqueta sin nada del css que puede ser el problema?

  • luis

    mi pregunta es si en jade preetty:true es para que el html sea legible como hago para comprrimirlo que objetoo le paso

    • Victor Sandoval

      Por defecto el jade tiene su opción pretty:false la cual minifica el html compilado , si lo cambias a pretty:true el html compilado lo pone legible.
      La opción pretty puede ser true o false ya que es un booleano

      • luis andres

        y como hago para que el html se comprima en una sola linea y no debajo de una como viene por defecto