Cómo automatizar tareas con Gulp.js

Cuando empecé a usar GulpJs y descubrir el potencial de los task runner no podía creer cómo había podido vivir hasta entonces sin este tipo de herramientas.

Básicamente, Gulp hace todas esas tareas que te da pereza realizar a mano: Minificar css/js, concatenarlo todo en un archivo para minimizar la carga del navegador, compilar jade en html (o sass en css), actualizar los cambios en el navegador cada vez que guardes un cambio en tu proyecto, lanzar un servidor web, realizar unas tareas u otras en producción o en desarrollo, optimizar imágenes, etc etc etc… Toda una maravilla.

Instalación

Gulp se instala mediante NPM:
npm install -g gulp
El siguiente paso es añadirlo a las dependencias de nuestro proyecto (devDependencies). Primero tenemos que asegurarnos de que hemos creado el archivo package.json, si no, lo crearemos ejecutando
[code shell]
npm init
[/code]
Al ejecutar este comando npm nos guiará en la creación de nuestro package.json.

El siguiente paso será añadir a las dependencias de npm Gulp:
npm install --save-dev gulp
Con gulp instalado, crearemos su archivo principal: gulpfile.js

Escribiendo nuestra primera tarea

Primero que nada, llamaremos a la librería con un require:
[code javascript]
var gulp = require(‘gulp’);
[/code]
(Siempre que descarguemos algún plugin para gulp mediante npm, lo enlazaremos de esta forma).

Nuestra primera tarea tendrá esta estructura:
[code javascript]
gulp.task(‘miPrimeraTarea’, function(){
console.log(«Hola, soy tu tarea!»);
});
[/code]
¿Cómo la ejecutamos? Sólo tenemos que escribir en la consola
[code shell]
gulp miPrimeraTarea
[/code]
Y tendremos como resultado:

gulp-1

Gulp API

La api de Gulp consiste en 4 funciones:

  • gulp.task (Define nuestras tareas)
  • gulp.src (Define la ubicación del archivo a trabajar)
  • gulp.dest (Define la ubicación destino del archivo que tratemos)
  • gulp.watch (Vigila constantemente un archivo).

Con ellas seremos capaces de crear todo tipo de tareas para nuestros proyectos.

Manos a la obra: Minificación y concatenación de javascript.

Cuando trabajamos en un proyecto muchas veces nos encontramos de lleno con que necesitamos 12391823 archivos .js (cada uno cargado individualmente por el navegador). Con el plugin gulp-concat podremos unificar en un archivo todos los archivos javascript que usemos en nuestro proyecto:

[code shell]
npm install –save-dev gulp-concat
[/code]

[code javascript]
var gulp = require(‘gulp’),
concat = require(‘gulp-concat’); //Añadimos el plugin

gulp.task(‘js’, function () {
return gulp.src([‘public/javascripts/modules/*.js’,
‘public/javascripts/controllers/**/*.js’,
‘public/javascripts/directives/**/*.js’])//Localización de los archivos a concatenar.
.pipe(concat(‘app.min.js’)) //Con pipe enlazamos la tarea de src al plugin gulp-concat y creamos el archivo concatenado.
.pipe(gulp.dest(‘public/min’)) //Con dest seleccionamos el destino del archivo final.
});
[/code]

En el código vemos que con gulp.src seleccionamos los archivos que se concatenarán. En este caso estamos seleccionando mediante wildcards todos los archivos con extensión .js que se encuentren dentro de la carpeta modules. Después, todos los archivos .js que se encuentren dentro de todas las carpetas que hayan dentro de la carpeta controllers, e igual con la carpeta directives. Además, de esta forma tenemos control sobre el orden en el que se van a concatenar los archivos.

