Automatización con Node.js

Node.js o “javascript para servidor” ofrece muchísimas herramientas y utilidades para desarrollar tareas relacionadas con el mundo web. Entre estas tareas destacan: compilar (compile), transpilar (transpile), minificar (minify), o uglificar (uglify).

Por ejemplo:

• Podemos compilar SASS a CSS
• Podemos transpilar ECMAScript 6 a ECMAScript 5, con el objetivo de programar con ECMAScript 6 y que éste sea transformado a una versión de JavaScript que soporten los navegadores.
• Podemos minificar un archivo javascript para eliminar todos los espacios innecesarios que hacen que el archivo ocupe más.
• Y podemos “uglificar” un archivo javascript para transformar todas las variables y nombres de funciones a los mínimos caracteres posibles, con el objetivo de reducir aún más el tamaño del archivo a servir.

Además de poder ejecutar todas estas tareas, el gestor de paquetes de Node.js, npm (node package manager), permite descargar e instalar otras muchas librerías de CSS o JavaScript, guardando los paquetes instalados en un archivo que servirá para definir las dependencias de nuestro proyecto.

Otras herramientas tales como gulp.js o el mismo npm, permiten automatizar el uso de otras herramientas. Por ejemplo, podemos definir una cadena de tareas que compile el código SASS, transpile ECMAScript 6 a ECMAScript 5 y minifique y uglifique cada vez que se detecta un cambio en algún archivo de código fuente. De este modo, cada vez que modifiquemos el código fuente se generarán nuevos archivos para producción istos para ser servidos, acercando nuestro entorno de desarrollo al de producción.

¿Os habéis parado a pensar cuántas veces tenéis que refrescar el navegador para que se apliquen los cambios hechos en un archivo HTML, CSS o js? Multiplicad el número de veces por el tiempo que tardáis y sumadle un poquito de incomodidad. ¿Mucho verdad? Es por eso que la herramienta que más me gusta es la de refrescar el navegador después de que se ejecute una cadena de tareas. Gracias a esta herramienta podemos reducir nuestra “cadena de tareas”.

Antes: Modificar código -> Referescar navegador -> Ver cambios.

Ahora: Modificar código -> Ver cambios.

Este es un breve resumen de todo lo que se aprende en el módulo de JavaScript en MPWAR en La Salle.