Ver contenido
carlosazaustre.es carlosazaustre.es

Automatizando tu flujo de trabajo en el Frontend con GulpJS

🗓 | 💻 Desarrollo | 🕐 2 minutos de lectura | 💬 Comments

GulpJS es un automatizador de tareas escrito en JavaScript y que corre bajo Node.js que sigue la misma filosofía que Grunt. GulpJS mejora en cuanto facilidad de programación y rapidez a la hora de ejecutar las tareas. Si has usado Grunt, creo que verás que la sintaxis para declarar tareas es mucho más entendible que la del propio Grunt.

En este artículo mostraré un Gulpfile básico en el que declararemos varias tareas habituales que solemos hacer en el Frontend (minificar CSS, JS, etc…) que nos solucionarán la vida. Si aún no has probado un automatizador de tareas, prepárate para descubrir un mundo nuevo :D

El fichero de configuración de tareas debe llamarse Gulpfile.js y estar situado en el directorio raíz de nuestro proyecto. Para poder ejecutrar gulp en nuestro equipo, debemos tener instalado Node.js y las siguientes dependencias de manera global

Pensemos que tareas solemos hacer normalmente en nuestros desarrollos frontend. Lo más habitual es que usemos un preprocesador de CSS (Sass, Less, Stylus,…) para realizar el diseño de la web. Esto nos lleva a tener varios archivos y necesitamos que se conviertan en uno solo y con formato CSS. Esto lo podemos hacer con la siguiente tarea configurada en nuestro Gulpfile

Esta tarea recoge los ficheros .styl (de Stylus) que se encuentren en la carpeta styles del proyecto, los preprocesa a CSS, los minifica en un solo fichero y lo deja en la carpeta css

Imaginemos ahora que tenemos varios ficheros JS, y los vamos añadiendo en nuestro HTML con las etiquetas script. Sería genial que un programa nos leyera esas referencias y se encargara de concatenarlas en un único fichero JS e incluso minificarlo. ¿Es posible? Si lo es:

Esta tarea toma de nuestro index.html que sería de esta forma:

Gulp recoge el contenido entre las etiquetas de comentario en HTML, y concatena todos esos archivos JS en uno solo, en este caso vendor.min.js

También podemos trabajar con imágenes. Aunque con Photoshop o cualquier otro programa las hayamos optimizado para la web, siempre pueden ser comprimidas mucho más con un optimizador de imágenes. También podemos hacer esto con Gulp:

Esta tarea toma las imágenes en formato PNG, JPG, GIF y SVG que se encuentren en la carpeta ‘static’ y las comprime y optmiza depositándolas en la carpeta dist/static

Estas tareas son geniales, pero ¿No sería aún mejor que se ejecutaran cada vez que hiciesemos un cambio en los ficheros CSS y JS? Eso lo conseguimos con la tarea watch

Y para terminar, si pudiesemos ver los cambios que hacemos en el CSS y JS según guardamos sin tener que recargar el navegador, ahorraríamos una cantidad importante de tiempo. Gulp también nos facilita esto con el plugin livereload;

Esto nos crea un servidor web de desarrollo que se ejecuta en localhost en el puerto 9000 y se recargará cada vez que se ejecute un cambio. Solo es necesario registrar la tarea y lo tenemos listo:

Sólo tenemos que ejecutar el comando ‘gulp’ en el terminal y tendremos todo en funcionamiento.

Gulp al igual que Grunt posee una gran comunidad y hay disponibles cientos de plugins para hacer cualquier tipo de tarea, sólo hay que revisar la documentación y el directorio NPM para encontrar el que más se ajuste a nuestras preferencias.

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y estate al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..