Guía para principiantes: Introducción al gestor de paquetes Bower

Bower es un gestor de paquetes front-end construido por Twitter. También conocido como un gestor de paquetes para la web, bower se utiliza en proyectos modernos de código abierto y código cerrado para resolver muchos problemas recurrentes.

Este artículo te guiará a través del uso básico de bower y el uso avanzado para un entorno de equipo. También compartiré mi flujo de trabajo personal al tratar con bower con un equipo de desarrolladores.

Problemas que resuelve bower

Desarrollar un sitio o aplicación web hoy en día requiere el uso de muchos frameworks de front-end, como Bootstrap, jQuery, Angular, etc.

Descargar cada uno de estos paquetes requiere navegar por el sitio web correspondiente, encontrar la versión adecuada, descargarla, descomprimirla y finalmente mover los archivos principales a la carpeta del proveedor. (por ejemplo: el archivo main en el paquete jquery es jquery.js)
Después de tener los archivos descargados en tu repositorio, tienes que visitar manualmente todos los sitios web mencionados (jquery.com, angularjs.com, bootstrap.com) para comprobar si hay actualizaciones y ¿adivina qué? Si hay una actualización, tienes que repetir el paso 1 para cada paquete/actualización.
Supongamos que vamos a usar Bootstrap que requiere jQuery (llamado dependencia). Cuando vayas a getbootstrap.com para descargarlo, tendrás que ir a jquery.com para descargar también jquery.

En resumen, bower te ayuda a gestionar tus paquetes de front-end. Te ayuda a descargarlos, actualizarlos y resolver sus dependencias.

Hay otros beneficios de usar bower que discutiremos más adelante en este artículo, ¡pero estos son los principales problemas que bower nos está resolviendo!

Instalación y uso

Instalación de bower

Bower es un módulo de node, y se puede instalar con el siguiente comando:

npm install -g bower

Esto instalará bower globalmente en tu sistema.

Si no tienes node instalado en tu ordenador, tienes que descargarlo desde nodejs.org.

Instalación de paquetes

Por el bien de este tutorial, usaremos bower para instalar bootstrap. El proceso funcionará para cualquier otro paquete.

bower install bootstrap

Esto instalará bootstrap en la carpeta /bower_components recién creada (en el nivel raíz).

Nota que esto va a instalar bootstrap 3.2.x que es la última versión en el momento de escribir este artículo. Si queremos instalar la última versión en 2.x, tenemos que ejecutar:

bower install bootstrap#2

también podemos especificar la versión exacta con

bower install bootstrap#2.2

También hay que tener en cuenta que como bootstrap depende de jQuery, al ejecutar cualquiera de los comandos anteriores se instalará automáticamente también jQuery, para resolver las dependencias de bootstrap.

Actualización de paquetes

Si queremos actualizar todos nuestros paquetes, sólo tenemos que ejecutar el siguiente comando:

bower update

Incluir scripts

El último paso sería incluir los estilos y scripts descargados. Como todos ellos residen dentro de la carpeta /bower_components, tendremos que escribir lo siguiente:

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

Flujo de trabajo común en un entorno de equipo

Después de usar bower de la forma minimalista anterior, nos damos cuenta de que introduce nuevos problemas cuando se trabaja con el control de fuentes y/o en un entorno de equipo.

