En un articulo anterior (introduccion-a-gulp) vimos la instalación y también la configuración inicial para comenzar a trabajar con el ejecutor o corredor de tareas (task runners) Gulp.js. Bueno, en esta entrada veremos cómo configurar y ejecutar algunas tareas básicas y esenciales con esta muy buena herramienta.

El siguiente paso es centrarnos en el archivo gulpfile.js que contendrá  las instrucciones para cada tarea que ejecutaremos con Gulp. por ejemplo hasta ahora solo tenemos una dependencia, y esta es Gulp, así que nuestro archivo gulpfile.js solo debe de tener la siguiente instrucción:

var gulp = require('gulp');

El siguiente paso es instalar los plugins  para correr cada una de las tareas que vamos a necesitar porque Gulp de por si solo no hará nada.

Minimizar el código JavaScript con Gulp

para esto instalamos el plugin  (gulp-concat)

npm install gulp-concat --save-dev
una vez ejecutado la anterior línea de comando veremos en nuestro directorio dentro de node_module cada plugin instalado.

gulp-modules

Mientras que en el archivo package.json veremos vinculada la dependencia de desarrollo del plugin instalado acompañado de la versión de esta.

packagejson-gulp

El siguiente paso es volver al archivo gulpfile.js para vincular la instrucción que ejecuta la tarea de concatenar algunos archivos .js de nuestro proyecto.

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

 // Concatenar JS
gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')
      .pipe(concat('main.js'))
      .pipe(gulp.dest('min/js'));
});
 // Tarea por defecto
gulp.task('default', ['scripts']);

Lo que hemos hecho es incluir el plugin ‘gulp-concat’ con la variable concat.
El siguiente paso fue definir la tarea utilizando el método ‘gulp.task’ dándole como nombre ‘scripts’.
Ya tenemos una tarea que consta de tres proceso.

  1. Por medio de gulp.src obtenemos los archivos .js que están dentro del directorio src el cual serán concatenados.
  2. en .pipe(concat('main.js')) definimos el nombre del archivo que será al resultado de la concatenación de los archivos que este en el directorio anterior.
  3. Por último le decimos Gulp dónde guardar el archivo final main.js, en este caso el directorio min/js como ejemplo.

Para ejecutar la tarea solo debemos de correr el comando gulp en la terminal .

gulp
y listo, ya hemos ejecutado la primera tarea con Gulp.

Optimización de Imágenes con Gulp

La optimización de imágenes con Gulp suele ser muy habitual, para esto instalamos el plugin (gulp-imagemin) Siendo este el más popular para esta tarea.

npm install gulp-imagemin --save-dev
también instalaremos el plugin (gulp-cachepara asegurarnos que solos las nuevas imágenes guardadas en el directorio serán las que tomen el proceso de compresión.
npm install gulp-cache --save-dev
y si vemos nuevamente package.json y dentro del directorio node_modules veremos las nuevas dependencias vinculadas y listas para trabajar. Lo siguiente es definir la tarea en gulpfile.js

gulp.task('imagenes', function() {
  return gulp.src('src/imagenes/**/*')
    .pipe(cache(imagemin({ 
    	  optimizationLevel: 5, 
    	  progressive: true, 
    	  interlaced: true }
    	  )))
    .pipe(gulp.dest('img-min'));
});

La mecánica es similar a la anterior operación.

  1. Tomamos las imágenes del directorio donde se encuentren por medio de gulp.src.
  2. en pipe(cahe…) nos aseguramos que siempre se optimizaran las imágenes nuevas en el directorio, también definimos algunos parámetros como por ejemplo el nivel de optimización.. etc.
  3. El directorio donde se guardaran las imágenes comprimidas, en este caso img-min.

Añadimos una tarea más para ejecutar con Gulp.

gulp.task('default', ['scripts', 'imagenes']);
para ejecutar las tareas lo seguimos haciendo con el comando gulp en la terminal
gulp
Esto ejecutara todas las tareas, si queremos una en especifica solo tenemos que pasar el nombre de la tarea como parametro. Ejemplo:
gulp imagenes

Observador de Cambios en Gulp

Todo lo anterior es muy útil, pero por el momento tenemos la necesidad de ejecutar Gulp cada vez que hacemos un cambio en un archivo o guardamos alguna imagen, esto no es muy bueno porque nos quitará mucho tiempo. La buena noticia es que Gulp puede observar los cambios y automáticamente ejecutar las tareas con el plugin (gulp.watch). 

El proceso es el mismo. Ejecutamos en la terminal:

npm install gulp-watch --save-dev
Una vez instalado el plugin definimos la tarea en gulpfile.js.

gulp.task('watch', function() {
   // Vigila los cambios en los archivos .js
  gulp.watch('src/js/*.js', ['scripts']);
   // Vigila las imagenes en
  gulp.watch('src/imagenes/**/*', ['imagenes']);
 });

y añadimos watch que es el nombre de la tarea a las tareas por defecto del proyecto al final del archivo gulpfile.js.

// Tareas por defecto
gulp.task('default', ['scripts', 'imagenes','watch']);

Esta vez solo con ejecutar gulp una sola vez el plugin watch va a quedar vigilando las carpetas que están vinculadas a tareas para realizar los respectivos cambios cuando estos se detecten .

wacth-gulp-proceso

Veamos nuestro gulpfile.js final.

// Definimos las variables de cada plugin
var gulp = require('gulp');
    concat = require('gulp-concat');
    imagemin = require('gulp-imagemin');
    cache = require('gulp-cache');

 // Concatenar JS
gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')
      .pipe(concat('main.js'))
      .pipe(gulp.dest('min/js'));
});

// Optimizar imagenes
gulp.task('imagenes', function() {
  return gulp.src('src/imagenes/**/*')
    .pipe(cache(imagemin({ 
    	  optimizationLevel: 5, 
    	  progressive: true, 
    	  interlaced: true }
    	  )))
    .pipe(gulp.dest('img-min'));
});

// Vigilar para Cambios Automaticos
gulp.task('watch', function() {
   // Vigila los cambios en los archivos .js
  gulp.watch('src/js/*.js', ['scripts']);
   // Vigila las imagenes en
  gulp.watch('src/imagenes/**/*', ['imagenes']);
 });

 // Tareas por defecto
gulp.task('default', ['scripts', 'imagenes','watch']);

Es todo por esta entrada, pero recuerda que Gracias a Gulp podemos realizar cientos de tareas automáticas para incrementar nuestro flujo de trabajo como frontends.