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:

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.