Bower no sólo descarga los archivos principales de la distribución, sino que también descarga todo el repositorio de jquery, bootstrap, etc. Esto puede inflar tu historial de control de revisiones y no es totalmente recomendable.
También los archivos de distribución principales (dist/jquery.js, dist/css/bootstrap.css) no están minificados, y bower nunca minificará los archivos de distribución porque es un gestor de paquetes, no una herramienta de compilación.
Tienes que asegurarte manualmente de cargar jquery antes de cargar bootstrap (porque bootstrap tiene jquery como dependencia).
Tienes que añadir manualmente una nueva etiqueta <script> para cada nuevo paquete (y quizás un nuevo <link rel=»stylesheet»/> si contiene archivos css.

Paso 1: Instala bower

y asegúrate de que cada persona de tu equipo lo instala globalmente también.

Paso 2: Excluye bower_components del control de revisiones

Añade bower_components a tu .gitignore. Esto indicará a Git que ignore todo el archivo bower_components. De esa manera cada desarrollador (en un equipo) tendrá una copia local de las bibliotecas frontales necesarias. No te preocupes porque cada desarrollador tenga una versión diferente. Eso lo arreglaremos dentro de poco.

Paso 3: Instalar los paquetes necesarios

Instalar los paquetes de front-end necesarios, digamos jQuery y bootstrap.

bower install jquery#1 bootstrap --save

La bandera --save indicará a bower que cree (si no existe) un archivo bower.json e incluya en él los paquetes instalados. Este es un ejemplo del archivo bower.json generado:

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

Note cómo hay una restricción de versión ~3.2.0. Esto asegurará que todos los miembros del equipo estarán trabajando en la misma versión de bootstrap, la tilde significa que la razón debe ser razonablemente cercana a la razón especificada.

Paso 4: Los miembros del equipo pueden ahora ejecutar: bower install

Cuando cualquier desarrollador que tenga acceso al repositorio ejecuta bower install, instala todas las dependencias (bootstrap y jquery en este caso).

Para el resto de pasos, necesitamos Grunt o Gulp.

Paso 5: Integrar con herramientas de construcción

Grunt y Gulp son herramientas de construcción, utilizadas para automatizar tareas comunes y recurrentes, como minificar scripts, optimizar imágenes, minificar hojas de estilo, compilar less/sass/stylus. Bower juega bien con Grunt/Gulp debido a los plugins ya hechos. En este tutorial voy a cubrir Grunt, sin embargo encontrarás una alternativa similar para Gulp.

Grunt tiene un plugin llamado grunt-bower-concat que compila todos los archivos principales para cada componente bower que tengas en un archivo bower.js. Que luego puedes usar Grunt para minificar (uglify), resultando en bower.min.js.

Configuración de ejemplo de grunt bower concat:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

Nota: si estás usando Gulp, existe un plugin similar en: https://github.com/ck86/main-bower-files/

Nota: para Ruby on Rails y otros, consulta el siguiente enlace: http://bower.io/docs/tools/

Paso 6: Incluir scripts

Con los siguientes scripts, incluyes tus scripts una vez y cada vez que añadas un nuevo paquete front-end, se concatenará automáticamente en el archivo correspondiente (bower.css o bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Paso 7: Más automatización de bower

Puedes automatizar aún más bower. Digamos que estás trabajando en un equipo y añades un nuevo componente bower (bower install typeahead.js). No quieres enviar un correo electrónico a todos diciéndoles que ejecuten bower install. Podemos automatizarlo con grunt-watch y grunt-exec:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

Lo que ocurre aquí, es que cada vez que editas el archivo bower.json, grunt ejecuta automáticamente el comando bower install. Cuando envías tus cambios, y tu compañero de trabajo saca tu código, grunt-watch detectará un cambio en bower.json que entonces ejecutará automáticamente el comando bower install.

Cómo personalizo bower en mi propio flujo de trabajo

Cuando se trata de gestores de paquetes, uso muchos de ellos en mi flujo de trabajo. Uso npm para gestionar grunt y sus plugins. Composer para gestionar mis bibliotecas de proveedores de PHP, bower para gestionar mis paquetes de front-end y finalmente ruby gems para gestionar Capistrano (un paquete que se utiliza para automatizar los despliegues).

Decidí que quiero que npm sea el gestor de paquetes main. Así que empecé a envolver todos los comandos principales dentro de la sección de script de mi package.json. Por ejemplo:

npm run migrate: migra la base de datos y genera archivos de migración (específicos de PHP)
npm test: ejecuta pruebas unitarias
npm run protractor: ejecuta pruebas de extremo a extremo
npm run deploy-staging: despliega el código a las máquinas de staging
npm run deploy-production: despliega el código a las máquinas de producción
npm start: ejecuta npm install (preinstalación), bower update (postinstalación) y finalmente grunt

Esto es lo que ocurre entre bastidores. Considere el siguiente archivo package.json:

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

Si mira la sección de scripts, verá que prestart: ejecutamos npm install. Como el package.json está incluido en nuestro repositorio, si alguien añade una nueva devDependencia necesitamos poder instalar la misma versión fácilmente. (Ten en cuenta que pre start es el primer comando que se dispara al ejecutar npm start).

post install (que es disparado por npm install), ejecuta el siguiente comando: bower update --unsafe-perm(el --unsafe-perm sólo se añadió porque bower-update estaba fallando en un Mac). Esto mantendrá todos nuestros paquetes frontales actualizados.

start:y finalmente el comando start ejecuta grunt.

Con esta configuración, cada vez que cualquier desarrollador de tu equipo quiera empezar a trabajar en el proyecto, simplemente navega al directorio del proyecto y ejecuta npm start para empezar a trabajar de inmediato.

Usar este enfoque es muy efectivo porque puedes incluir otros scripts para ejecutar desde npm, como npm run migrate, npm run deploy-staging, etc.

Usando este enfoque, no sólo estamos fomentando el uso de la línea de comandos y la automatización, sino que lo estamos haciendo uniforme.

Puedes ver que hemos enlazado npm install con bower update. Usted puede tomar esto un paso más allá y enlazar todos sus otros gestores de paquetes con npm install. En tal caso, ejecutando npm install se ejecutarían todos los siguientes comandos:

bower update
composer update --no-dev
gem update

Resumiendo

Bower es una herramienta increíble que resuelve problemas fundamentales de las aplicaciones web modernas. Se anima a toda la gente a utilizarla (e incluso el nuevo Visual Studio viene con Bower y Grunt/Gulp hoy en día).

Se puede configurar fácilmente cuando se desarrolla en solitario, sin embargo, si se trabaja en equipo, es necesario seguir los pasos presentados en este artículo para asegurar un flujo de trabajo sin problemas entre todos los desarrolladores del equipo.

Arquidia Mantina