La batalla entre bower, browserify, gulp, grunt, npm, webpack y yarn
Si estas en el mundo del desarrollo de sitios o aplicaciones web seguramente escuchaste hablar de al menos una de estas herramientas: bower, browserify, gulp, grunt, npm, webpack o yarn. Estas son las herramientas más populares en la actualidad para sentar las bases de nuestros proyectos y es verdad que es difīcil elegir una o varias de ellas. Es por eso que trataremos de explicar una por una para que puedas ver cual es la que más se adapta a tu trabajo.
Empaquetadores de módulos
Estas herramientas te permiten empaquetar todos los módulos que utilizas en simples archivos.
Webpack
Sitio web: https://webpack.js.org/
Webpack es un condensador de módulos para aplicaciones y sitios web. Básicamente lo que hace es convertir todos los módulos, imágenes y archivos de estilo que utilizamos en el desarrollo en simples archivos JavaScript o CSS ligeros que son cargados en los navegadores. Es un poco complicado de entender pero con un poco de práctica se puede ver su potencial y la infinidad de configuraciones.
Browserify
Sitio web: http://browserify.org/
Esta es una herramienta de desarrollo que permite escribir módulos con la misma sintaxis que Node. Se pueden entonces utilizar, importar y exportar módulos y sus dependencias al igual que en Node pero directamente en el navegador.
Ejecutadores de tareas
Estas herramientas te sirven para ejecutar tareas en tus proyectos. Normalmente son tareas simples que pueden ser combinadas para crear procesos complejos.
Gulp
Sitio web: http://gulpjs.com/
Gulp es una herramienta creada en Node para crear tareas y hacer que el desarrollo web sea mucho más manejable. Podemos crear tareas como "minificar los archivos CSS", "optimizar las imágenes" o "realizar tests unitarios". Es bastante útil y popular sobre todo porque podemos utilizar la infinidad de módulos existentes de Node.
Grunt
Sitio web: https://gruntjs.com/
Grunt es igualmente una herramienta para crear y gestionar tareas. Es muy similar a Gulp ya que esta igualmente desarrollada en Node. La mayor diferencia entre estas dos es que en Grunt nos enfocamos más a la configuración de tareas que a la creación de las mismas. En todo caso el resultado es prácticamente el mismo.
Administradores de paquetes
Estas herramientas mantienen bases de datos de paquetes y dependencias que pueden ser utilizados en nuestros proyectos web.
Bower
Sitio web: https://bower.io/
La función de Bower es la de mantener un registro de los paquetes (frameworks, librerías, components) que necesitamos para nuestros sitios web. Básicamente instala las versiones correctas de estos paquetes y sus dependencias. Ellos se encargan de buscar, descargar y guardar los mismos para facilitar el trabajo. Normalmente es utilizado para mantener las versiones correctas de Bootstrap, Font-Awesone y jQuery.
Npm
Sitio web: https://www.npmjs.com/
Este es el más grande e importante administrador de paquetes para JavaScript. Utilizamos npm para instalar, compartir y distribuir código. Además nos ayuda a administrar las dependencias de los distintos paquetes que instalamos en nuestros proyectos. Existen casi medio millón de paquetes a utilizar asi que lo mejor es tener bien en claro lo que uno busca para su proyecto.
Yarn
Sitio web: https://yarnpkg.com/lang/en/
Yarn es un administrador de paquetes (a veces llamados módulos) con una noción más colaborativa. Es bastante rapido y seguro. Tiene una lista completa con los paquetes mas comunes para el desarrollo web.
¿Que herramientas deberías utilizar?
La respuesta sencilla es la herramienta que te de mas confianza y con la que te sientas mas a gusto. Finalmente uno puede llegar al mismo resultado con cualquiera de las herramientas que presentamos en este artículo asi que te aconsejamos revisar los sitios webs de las mismas y ver con cuál te sientes mejor.
Después de todo es mucho mas importante la concepción y planificación de un proyecto que las herramientas que vayas a utilizar.
Links externos
Webpack: https://webpack.js.org/
Browserify: http://browserify.org/
Gulp: http://gulpjs.com/
Grunt: https://gruntjs.com/
Bower: https://bower.io/
Npm: https://www.npmjs.com/
Yarn: https://yarnpkg.com/lang/en/