Gulp facilitando la vida de los desarrolladores

Algo que a todos los desarrolladores nos facilita nuestro trabajo es la automatización de procesos que nos ayudan a eliminar esas tareas tediosas y repetitivas que nos quitan el tiempo y nos quitan la creatividad al solucionar un problema.

Existen muchas herramientas para esta automatización, sin embargo Gulp y Grunt son las más destacadas del momento por su flexibilidad y versatilidad. Gulp, que está basado en node.js solamente usa un script que permite el uso de módulos nativos de Gulp o módulos de NPM.

En general, esto ofrece ventajas importantes de Gulp sobre Grunt, además de como es código, nos permite hacer cosas complicadas como condicionales y loops, extendiendo las funcionalidades con módulos de node.

Para comenzar a usar Gulp tiene una instalación muy sencilla si es que ya haz usado en alguna ocasión npm para instalar paquetes. Lo único que debemos de hacer es utilizar el comando

npm install -g gulp

De esta manera al usar -g se instala de manera global en nuestro equipo, sin embargo también es importante hacerlo en el directorio de nuestra aplicación, usando

npm install --save-dev gulp

Con este comando, se agrega a nuestra aplicación en su versión de desarrollo.

Gulp está centrado en el archivo gulpfile.js donde se especifican las tareas que requerimos que se ejecuten automáticamente en el momento que pase el evento que creemos conveniente.

Un ejemplo básico de gulp es el siguiente gulpfile.js

// Archivo gulpfile.json
var gulp = require(‘gulp’);
    gulp.task(‘default’, function(){
        console.log(‘Hola mundo!!’);
});

Lo que al ejecutar el comando gulp en nuestra terminal, nos mostrará el mensaje en la salida del comando.

El trabajo pesado lo hacen módulos de gulp y npm, que podemos encontrar en gulpjs. Uno de los módulos más usados es gulp-uglify que se encarga de comprimir el código de javascript en un solo archivo y de una forma casi ilegible para otros desarrolladores. Al igual que Gulp, podemos instalarlo desde nuestra terminal con npm.

npm install --save-dev gulp-uglify

Quedando como tarea siguiente modificar el archivo gulpfile.js para agregar las tareas que haremos con uglify. Un ejemplo es el siguiente:

//Archivo gulpfile.js
var gulp = require(‘gulp’),
    Uglify = require(‘gulp-uglify’);
    gulp.task(‘default’, function() {
        gulp.src(‘js/*.js’)
            .pipe(uglify())
            .pipe(gulp.dest(‘min_js’));
});

El código anterior lo que hace es, en la sección de require incluímos el módulo de uglify para poder usarlo en la función default, donde se usa la función pipe() para encadenar las sub-tareas. Lo que hará será buscar todos los archivos con extensión js y pasarlos por uglify y después guardarlos en el subdirectorio min_js.

Una forma de dar orden a las tareas y un nombre podemos hacerlo de la siguiente manera:

//Archivo gulpfile.js
var gulp = require(‘gulp’),
    uglify = require(‘gulp-uglify’);
    
    gulp.task(‘default’, [‘uglify’]);
    gulp.task(‘uglify’, function() {
        gulp.src(‘js/*.js’)
        .pipe(uglify())
        .pipe(gulp.dest(‘min_js’));
});

Con el código anterior, lo que hacemos es separar la tarea de uglify y agregarla a la lista de tareas default a través de un arreglo. La ventaja de hacer esto es que podemos ejecutar únicamente la tarea que nosotros deseemos a través de la terminal, por ejemplo usando el comando

gulp uglyfiy

Únicamente estaremos ejecutando esa función y en caso que tuviéramos más tareas, estas las omitiría. Con esto es posible hacer una función para que gulp se siga ejecutando y poder “observar” si se realiza algún cambio sin necesidad de estar regresando a la terminal a ejecutar el comando gulp cada vez que modifiquemos algo.

A forma de ejemplo podemos usar lo siguiente:

// Archivo gulpfile.js

var gulp = require(‘gulp’),

Uglify = require(‘gulp-uglify’);
gulp.task(‘default’, [‘uglify’, ‘watch’]);
gulp.task(‘uglify’, function(){
    gulp.src(‘js/*.js’)
        .pipe(uglify())
        .pipe(gulp.dest(‘min_js’));
});

gulp.task(‘watch’, function(){
    gulp.watch(‘js/**/*.js’, [‘uglify’]);
});

Existen otro tipo de tareas que nos ayudan a la hora de automatizar nuestros proyectos, como compilar SASS, disminuir el tamaño de las imágenes, entre otras cosas, pero que serán tema de otro post de nuestro blog.