Optimiza el HTML, CSS, JS e imágenes de tu sitio web con Gulp

Uno de los retos de los desarrolladores web al momento de crear páginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente apariencia visual y usabilidad, pero cuyo tamaño sea lo menor posible para que la carga sea rápida. Pues un sitio web rápido permite: tener mas visitas con el rendimiento actual del servidor, se ahorran costos de ancho de banda, los usuarios sienten que es una buena página y navegan mas tiempo por ella, entre otras. Este procedimiento incluye varias tareas que realizan muchos desarrolladores web como: usar las versiones reducidas (comprimidas) de Javascript, comprimir y ofuscar nuestro código del lado del cliente,  optimizar las imágenes del sitio, comprimir los archivos CSS, combinar todos los archivos CSS y Javascript en un sólo archivo (para cada tecnología) para reducir el número de conexiones, etc. Algo que no es complicado pero consume tiempo y que se debe repetir cada vez que se hacen cambios en el sitio.

Gulp

Como este proceso es repetitivo y consume tiempo, lo mejor es hacer un script que automatice cada etapa, pero hoy en día existen herramientas como que nos permite facilitar todo lo mencionado anteriormente. En este artículo hablaré sobre Gulp, una herramienta para automatizar tareas que hace lo mismo que GruntJS pero es mas fácil de usar y entender.

¿Cómo empezar?

Para instalarlo, lo hacemos a través Node Package Manager de forma global para que se instale como un comando del sistema y poder ejecutarlo en cualquier parte:

npm install -g gulp

Luego en la raíz del proyecto creamos un archivo gulpfile.js donde especificaremos las tareas a realizar:

var gulp = require('gulp');
gulp.task('default', function() {
});

Añadir una tarea

Una tarea es un conjunto de procesos, por ejemplo, optimizar el código JS consiste en: reemplazar algunas liberias por sus versiones CDN, utilizar las versiones minificadas de librerías de terceros, luego concatenar los archivos, minificar y actualizar las referencias en el HTML. Cada uno de estos procesos podemos encontrarlos en el buscador de complementos de Gulp (en caso de no existir alguna puedes crearla y publicarla en Github) y se instalan con npm.

Gulp posee una importante característica: su sistema de flujos entre tareas. Cada una de ellas recibe un conjunto de data (generalmente archivos), realiza un proceso en ella y produce nueva data para ser enviada como entrada a otro flujo. Esto permite a tareas que modifiquen gran de archivos, hacer este procedimiento en RAM y solo escribir en el disco cuando ya se ha terminado de procesar todos los archivos, por lo que se ejecutará muy rápido.

Para verlo en acción, haremos una tarea para reducir el tamaño de los archivos JS como ejemplo, entonces nuestro primer paso es instalar el plugin uglify con NPM:

npm install --save-dev gulp-uglify

Luego se deben hacer dos cosas en el archivo gulpfile.js, una es importar esta el complemento en las dependencias y asignarla a una variable, luego con esta variable podemos ejecutar la función que se encargará de (en este caso) reducir el tamaño del código javascript. Para ello debemos hacer lo siguiente:

var uglify = require('gulp-uglify');
gulp.task('comprimir', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});

Como podrás observar, hemos creado una tarea llamada comprimir , que recibe un conjunto de archivos (los archivos JS ubicados dentro de /lib), crea una tubería y ejecuta uglify que se encargará de comprimir cada uno de los archivos, finalmente entrega el resultado a la tubería que se enviará a la ruta de destino (esta se puede definir a donde uno desee). Así sucesivamente podemos ir creando procesos como los mencionados anteriormente y luego agruparlo en unas tareas mas generales, por ejemplo, tareas para generar una versión para depurar (cuya fuente no este comprimida), una versión para producción, una versión de producción para pruebas, entre otros. Esto lo puedes hacer al final haciendo algo como esto:

gulp.task('produccion', ['comprimir', 'copiar','cdn', 'less']);

Ejecutar las tareas

Finalmente puedes ejecutar el comando gulp en la raíz de tu proyecto y empezará a realizar todas las tareas de forma automática. En caso de que quieras ejecutar solo una tarea, puedes pasar por parámetro el nombre de la tarea:

gulp produccion

Con esto generas la versión de producción, o  por ejemplo, si tienes una tarea llamada less para generar los archivos CSS desde LESS, simplemente ejecuta:

gulp less

Tareas recomendadas

Para optimizar un sitio web, generalmente utilizo imagemin, jshint, clean-css, notify, imagemin-pngquant, uglify, usemin. Con estas puedo comprimir imágenes, mejorar el código javascript, concatenar archivos, reducir el tamaño, entre otros. Aunque te recomiendo leer un artículo de Addy Osmani sobre optimización de webs, pues lista una gran cantidad de tareas que puedes ir probando para usar al momento de mejorar tus sitios.

Finalmente, como te darás cuenta con Gulp puedes crear sitios web mas óptimos y ahorrando mucho tiempo. Existen una gran cantidad de tareas existentes que puedes agregar a tu proyecto y facilitar tu trabajo, por eso te recomiendo chequearlas en el buscador de plugins de Gulp y si no existe, puedes crearla y ayudar a otros programadores que necesiten algo similar.

