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.

 

Node.js – simplify your (back) life

Cristian Ghinea, teacher of Node.js basics course, tell us about advantages of this open source and how it can facilitate developing of real-time apps.

I have been a developer for more than 6 years and I have started with PHP for backend (server) development. I always thought it will be nice to have either JavaScript on frontend (visual part of the site) and backend, or PHP on both frontend and backend. … 

 

¿Scrum? Sí gracias, pero práctico

Estás buscando un curso para mejorar tu productividad o la productividad de tu equipo?

El curso Gestión de Equipos y Productividad es justamente lo que estabas buscando. … 

 

Vue.js. Framework que cabe en tan sólo 19kb

Nuestro profesor Francisco Casero convirtió sus pasiones en su trabajo, es por ello que tiene más de 6 años de experiencia profesional cómo Frontend y diseñador UI/UX, ha trabajado en plataformas con gran cantidad de tráfico y un buen número de usuarios. Actualmente es Frontend Engineer en Beroomers.com

En nuestro día a día seguro que usamos nuestra aplicación o web favorita con un diseño flamante, unas animaciones espectaculares y un montón de detalles que la hacen especial. Pero con tan sólo pensar que clase de magia negra puede haber detrás de todo esto para que funcione así de bien…, seguro que te están entrando ganas de ¡Conseguir hacer lo mismo! Pues ya es hora de que tu puedas hacer todo esto y de una manera sencilla. … 

 

“A Crash Course in UX: Designing Usable, Useful and Desirable Products”

Fecha: 18 noviembre 2017 de 09:30 a 14:30 

Idioma: Español 

Christopher actualmente trabaja en King, los creadores de Candy Crush como “Senior Director: Experimental User Experience”.

Ha trabajado anteriormente en Tuenti, Credit Suisse, Grupo Inter com y fue SVP de UX en Sclipo cuando fue nombrada una de las “100 empresas más innovadoras del mundo” de Red Herring.

Los objetivos del Workshop son:

  • Un marco para comprender y medir “útil (useful)”, “utilizable (usable)” y “deseable (desirable)” 
  • Formas de testar y validar UX con un presupuesto 
  • Ejemplos claros donde UX ha tenido un impacto comercial real 
  • Una comprensión de las oportunidades y desafíos de UX para móvil 

¡Inscribete ahora contactandonos a este correo!

stefano@geekshubsacademy.com

www.geekshubsacademy.com

 

 

Si quieres llegar lejos ve acompañado por un gran equipo

Stefano Curletto, Psicólogo del trabajo y de las organizaciones graduado en la Universidad “Sapienza” de Roma, con más de cinco años de experiencia en Formación y Consultaría para las empresas y gestión de equipos nos presenta el nuevo curso de Team Building:

Hay muchas maneras distintas de gestionar un equipo de trabajo eficaz, en este curso te propongo las bases que si o si hay que conocer para tener un equipo de alto rendimiento…

El curso trata de Team Building: Construye y Gestiona tu equipo de trabajo y está enfocado en ofrecer perspectivas dinámicas y herramientas prácticas para la gestión de tu equipo. … 

 

Valida tu negocio automatizando tests funcionales para tu web

Samuel Vicent Pitarch, titulado en IT por la UJI/Castellón, emprendedor con extensa experiencia en el extranjero, nos presenta el nuevo curso de BDD:

Si estás harto de probar una y otra vez tu aplicación web cada vez que la subes a producción, alguna vez se te ha roto el carrito de la compra y ha habido jaleo, el formulario de pedidos ha petado y atención al cliente te ha lanzado una maldición… ¡te propongo este curso que espero te ayude a dormir mejor!

El curso que os ofrezco trata de BDD, enfocado sobre todo al testing web funcional basado en historias utilizando para ello Php como lenguaje de programación.

Te compartiré mi experiencia profesional mediante varios ejercicios prácticos con los casos más comunes que se nos dan a la hora de validar el funcionamiento de nuestra aplicación web, todo ello mediante un proyecto demo real basado en Symfony. … 

 

Programación web es un trabajo de artesanía

curso online de Programación webNuestro profesor Vicent Badia es diseñador y programador web con más de 10 años participando en proyectos web para empresas y startups. Durante todo estos años se ha dedicado a branding, UX design, programación web, SEO y proyectos eCommerce. Trabaja con tecnologías HTML5, CSS3, JavaScript, PHP y bases de datos MySQL.

En el curso de Programación web nos enseñará todo lo que necesitamos saber para diseñar nuestra propia página introduciendo muchas tecnologías y utilidades. Así es como el profesor nos lo explica más detalladamente a continuación:

La creación de una aplicación web es algo así como fabricar un automóvil artesanal.

… 

 

Programa en directo con referentes de la programación usando el “live coding”

GeeksHubs Academy, la plataforma de formación online para desarrolladores incorporamos el “live coding”, convirtiéndose en un recurso de alto valor para los desarrolladores de startups y empresas. Junto con esta novedad pasamos a un modelo de tipo suscripción, que permitirá a estos profesionales y empresas tener un aliado permanente. Esta novedad nos convierte en un referente en la formación de los equipos de tecnología TIC/IT.

Mediante este modelo de suscripción, bien seas profesional geek, startup o empresa se podrá seleccionar el plan que más se adapta a tus necesidades. Seguirán estando los cursos de un alto nivel impartidos por profesionales expertos en cada materia, a los que ahora se podrá acceder de forma ilimitada durante la suscripción. Y además en las suscripciones para empresa (startup y corporate) se incorpora el “live coding”, donde puedes programar con el profesor y resolver las dudas y problemas que surjan en el momento.

… 

 

TDD para dejar de programar las 24 horas

TDD (Test-Driven Development) es un proceso de desarrollo de software que se basa en la idea de desarrollar pruebas, codificar y refactorizar el código construido. Nuestro profesor experto en TDD Tony Morellá es programador desde hace más 10 años, lo que le ha llevado a convertirse en lo que podemos denomiar «full stack developer».
En los últimos tiempos se ha dedicado a implantar metodologías ágiles de trabajo en empresa, a raíz de lo cual surge este curso online de TDD. Ésta es su particular visión del curso:

…