GULP, que maravilla!!

Automatizando tareas con GULP

En ocasiones encuentras herramientas que al principio pasan desapercibidas porque piensas que no te puede aportar nada nuevo, o por el hecho de tener que volver a empezar con otra herramienta y que eso pueda afectar a tu rendimiento diario, pero que al final acabas desechando.

Ahora mismo estoy en un momento que he decidido aprovechar y dar la oportunidad a todas o casi todas las herramientas que alguna vez han pasado por mi vida, intentando ver el potencial que tienen para mi trabajo y que pueden mejorar mis conocimientos.

¿Que es GULP?

Pero, ¿qué es GULP.JS?, pues es un sistema de construcción (build system) que nos permite automatizar tareas que de otra forma deberíamos hacer a mano, mas lento y posiblemente con algún error que otro.

Algunas de sus características son:

– Todo su código esta desarrollado con Javascript y funciona con Node.js, haciendo que su curva de aprendizaje sea muy baja para cualquier programador.
– GULP.JS usa el módulo Stream de Node.js, haciendo que GULP.JS sea mas rápido que GRUNT.JS.
– GULP.JS no necesita crear archivos ni carpetas temporales se ahorra mucho tiempo frente a GRUNT.JS
– La cantidad de dependencias que tiene es enorme, pudiendo hacer casi cualquier tarea que mejore el flujo de trabajo.
– Gulp.js utiliza el poder del paquete Node.js vinyl-fs para leer y escribir Streams.
– Gulp.js también utiliza un paquete Node.js para la secuenciación, ejecución de tareas y dependencias en máxima concurrencia, llamado Orchestrator.

Instalación de GULP

Instalaremos GULP.JS de forma global, en windows: npm install -g gulp y en linux o Mac: sudo npm install -g gulp.
Para verificar que todo fue correcto usaremos el siguiente comando: gulp -v, si todo es correcto nos mostrara el siguiente mensaje: CLI version x.x.x

Cuando tengamos todo funcionando vamos ha crear un pequeño ejemplo de proyecto para entender como funciona GULP.JS

Una vez instalado en nuestro sistema ya podemos crear nuestro proyecto usando GULP.JS. En este ejemplo usaremos dos plugins para que poder concatenar múltiples archivos y también lo minificará.

Crearemos una carpeta para nuestro ejemplo llamada gulp y accedemos dentro.

Allí dentro creamos el fichero gulpfile.js (dentro estarán las tareas a realizar), aunque de momento lo crearemos sin contenido.

Ejecutamos el comando npm init (para poder usar npm tenemos que tener instalado Node.js). Al ejecutar este comando nos solicitará ciertos datos que dejaremos por defecto pulsando Enter en todas las preguntas.

Una vez terminado deberíamos tener un fichero llamado package.json

Debemos instalar las dependencias para nuestro proyecto: gulp (npm install –save-dev gulp), gulp-concat (npm install –save-dev gulp-concat) y gulp-uglify (npm install –save-dev gulp-uglify). Cuando instalamos las dependencias, automáticamente se actualiza el fichero package.json con las dependencias instalados.

Y ahora el código

Ahora debemos crear la carpeta js y dentro la carpeta source. Dentro de esta carpeta crearemos 3 fichero javascript.

//mayusculas.js
var mayusculas = function(texto) {
    return texto.toUpperCase();
}
console.log(mayusculas("hola"));[/js]
//minusculas.js
var minusculas = function(texto) {
    return texto.toLowerCase();
}
console.log(minusculas("HOLA"));

Ahora añadiremos contenido a nuestro gulpfile.js con las tareas a realizar:

// Dependencias
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// Configuración de la tarea 'optimizacion' (nombre para poder identificar la tarea)
gulp.task('optimizacion', function () {
gulp.src('js/source/*.js')
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('js/build/'))
});

Para terminar solo debemos ejecutar gulp optimizacion para ejecutar las tareas definidas dentro del fichero, en nuestro ejemplo concatenara todos los ficheros .js y minificara el código.

[23:41:36] Using gulpfile C:\wamp64\www\gulp-ejemplo\gulpfile.js
[23:41:36] Starting 'optimizacion'...
[23:41:36] Finished 'optimizacion' after 9.2 ms

En la página oficial de gulp existe bastante información para profundizar y practicar con esta gran herramienta.