Hace 3 años en esa fecha: Google Chrome para Android

Desarrollo de aplicaciones web con MEAN.io (Mongo, Express, Angular y NodeJS)

Hace unas semanas, elaborando un sistema interno para Oja.la tuve la libertad de escoger la plataforma a desarrollar y como este año me había decidido a realizar una aplicación web escrita 100% en Javascript empecé a investigar sobre como empezar con la plataforma  MEAN (Mongo, Express, Angular y NodeJS), para quienes no la conocen, es como LAMP (Linux, Apache, MySQL y PHP) pero orientada a usar JS tanto en frontend como en el backend. Investigando conseguí MEAN.io, un framework para desarrollar bajo esta plataforma.

Instalación

Al momento de iniciar el proyecto, no sabía utilizar Express ni Mongo, respecto a NodeJS sólo había hecho unos experimentos sencillos para ver como funcionaba, pero ya tenía experiencia en AngularJS y herramientas como: Yeoman, Grunt, Bower y NPM. Por ello, la instalación de este framework me pareció muy sencilla: clonar el repositorio y luego mediante bower instalar todas las dependencias automáticamente. Solo realicé algunos cambios para evitar actualizar versiones no estables de librerías (no me gusta actualizar  en pleno desarrollo para evitar incompatibilidades con funcionalidades ya escritas) y eliminar cosas innecesarias para el proyecto (como autenticación usando redes sociales).

Esqueleto inicial

La forma en como está estructurado me ha gustado mucho, la separación del backend y frontend se hace notable. Respecto a Express,  la estructura es muy sencilla, principalmente se divide en las carpetas: models (los objetos que permiten se comunican con la BD), controllers (donde se guarda la lógica del proceso), routes (maneja las rutas de las peticiones del servicio web), views (las vistas a mostrar desde el servidor, las cuales son diferentes de las vistas generadas en el frontend).

En la parte pública se trabaja como cualquier aplicación de Angular, se crean carpetas por cada módulo a desarrollar, por defecto vienen incluidas 2: auth y system. La primera es el módulo de autenticación que trae MEAN.io para permitir identificarse utilizando redes sociales y la segunda, donde va la aplicación como tal. También se incluyen los archivos para manejar las dependencias del proyecto usando npm, bower y se incluye un archivo de Grunt.

Este último, trae configuraciones para montar un servidor: de desarrollo, pruebas y producción. Cada uno de ellos tiene su propia  configuración, permitiéndote trabajar con diferentes bases de datos, bibliotecas comprimidas solo en la versión de producción y pruebas. Me pareció raro que no incluía la tarea grunt-ngmin, pues permite facilitar la compresión de archivos JS de AngularJS.

Logo de Mean.io, chévere que sea una chica ninja

Desarrollo

El desarrollo de la aplicación se me hizo fácil gracias a esta plantilla base, si nunca has desarrollado una aplicación bajo este modelo, te recomiendo iniciarte con MEAN.io. Lo único extraño es que generalmente en otras plataformas el código de backend es diferente al de frontend, permitiendo determinar fácilmente la ubicación del código que estas viendo, como aquí todo es JS a veces debes mirar la ruta para ver si estas en frontend o backend, además, probablemente llames a los modelos de Express y Angular con el mismo nombre, confundiendo a veces la apertura de archivos.

La desventajas que vi con esta plataforma fue: la poca documentación debido a su poco tiempo de disponibilidad e incompatibilidad para navegadores antiguos (Android 2.3, IE 8, entre otros), sé de la disminución de la cuota de mercado de estos navegadores, pero aún existen clientes/usuarios que lo utilizan y en el ambiente empresarial se les debe dar soporte. Y finalmente, no me gustó mucho trabajar con MongoDB, es muy chévere almacenar los objetos en JSON y la lectura se hace rápida, pero no sé si es por mi años utilizando BD relacionales pero la falta de restricciones de diseño o tanta libertad de almacenar lo que se desee allí, me parece que puede crear daños en la integridad de datos en el futuro. Tal vez porque estoy acostumbrado a manejar toda la validación de la data en la BD y no en la aplicación, me pareció inseguro que con MongoDB toda la validación se hace en la aplicación (si me equivoco, por favor me lo aclaran en los comentarios).

Recomendaciones

Te recomiendo utilizar Mean.io si deseas hacer una aplicación bajo esta plataforma en poco tiempo, realmente es sencilla de usar si tienes experiencia desarrollando aplicaciones web con Javascript. Probablemente la curva de aprendizaje para un novato sea fuerte pero vale la pena el esfuerzo. Si deseas algo mas sencillo o simple (sin sacrificar calidad), puedes probar Mean.JS un fork realizado por el autor de Mean.io para mejorar algunos problemas de diseño de la plataforma.

 

Hace 4 años en esa fecha: Vota por el futuro logo de Mozilla Venezuela

Hace 6 años en esa fecha: ¡Empezó el E3 2008!

Hace 8 años en esa fecha: Entrevista a Luis Tascon en VTV y mi opinión de él