GULP: más allá de lo evidente

20 de octubre de 2016
4 min. de lectura

Bienvenidos a un nuevo episodio de Gulp. En el episodio anterior, el cual pueden leer aquí, estuvimos conversando sobre una introducción al mundo de Gulp. Hoy vamos a ir un poco más allá de lo evidente y vamos a estudiar los plugins más utilizados en este momento. 

¡Empecemos! 

Concat

Imagínate que tienes que unir dos archivos en uno solo, y ese archivo es el que vas a usar finalmente en tu aplicación o sitio web. Pues bien, Concat te ayuda a hacer una tarea automática que te permita realizar esta acción al alcance de un comando. Lo que vamos a hacer para este ejemplo es descargar el plugin haciendo uso del siguiente comando en nuestra terminal: 

npm install  gulp-concat --save-dev

Es similar a lo que realizamos en el episodio anterior para instalar Gulp. Seguidamente vamos a nuestro archivo gulpfile.js y añadimos el siguiente bloque de código:

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

gulp.task('concat', function() {
   gulp.src(['archivo1.js', 'archivo2.js'])
       .pipe(concat('main.js'))
       .pipe(gulp.dest('./'))
});
 

Como vemos, hemos añadido Concat como variable a Gulp, que ya la teníamos del episodio anterior. Colocamos el archivo1.js y el archivo2.js en el mismo nivel del archivo gulpfile.js, ejecutamos el siguiente comando y debemos tener el archivo main.js con la unión de los otros archivos mencionados. 

gulp concat

Uglify 

Si queremos tomar nuestros archivos y comprimirlos para tener con menor peso antes de llevarlo a producción, podemos usar Uglify, ya que este plugin va a colocar todo nuestro código en una sola línea, de tal forma que quede lo más reducido en cuanto a tamaño se refiere. Además de eso, Uglify va a ofuscar nuestro código para que sea menos entendible por un tercero. 

Para instalar el plugin, debe hacerse de la siguiente forma: 

npm install  gulp-uglify --save-dev

Si se quiere implementar el uso del plugin, añadimos el siguiente bloque de código: 

var gulp = require('gulp'),

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

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

Para probar ejecutamos:

gulp uglify

Replace 

Cuando necesitemos reemplazar alguna cadena o expresión regular en específico, usamos gulp-replace. Su instalación es similar a las anteriores:

npm install  gulp-replace --save-dev

Para implementar el uso del plugin, añadimos el siguiente bloque de código: 

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

gulp.src([file.js'])

   .pipe(replace('@@encontrar', 'reemplazar'))

   .pipe(gulp.dest('build/file.js'));

});

Con ese bloque de código le estamos diciendo a gulp que reemplace el string que consiga con el tag @@encontrar por el string reemplazar en el archivo file.js 

Para probar ejecutamos:

gulp replace

 JsHint 

Desde hace mucho se vienen utilizando plugins como jsHint para inspección de buenas prácticas en nuestros códigos javascript con el fin de trabajar correctamente. Lo que debemos hacer es decirle al plugin cuáles archivos deseamos inspeccionar y al ejecutarlo nos dará los posibles errores que consiga. Para instalarlo:

npm install  gulp-jshint --save-dev

Para implementar el uso del plugin, añadimos el siguiente bloque de código: 

gulp.task(jshint, function(){

return gulp.src('./files/*.js')

   .pipe(jshint())

   .pipe(jshint.reporter('jshint-summary', {}));

});

 

La programación de esta tarea puede tener variaciones según nuestras necesidades. Es posible que queramos obviar algunas reglas propuestas por jsHint o por el contrario modificar otras. Para tal fin debemos crear un archivo llamado .jshintrc. En ese archivo vamos a tener la configuración del código como lo queremos validar. El archivo .jshintrc puede tener un aspecto parecido a este: 

{

   "camelcase": true,

}

Como podemos ver, es básicamente un objeto json almacenado en un archivo. Según el atributo vamos colocando los valores que queramos validar. Para más información acerca de los atributos que podemos configurar en el archivo, podemos ir a este enlace, donde nos detallan cada uno de los puntos que podemos trabajar. 

Para indicarle al plugin que vamos a trabajar con dicha configuración, el bloque de código debe ser parecido al siguiente:

gulp.task(jshint, function() {

   var options = {

       verbose: true,

       statistics: false,

       width: 120,

       wordWrap: true,

       fileCol: 'white',

       positionCol: 'white',

       reasonCol: 'yellow,bold',

       codeCol: 'green',

       errorsCol: 'red,bold',

       okCol: 'green',

       labelCol: 'green',

       variableCol: 'white,bold'

   };

   return gulp.src([

       './files/*.js'

   ])

   .pipe(cache('linting'))

   .pipe(jshint('.jshintrc'))

   .pipe(jshint.reporter('jshint-summary', options));

});

En ese bloque vemos dos cosas nuevas con respecto al anterior. En primer lugar, existe un objeto json llamado options. Este objeto nos permite configurar la forma en que se visualiza el reporte de errores o advertencias dentro de nuestra terminal. Características tales como el color del error, el tamaño y otros aspectos se pueden manejar desde ahí.

Y aparte de eso vemos la línea .pipe(jshint('.jshintrc')), la cual indica que la validación del código se realizará con ese archivo. Para probar ejecutamos y verificamos el reporte que nos muestra en la terminal.

 Watch 

Aunque Gulp nos facilita la vida ejecutando tareas recurrentes que nos consumen tiempo, también es cierto que ejecutar reiterativamente una tarea nos consume tiempo. Por lo que, si estas tareas se pudieran ejecutar automáticamente al mismo tiempo en que se ejecuta un cambio en un archivo, sería más cool. Por tanto, existe Watch, que se instala de la siguiente forma: 

npm install  gulp-watch --save-dev

Lo que debemos hacer ahora es crear la tarea, indicarle los archivos que va a escuchar y, una vez se guarde algún cambio sobre ellos, ejecutar una tarea específica. En nuestro ejemplo la vamos a llamar build, y la tarea se construye de la siguiente forma:

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

watch([

       'common/styles/*.scss',

   ], function () {

       gulp.start('build');

   });

});

Cada vez que exista un cambio sobre los archivos .scss él ejecutará automáticamente la tarea build. 

Para ejecutar el Watch y que escuche a esos archivos vamos a ejecutar el comando: 

gulp watch

Estos son algunos de los plugins más relevantes en el mundo de Gulp, pero evidentemente existen muchos más. Si quieres tener información de primera mano y conocer todos los plugins que existen, puedes ingresar acá: https://gulpjs.com/plugins/

Por ahora solo me queda decirles que nos vemos en un próximo post.

Te puede interesar

Otros artículos de Desarrollo de software

Suscríbete