Existe un cierto tópico de que los informáticos somo unos vagos, en cierto sentido no es mentira, pero no es algo exclusivo solo de los informáticos, todos al fin y al cabo somos un poco perezosos y vagos. Tu ponte que te acabas de comprar una estantería de ikea y tienes que montarla, para ello tienes un destornillador y un destornillador eléctrico, ¿me vas a decir que vas a montar todos los tornillos a mano sin utilizar la herramienta eléctrica? Já… tu eres gilipollas… y es que entre hacer una tarea repetitiva durante horas o poder automatizarla mediante herramientas, lo lógico parece ser el hacer uso de esas herramientas y con ese tiempo que has ganado tomarte unas cervecitas y una tapita de aceitunas, aunque claro, de todo hay en los senderos del señor…
Pues eso nos pasa a los informáticos, dentro de nuestra profesión existen tareas que son un auténtico coñazo, a ninguno nos gusta tener que hacer un deploy a mano, borrar caches o minificar hojas de estilo, por eso se han inventado herramientas que nos ayudan a automatizar tareas. Ya hablé en otro artículo de Phing un automatizador de tareas para PHP escrito en XML, pero tenemos herramientas para casi todos los lenguajes y tipo de proyectos, por ejemplo si vienes del mundo de Java tienes Ant, también escrito en XML y si eres demasiado hardcore siempre puedes automatizar tareas escribiendolas en bash.
Pero hoy voy a hablar de Gulpjs, el último hype del momento en el desarrollo front-end.
Gulpjs, ¿harás la colada por mi?
Pues no, de momento Gulpjs no sabe hacer ese tipo de cosas, pero para saber que tareas podemos automatizar lo primero que tenemos que tener presente es la documentación y saber qué es realmente.
Gulpjs es un build system(sistema de construcción) que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más.
Entrando en detalles técnicos, tienes que saber que a diferencia de Gruntjs, Gulpjs no genera archivos temporales a medida que va pasando por cada tarea ya que utiliza streams de Node.js haciendo que sea más rápido que la otra herramienta. Esto significa que, en resumen, Gulpjs solo lee y escribe en disco una sola vez, el resto de procesos los hace directamente en memoria.
Además otro punto a favor de Gulpjs es que puedes instalar y utilizar módulos de Node.js en tus scripts mientras que con Grunt.js no.
Manos a la obra, instalando Gulpjs
Lo primero que necesitas tener instalado es npm porque como hemos dicho ya, Gulpjs esta construido sobre Node.js. Si todavía no lo tienes tan solo tienes que escribir los siguientes comandos:
sudo apt-get install npm
Ea, ya lo tienes. Ahora lo que tienes que decidir es si quieres instalar Gulpjs de manera global o únicamente en las dependencias de desarrollo de tu proyecto. Si vas por el primer camino, escribe lo siguiente en la terminal.
sudo npm install --global gulp
Si por lo contrario, tan solo quieres hacer pruebas en desarrollo y olvidarte de automatizar tareas para volver a la prehistoria, craso error, escribe lo siguiente en tu terminal.
sudo npm install --save-dev gulp
Definiendo nuestro buildfile
En todo archivo de construcción se suelen definir las mismas tareas mas o menos. Estas tareas son el borrado del directorio en el servidor, el borrado de caché de nuestro proyecto, la compilación de less junto con la minificación de archivos javascript y css, el empaquetado del proyecto y el despliegue en el servidor. Esta claro que esto no es algo fijo, sino que cada proyecto tendrá definidas unas u otras.
Por ejemplo, la tarea de borrado del directorio luciría tal que así:
var clean = require('gulp-clean');
var _DESTINATION_DIRECTORY = '/var/www/tu-proyecto';
gulp.task('clean', function () {
console.log('-----------------------');
console.log('+ C L E A N +');
console.log('-----------------------');
return gulp.src(_DESTINATION_DIRECTORY, {read: false} )
.pipe(clean({force: true}));
});
En esta pieza de código de ejemplo podemos ver varias cosas interesantes. Lo primero que se hace es definir la dependencia del módulo gulp-clean en una variable para que podamos usarla en nuestro script.
Para instalar un módulo de Gulpjs tenemos que escribir los siguiente en la terminal.
npm install --save-dev gulp-clean
Para definir una tarea tenemos que hacer uso de la función task en la que le pasamos el nombre que queremos darle y la función que se ejecutará. Ya dentro de la función es cuando podemos empezar a jugar con nuestros ficheros.
Dentro de nuestra tarea, la función gulp.src lo que hace es proveer el origen de ficheros/directorios con los que queremos trabajar y para poder utilizarlos tenemos que utilizar la función pipe. Esto es de lo que hablaba más arriba, pipe es la función que utiliza los streams de Node.js pasando en memoria por cada modificación que se produzca en nuestros ficheros/directorios definidos.
Y para eliminar los directorios que queremos tan solo tenemos que pasarle a la función pipe la ejecución del módulo que hemos instalado junto con las opciones que necesitemos o no.
Por supuesto esto es una primera aproximación a los ficheros de deploy hechos con Gulpjs pero a poco que hayas trabajado con Javascript seguro que serás capaz de construir tareas mas complejas.
Voy a dejar el link a los módulos disponibles para que le eches un vistazo y un script completo con tareas básicas para hacer un despliegue en local pensado para proyectos Symfony para que puedas echarle un vistazo y utilizarlo como base para tus proyectos, pero a cambio te pido un Me gusta de Feisbúh, un +1 de Google o lo publiques en tu Twittah para que se distribuya más rápidamente por la comunidad.
[sociallocker id=446]
[/sociallocker]
¡Hasta que volvamos a olernos!
[/sociallocker]
gorkamudev.wordpress.com 
Debe estar conectado para enviar un comentario.