Gulp.js es uno de los gestores de tareas más utilizados en el mundo JavaScript. Hoy por hoy una gran parte de las aplicaciones tiene una parte JavaScript cliente importante . Así pues tener un conocimiento básico de como funciona un gestor de tareas en este ámbito es clave para poder gestionar despliegues.

Introducción a Gulp.js

Vamos a ver un ejemplo sencillo con Gulp.js. Para ello usaremos como punto de partida de una aplicación que tenga 4 ficheros ubicados en carpetas diferentes.

Es momento de instalar Gulp desde la linea de comandos a través de NPM:

npm install gulp-cli -g

El siguiente paso es instalar Gulp como programa:

npm install gulp

Hecho esto vamos a diseñar nuestro fichero de gulp  (gulpfile.js) para que automatice el despliegue:

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

gulp.task(“default”, function() {
gulp
.src('./src/html/*.*')
.pipe(gulp.dest('dist'));

gulp.src('./src/css/*.*')
.pipe(concatCss("super.css"))
.pipe(gulp.dest('dist'));

gulp.src("./src/js/*.*")
.pipe(gulp.dest("dist"));

});

La estructura no es compleja de seguir. Gulp simplemente copia los recursos que necesitamos de cada una de las carpetas origen a una carpeta “dist” de destino. ¿Qué es lo que hace especial a Gulp y otro tipo de herramientas similares? . La respuesta es que su gran extensibilidad . Por ejemplo en este caso hemos usado una tarea adicional que se llama “gulp-concat-css” . Esta tarea hay que instalarla con NPM y es la encargada de leer las hojas de estilo y fusionarlas en una única hoja. Lo cual ayudará a mejorar el rendimiento de la aplicación.

Desde la linea de comandos ejecutamos gulp y todas nuestras tareas se ejecutarán construyendo una nueva estructura en el despliegue.

Como podemos observar no se han copiado las dos hojas de estilo sino que han sido fusionadas en una única hoja . Si revisamos su contenido nos daremos cuenta que incluye el contenido de las dos anteriores.

body {
color: blue;
}
p {
color: red;
}

Hoy por hoy el uso de estas herramientas es indispensable a nivel de JavaScript.

Post By Cecilio Álvarez Caules (31 Posts)

Oracle Certified Master, Java EE Enterprise Architect .Experto en la plataforma JEE y Trainer. Autor del libro Arquitectura Java Sólida Dueño del blog sobre JEE Arquitectura Java

Website: →

Connect