¿Qué tiene de bueno Bower?

El siguiente es un post invitado por Dan Sundy de Helios Design Labs. Dan va a explicar tanto cómo usar Bower como hacer un caso para hacerlo, desde la perspectiva de alguien que se resistió a la idea al principio.

Cuando empecé a trabajar con Bower no entendí del todo el atractivo. «¿En serio?» Pensé. «¿Ahora es demasiado trabajo descargar y descomprimir un archivo?». Tampoco me entusiasmaba la idea de meter un montón de comandos nuevos en un cerebro que ya estaba abarrotado de Git, Grunt, Gulp, Jekyll, Node, etc.

Hay dos cosas que le diría a esa versión de hace medio año de mí mismo. Primero, Bower puede hacer algo más que descargar un archivo o dos. Segundo, pasar una hora aprendiendo una herramienta que eliminará una tarea repetitiva vale la pena.

Primero lo primero: ¿Qué diablos es Bower?

Para los no iniciados, Bower es un gestor de paquetes. Es bueno en, bueno, la gestión de paquetes-cualquier cosa que usted depende de un autor externo para. Buenos ejemplos son los frameworks CSS como Bootstrap, librerías como jQuery, plugins de jQuery, o frameworks de JavaScript como Angular. El sitio web oficial de Bower, Bower.io, probablemente lo dice mejor:

Los sitios web están hechos de muchas cosas – frameworks, bibliotecas, activos, utilidades y arco iris. Bower gestiona todas estas cosas por ti.

Bower trabaja buscando e instalando paquetes de todas partes, encargándose de buscar, encontrar, descargar y guardar las cosas que estás buscando.

Requisitos previos

Hay algunas cosas que necesitarás antes de empezar a trabajar con Bower:

• La línea de comandos. Sí, es una herramienta de línea de comandos (vamos que no da tanto miedo).
• Node y NPM. Bower es un módulo de Node, así que para conseguirlo necesitas NPM.
• Git. Los paquetes de Bower son repos de Git. Bower utiliza Git para entender dónde está el paquete, en qué versión está, ese tipo de cosas.
• Instalación global. Técnicamente podrías instalarlo en cada proyecto pero probablemente querrás tenerlo en todas partes.

Para instalar Bower globalmente:

$ npm install -g bower

Nota: Dependiendo de tu configuración puede que tengas que usar `sudo npm install -g bower` para instalarlo globalmente.

Lo básico

Para empezar, imagina la estructura de directorios para un nuevo sitio. La mía suele ser algo así:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

Hay una carpeta `src` donde se realiza la mayor parte del trabajo de desarrollo. Una tarea de construcción de Gulp eventualmente preparará todo y compilará nuestro código optimizado en una carpeta `dist` lista para producción.

Digamos que quieres incluir jQuery en este proyecto. Por lo general, usted iría a jquery.com, encontraría y haría clic en el enlace de descarga correcto, luego descomprimiría y pondría los archivos en el directorio correcto.

Con Bower, basta con ejecutar el siguiente comando:

$ bower install jquery

Ahora ha aparecido un directorio `bower_components` con una carpeta `jquery`.

|-.git/|-bower_components/| |-jquery/||-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

jQuery ha facilitado la obtención de su código creando y registrando un paquete para Bower. La mayoría de las bibliotecas y frameworks populares han hecho lo mismo. Si quieres comprobar que el activo que quieres es un paquete Bower puedes hacer una búsqueda:

$ bower search <package-name>

Si no está registrado, todavía es posible coger los repos con los endpoints de git así:

$ bower install git://github.com/example-user/example-package.git

Avanzado: Si quieres ponerte elegante, puedes incluso instalar repos privados a los que tengas acceso. Echa un vistazo a este video tutorial de Rob Dodson.

Aquí hay otros comandos básicos que puedes utilizar para ver y gestionar los activos que has instalado.

Lista todos tus paquetes:

$ bower list

Obtén información sobre cualquier paquete que tengas instalado:

$ bower info <package-name>

Comprueba si hay actualizaciones con:

$ bower check-new

Entonces, si hay actualizaciones, actualiza un paquete:

$ bower update <package-name>

