ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Youtube Canal de Youtube
Twitch Canal de Twitch
Telegram Canal de Telegram
Discord Servidor de Discord

¿Qué es un automatizador?

Antiguamente, cuando teníamos que crear un nuevo sitio web, debíamos crear manualmente una carpeta para el proyecto, las diferentes subcarpetas de las secciones de la web (imágenes, css, js, etc...), configurar un servidor web (se solía usar XAMPP o similares), colocar y enlazar las diferentes librerías CSS y/o Javascript que queríamos utilizar, etc...

Con la evolución del desarrollo web, hemos pasado a crear webs que transpilan código. Esto es, tenemos una carpeta src en nuestras aplicaciones web donde tenemos nuestro código fuente y ese código debe preprocesarse y traducirse a otro código (en la carpeta dist) que es el que finalmente leerá nuestro navegador. Mantener actualizado el código fuente que escribimos con el que lee el navegador sin automatizarlo, es una tarea muy tediosa (o prácticamente imposible), por lo que de ahí surgieron los automatizadores.

Actualmente, en el ecosistema Javascript (o en el mundo del desarrollo web en general), es muy común utilizar estos automatizadores para, entre otras cosas, agilizar el proceso de creación de una aplicación web con unos pocos comandos, realizando de forma automática todas esas tareas tediosas y repetitivas, alcanzando nuestro objetivo de forma más rápida y con una mejor experiencia de desarrollador.

Algunas de esas tareas podrían ser las siguientes:

  • Creación del proyecto y su gestión (gestionado con NPM)
  • Actualización y mantenimiento de dependencias (gestionado con NPM)
  • Servidor web local de desarrollo
  • Minificación de código
  • Optimización de imágenes
  • Preprocesar o transpilar código fuente
  • Despliegue o subida del código final al servidor

Automatizadores populares

Existen multitud de automatizadores hoy en día, algunos con una filosofía más de automatización de tareas (como Gulp o Grunt) y otros con una filosofía más guiada (pero personalizable) como Webpack o Rollup. Probablemente, estos sean los más relevantes:

Año Automatizador Descripción GitHub
2012 Browserify Automatizador centrado en traducir require() (Node) al navegador. GitHub
2013 Gulp Automatizador Javascript de tareas basado en pipes y flujos. GitHub
2014 Webpack Bundler enfocado en controlar todo y empaquetar aplicaciones JS. GitHub
2015 Rollup Bundler empaquetador de aplicaciones con buen soporte ESM. GitHub
2016 Grunt Automatizador enfocado en gestión de tareas. GitHub
2017 Parcel Bundler de aplicaciones web enfocado en sencillez de uso. GitHub
2019 Snowpack Automatizador enfocado en técnicas modernas con buen soporte ESM. GitHub
2020 Esbuild Bundler Javascript ultra rápido, centrado en el rendimiento. GitHub
2021 Vite Automatizador de aplicaciones web basado en Rollup y centrado en ESM. GitHub

Existen muchos otros automatizadores que no están en esta lista, quizás menos populares en fama, pero que pueden tener su caso de uso particular y adecuado, como por ejemplo FuseBox, Brunch, WMR, microbundle, SWC, PAX, Bundl, etc.

En Bundlers tooling report tienes una comparativa técnica detallada donde se comparan los detalles específicos de automatizadores como Browserify, Parcel, Rollup o Webpack.



Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.