Gulp js

En esta ocasión vamos a hablar de Gulp JS, una herramienta de NPM, para manejar tareas fácilmente.

Cuando desarrollamos, muy regularmente necesitamos, copiar archivos, agregar dependencias que se encuentran en un sitio fuera de Internet, o queremos hacer nuestro archivo Javascript o CSS para producción, más pequeño, porque sabemos que es mejor un archivo que contenga menos de 200 KB, que uno con 1.5 MB de datos.

Usualmente para hacer estas tareas las agregamos manualmente y en una consola corremos los comandos, así para minificar los archivos Javascript usamos WebPack o Browserify, y para CSS, usamos algún pre-compilador, como SASS o LESS.

Aquí es donde entra Gulp, está herramienta se crea con el fin de agilizar el desarrollo web, es relativamente recientemente, como competencia para otra herramienta que funcionaba para lo mismo, pero hacía las cosas de forma diferente, llamada Grunt, puedes echarle un vistazo para saber de qué va.

Instalando Gulp

A diferencia de Grunt, con Gulp, el lenguaje que se utiliza para declarar las tareas es Javascript, y se necesita tener instalado Node, para instalarlo simplemente debemos agregarlo como una dependencia de NPM, a nuestro proyecto, tanto local como globalmente en nuestros paquetes para acceder al CLI desde dónde queramos:

npm install -g --save-dev gulp

Ahora simplemente debemos agregar un archivo de configuración, para gulp el archivo debe llamarse gulpfile.js, así cuando le digamos a Gulp que necesitamos ejecutar una tarea, buscará este archivo, y la tarea en el mismo.

Ahora, Gulp contiene un CLI (Command Line Interface), desde aquí llamaremos las tareas para que Gulp las ejecute.

Si hemos instalado correctamente la dependencia, si escribimos en una pestaña de nuestra consola gulp y presionamos enter, nos emitirá un error, diciéndonos que no hemos creado el archivo gulpfile o que no hemos definido alguna tarea aún.

Definiendo Tareas

Para definir tareas en Gulp, primero debemos crear un archivo llamado, gulpfile.js, y dentro de esté, escribiremos una tarea sencilla, el tan famoso Hola Mundo

var gulp = require('gulp')

gulp.task('hola-mundo', function(){
 console.log('Hola mundo')
})
       

De esta forma agregamos una tarea en gulp, llamamos a la función task la cual recibe como primer parámetro el nombre de nuestra tarea, seguido de una función que contendrá nuestra tarea y para ejecutarla desde nuestra consola, escribimos, gulp :nombre-de-la-tarea:, de está forma debería aparecernos un mensaje que se está ejecutando y después de terminar aparecerá nuestro 'Hola mundo'

Ahora para mover archivos gulp también nos provee de algo muy sencillo.

var gulp = require('gulp')

gulp.task('mover-archivos', function(){
 gulp.src('./carpeta/mi-archivo.txt')
  .pipe( gulp.dest( './otra-carpeta' ) )
})
      

Con el método src le proveemos a Gulp una ruta a nuestro archivo, y una vez que lo encuentra, el archivo es copiado a la carpeta definida en el otro método de Gulp dest

Aunque podemos poner un archivo, o un glob que es una forma de buscar archivos de acuerdo a una expresión regular

Por ejemplo si queremos mover todos los archivos de la carpeta anterior, hacemos algo como esto.

var gulp = require('gulp')

gulp.task('mover-archivos', function(){
 gulp.src('./carpeta/*.txt')
  .pipe( gulp.dest( './otra-carpeta' ) )
})
      

Esto moverá todos los archivos en la carpeta con la extensión .txt

Pero además podemos mover muchas carpetas a una sola, así:

var gulp = require('gulp')

gulp.task('mover-archivos', function(){
 gulp.src(['./carpeta/*.txt', './carpeta-2/*.txt'])
  .pipe( gulp.dest( './otra-carpeta' ) )
})
      

Esto además de mover los archivos de la capeta uno, también moverá los de la carpeta 2 al mismo lugar.

Además de todo esto, Gulp, también puede ser configurable a través de plugins, y todos siguen la misma metodología, así por ejemplo para minificar los archivos javascript existe el plugin de uglify, que se usa de la siguiente manera:

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

gulp.task('minificar-js', function(){
 gulp.src('./js/*.js')
  .pipe( uglify() )
   .pipe( gulp.dest( './public/js ) )
})
      

O si tenemos un sistema de módulos en javascript

var gulp = require('gulp')
var uglify = require('gulp-uglify')
var browserify = require('browserify')

gulp.task('minificar-js', function(){

 browserify({
  entries: './js/entry.js',
  debug: false
 }).bundle()
  .pipe( uglify() )
   .pipe( gulp.dest('./public/dest') )

})
      

Y si tienes estilos CSS, con LESS

var gulp = require('gulp')
var uglify = require('gulp-uglify')
var browserify = require('browserify')
var less = require('gulp-less')
var cleanCSS = require('gulp-clean-css')


gulp.task('minificar-js', function(){

 browserify({
  entries: './js/entry.js',
  debug: false
 }).bundle()
  .pipe( uglify() )
   .pipe( gulp.dest('./public/dest') )

})

gulp.task('minificar-css', function(){
 gulp.src('./less/main.less')
  .pipe( less() )
   .pipe( cleanCSS({ compatibility: 'ie8' }) )
    .pipe( gulp.dest('./public/css') )
})
      

Además de las tareas, podemos tener alguna que depende de otra, es decir, para que empiece está debe esperar a que termine la anterior, por ejemplo, queremos mover varios archivos, pero antes de mover los archivos, primero se debe minificar los archivos, pero no queremos hacer todo en una sola tarea, porque queremos tener control de lo que se está moviento y minificando, entonces, definimos dos tareas una que se llame mover-archivos y la otra que se llame minificar-archivos

Gulp nos permite hacer esto, proveyéndolo de un array de tareas, de las que depende, con los ejemplos anteriores nos quedaría algo así:

var uglify = require('gulp-uglify')
var browserify = require('browserify')
var less = require('gulp-less')
var cleanCSS = require('gulp-clean-css')


gulp.task('minificar-js', function(){

 browserify({
  entries: './js/entry.js',
  debug: false
 }).bundle()
  .pipe( uglify() )
   .pipe( gulp.dest('./public/js') )

})

gulp.task('minificar-css', function(){
 gulp.src('./less/main.less')
  .pipe( less() )
   .pipe( cleanCSS({ compatibility: 'ie8' }) )
    .pipe( gulp.dest('./public/css') )
})

// Note que agregamos un array después del nombre de la tarea
// todas las tareas que definamos aquí, se ejecutarán antes que está,
// tenga cuidado, porque si más de una tarea depende de las definidas
// en su array, se ejecutará las veces que aparezca.
gulp.task('mover-archivos', ['minificar-css', 'minificar-js'], function(){
 gulp.src(['html/*.html', './php/*.php'])
  .pipe( gulp.dest( './public' ) )
})
      

Además podemos definirle las tareas que se ejecutarán por default cuando simplemente escribamos en nuestra consola, gulp, y presionemos Enter, estás se definen de la siguiente forma:

gulp.task('default', ['mover-archivos'])
      

De está forma, Gulp, es una herramienta que podría facilitarte muchas cosas a la hora de desarrollar, sobre todo si estás en un proyecto grande, con grandes cantidades de archivos, Gulp, te permite mantener todo ordenado.