En el post anterior hablamos del editor de texto para programar, el servidor para hacer las pruebas, el cliente de ftp para subir archivos y del software de control de versiones. Ahora nos toca hablar de las herramientas que nos van a ayudar a simplificar nuestro trabajo, cada uno tiene su función y todo junto nos permite tener un código limpio, bonito y fácil de mantener y empezamos por NodeJS.
NodeJS, la base en la que nuestras piezas encajan perfectamente.
La primera vez que leí sobre NodeJS me descolocó totalmente, JavaScript en el lado del servidor. Hay que reconocer que es un concepto extraño para cualquier desarrollador frontend, hasta ahora sólo había trabajado con pequeñas porciones de JavaScript en las páginas HTML, y la mayor parte con librerías como JQuery, desconocía el potencial de este lenguaje interpretado, y cada día me sorprende con nuevas cosas, pero eso da para diversos post.
Al tema que me despisto, NodeJS, como he comentado antes, es un entorno de ejecución de JavasScript en el lado del servidor, no es programación lineal, sino que está orientado a eventos, traducido a lo que nos interesa, sirve para controlar algo tan sencillo como ejecutar una tarea cuando actualizamos un fichero o recibimos datos por un puerto.
Para instalarlo sólo debemos bajarlo desde la página oficial http://nodejs.org, con la versión recomendada (LTS) es suficiente para nuestras necesidades.
La gestión de paquetes de NodeJS con NPM
NodeJS y Ruby usan un sistema de paquetes similar, los de node se gestionan mediante npm, tenemos paquetes con funcionalidades de todo tipo, automatizadores, minificadores, motores de plantillas, etc.
Estos son los paquetes más comunes con los que nos podemos encontrar:
- Gulp, es mi automatizador de tareas preferido, es simple y muy potente, las tareas se definen mediante programación, es decir, si ocurre esto llama a esta función, quizás por eso le tengo más apego.
- Grunt, es el automatizador de tareas fue el primero y por eso es el más usado, a diferencia de Gulp las tareas se definen mediante configuración, es decir, esta configuración hace estas tareas.
Tanto Gulp como Grunt usan archivos de dependencias, eso quiere decir que para cada proyecto incluiremos las que necesitemos, ni una más ni una menos. Me voy a centrar en las de Gulp que yo utilizo, puede ser que te encuentres con otras en tu proyecto, la dinámica es similar en Grunt y en Gulp.
Un proceso típico sería el siguiente:
Primero instar Gulp de forma global desde la consola (cmd), el parámetro -g es de global.
npm install -g gulp
Creamos una carpeta para el proyecto.
Accedemos a la carpeta y creamos el proyecto.
npm init
Hay que indicar los parámetros que nos vaya pidiendo npm, y al llegar al archivo Main poner
gulpfile.js
Ahora añadimos las dependencias, la primera será el propio Gulp.
npm install --save-dev gulp
A continuación instalamos concat que nos permitirá unir varios ficheros en uno.
npm install --save-dev gulp-concat
El siguiente archivo será uglify que se encarga de minificar el código css o javascript.
npm install --save-dev gulp-uglify
Necesitaremos también el plugin de borrado de archivos y carpetas.
npm install --save-dev gulp del
La API de Gulp
La Api de Gulp consta de 4 instrucciones básicas.
gulp.task(), define una tarea y sus argumentos son.
- Nombre de la tarea
- Dependencias (opcional)
- Función a ejecutar
Ejemplo.
gulp.task('tarea', [dependencias], function () {
/* contenido de la tarea */
});
gulp.src(), establece el origen de los archivos, permite seleccionar archivos o carpetas completas.
Ejemplo.
gulp.task(‘tarea’, [dependencias], function () {
/* contenido de la tarea */
gulp.src('src/js/**/*') // todos los archivos y carpetas de origen
});
gulp.dest(), establece el destino de los archivos, si una carpeta no existe la crea.
Ejemplo.
Gulp.task(‘tarea’, [dependencias], function () {
/* contenido de la tarea */
gulp.src('src/js/**/*') // origen
.pipe(gulp.dest('output/js')) // destino
});
gulp.watch(), se ejecuta cuando se detecta un cambio, se puede ejecutar lanzando una llamada a otra tarea.
Ejemplo
gulp.task('tarea', function () {
/* si hay cambios en el output ejecuta la tarea output */
gulp.watch('src/js/**/*', ['output']);
});
Ejemplo lanzando una función.
gulp.task('tarea', function () {
/* si hay cambios en el output ejecuta la función */
gulp.watch('src/js/**/*', function(){
console.log ('ejecutando function...');
});
});
Watch se queda escuchando hasta que pulsamos Ctrl + C
Cuando se requieren varios orígenes hay que ponerlos separados por comas dentro de un array.
Extendiendo la API
La API es extendida mediante las dependencias que necesitemos, cada una tiene sus parámetros que consultaremos en su documentación, por ejemplo, para el borrado de carpetas vamos a utilizar el plugin de borrado del.
gulp.task('tarea', function () {
/* borra las carpetas output y dist */
del([
'output/**',
'dist/**'
]);
});
Como puedes ver es muy sencillo crearnos un fichero de automatización con Gulp.