Ya tenemos todo nuestro código concatenado en un archivo, pero todos los espacios y saltos de linea tienen cierto peso en nuestro archivo que podemos reducir si lo minificamos todo en una sola linea sin espacios. (En EngineeredWeb explican la diferencia de peso que podemos llegar a conseguir gracias a la minificación.

En este caso, utilizaremos gulp-uglify

[code shell]
npm install –save-dev gulp-uglifyjs
[/code]
[code javascript]
var gulp = require(‘gulp’),
concat = require(‘gulp-concat’),
uglify = require(‘gulp-uglifyjs’)

gulp.task(‘js’, function () {
return gulp.src([‘public/javascripts/modules/*.js’,
‘public/javascripts/controllers/**/*.js’,
‘public/javascripts/directives/**/*.js’])//Localización de los archivos a concatenar.
.pipe(concat(‘app.min.js’)) //Con pipe enlazamos la tarea de src al plugin Concat y creamos el archivo concatenado.
.pipe(uglify()) //El archivo creado es pasado por la función de minificación
.pipe(gulp.dest(‘public/min’)) //Con dest seleccionamos el destino del archivo final.
});
[/code]
Así tendremos todos nuestros archivos minificados en un solo archivo. Pero, si sólo añadimos nuestro archivo app.min.js a nuestro index, ¿tenemos que lanzar el comando gulp js en consola cada vez que queramos ver cambios en nuestra app? Para eso tenemos la función watch:

[code javascript]
gulp.task(‘js:watch’, [‘js’], function () {
gulp.watch(‘public/javascripts/**/*.js’, [‘js’])
});
[/code]
Con este watch monitorizamos los cambios en cualquier archivo ubicado dentro de nuestra carpeta de javascripts para que cada vez que se detecte uno lanzar la tarea.

¿Y si tenemos varios watch, tenemos que lanzar las tareas independientemente? No, podemos asignar todos nuestros watch (ya sean de scss, js, jade…) a una tarea en concreto:

[code javascript]
gulp.task(‘default’, [‘sass:watch’, ‘js:watch’]);
[code]
Al asignar la tarea default, nuestros comandos de compilación de sass y minificación de js se lanzarán cuando usemos el comando gulp a secas.

Este seria nuestro archivo final:
[code javascript]
var gulp = require(‘gulp’),
concat = require(‘gulp-concat’),
uglify = require(‘gulp-uglifyjs’);

gulp.task(‘js’, function () {
return gulp.src([‘public/javascripts/modules/*.js’,
‘public/javascripts/controllers/**/*.js’,
‘public/javascripts/directives/**/*.js’])//Localización de los archivos a concatenar.
.pipe(concat(‘app.min.js’)) //Con pipe enlazamos la tarea de src al plugin Concat y creamos el archivo concatenado.
.pipe(uglify()) //El archivo creado es pasado por la función de minificación
.pipe(gulp.dest(‘public/min’)) //Con dest seleccionamos el destino del archivo final.
});

gulp.task(‘js:watch’, [‘js’], function () {
gulp.watch(‘public/javascripts/**/*.js’, [‘js’])
});

gulp.task(‘default’, [‘sass:watch’, ‘js:watch’]);
[/code]

*Bonus*: Minificar css y compilar Sass

[code javascript]
var gulp = require(‘gulp’),
concat = require(‘gulp-concat’),
uglify = require(‘gulp-uglifyjs’),
sass = require(‘gulp-sass’)

gulp.task(‘sass’, function(){
return gulp.src(‘./public/sass/**/*.scss’)
.pipe(rename(‘style.css’))
.pipe(sass({outputStyle: ‘compressed’}).on(‘error’, sass.logError))
.pipe(gulp.dest(‘./public/stylesheets’))
})
gulp.task(‘sass:watch’, function(){
gulp.watch(‘./public/sass/**/*.scss’, [‘sass’])
})
[/code]

Resumiendo…

Gulp optimiza nuestro flujo de trabajo y aumenta con tan solo unos comandos nuestra producción de una forma brutal. La más mínima tarea puede pasar por gulp y agilizarse para ayudarnos a crear una app final con mucho menor sufrimiento y mayor calidad.

 

Cómo crear un bot para Twitter

Nico Pons, nuestro compañero en prácticas y estudiante de DAM en Florida Universitaria, ha estado programando un bot para Twitter ¿queréis saber cómo lo ha hecho? Nos lo cuenta a continuación:

Vamos a crear un bot que simule el comportamiento de un usuario de Twitter que realiza follow y unfollow a otros usuarios.

Para ello hemos decidido usar javascript como lenguaje de programación junto con Node.js debido a la enorme cantidad de módulos que nos harán el desarrollo más fácil. …