Pero puede que al actualizar a la última versión se haya roto algo.

Instalar cualquier versión específica-vieja o nueva-con:

$ bower install <package-name>#<version>

Esta no es una lista exhaustiva. Si estás interesado en empezar te recomiendo que hagas un proyecto de prueba y trabajes a través de uno de los muchos tutoriales que se pueden encontrar en línea. Este de Treehouse es genial: Getting Started with Bower. Luego puedes profundizar en todos los comandos consultando la API de Bower.

¡Eh, pero espera, hay más!

El pequeño equipo de desarrollo con el que trabajo ha estado utilizando Bower durante el último año o así. Mientras que la gestión de paquetes a través de la línea de comandos era genial, no estaba convencido hasta que empezamos a usar los archivos `bower.json` y `.bowerrc`.

.bowerrc

El archivo `.bowerrc` puede hacer una serie de cosas, pero he visto que se utiliza principalmente para cambiar el nombre y la ubicación del directorio `bower_components`. (Esto me hizo feliz porque odiaba tener esa carpeta aleatoria `bower_components` flotando en la raíz del proyecto).

Aquí está el aspecto de un archivo `.bowerrc`:

{ "directory": "src/components"}

La opción de directorio envía los paquetes a una ubicación que tiene más sentido-en este caso, el directorio `src/`. Echa un vistazo a la nueva estructura del proyecto:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.md

Nota que la carpeta `bower_components/` ha desaparecido y hay una carpeta `components/` en el directorio `src/`.

Avanzado: Es una buena idea usar algo como gulp-usemin o grunt-usemin para encargarse de la concatenación y minificación de todos los estilos y scripts adicionales.

Entonces, ¿cómo puede ayudarnos el archivo `bower.json`?

bower.json

El archivo `bower.json` se parece mucho al `package.json` de Node. Es un archivo de manifiesto que permite especificar opciones. Echemos un vistazo a un ejemplo (que se puede generar ejecutando bower init):

{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}

Muchas de estas opciones están ahí en caso de que estés registrando este repo como un paquete Bower. Pero, ¿ves el objeto devDependencies en la parte inferior? Ese objeto se actualizará automáticamente si añades --save-dev a un comando Bower, así:

$ bower install jquery --save-dev

Ahora, si otro programador ejecuta `bower install`, el equipo instalará todo lo de la lista devDependencies en la carpeta especificada en `.bowerrc`. Del mismo modo, si un desarrollador añade un paquete o actualiza la versión de un paquete utilizando --save-dev, todo el equipo puede sincronizar sus activos utilizando bower install (después de sacar la última versión del archivo `bower.json`).

Dado que todo el trabajo de caza y recolección se ha eliminado con el archivo `bower.json`, ya no hay necesidad de versionar ninguno de esos activos. La carpeta `components/` puede ser añadida al archivo `.gitignore` para mantener tu repositorio ligero y medio.

*.DS_Store.sass-cachenode_modules/dist/src/components/

Disparo de despedida

Estaba escuchando un episodio de mi podcast de desarrollo web favorito (guiño, guiño) y los anfitriones estaban charlando sobre si Bower era realmente útil, o sólo una moda pasajera. Se preguntaban si su objetivo es facilitar las descargas o si se utiliza para actualizar las versiones de tus librerías, como hacen las gemas de rubí. Hablaron de que es un «NPM de tipo frontal» (estoy parafraseando).

La belleza es que hace todas esas cosas. Puedes usarlo para descargar y mantener el código actualizado, pero puedes llevarlo más allá. Bower puede ayudarte a mantener sincronizadas las librerías y frameworks del proyecto, o integrarlo con otras herramientas como Yeoman para recortar aún más tiempo de tu configuración de desarrollo. Además, puedes crear y registrar tus propios paquetes Bower para poder instalarlos y actualizarlos en todos tus proyectos de forma rápida (y segura).

Oh, y respecto a la pregunta que inició la discusión: No usarías Bower para instalar WordPress, y WordPress no debería estar en tu carpeta `bower_components`. Pero podrías usar Bower dentro de tu tema de WordPress para gestionar activos externos (sólo no cargues librerías como jQuery que ya están incluidas en el núcleo de WordPress).