Para construir un sitio web, comúnmente dependemos de una serie de bibliotecas, ya sea en forma de CSS o JavaScript. Si yo construyera un pequeño sitio web que mostrará una presentación de imágenes, por ejemplo, el sitio web probablemente necesitaría jQuery y un plugin de jQuery, Flexslider. Estas bibliotecas son las dependencias para que el sitio web funcione.
Aunque añadir estas bibliotecas debería ser una tarea fácil, cuando se trata de un sitio web a gran escala que requiere más bibliotecas, todo podría ser engorroso y desordenado desde el principio. Es posible que tengas que rastrear de un repositorio a otro repositorio, descargando cada una de las bibliotecas, extrayendo los paquetes, y finalmente poniéndolos en el directorio de tu proyecto.
Cuando la nueva versión esté disponible tendrás que estar haciendo todo eso de nuevo (suena como un montón de trabajo, ¿verdad?).
Lectura recomendada: Animate.CSS – CSS3 Library To Create Animation Easily
Si eso suena como lo que has estado haciendo durante años, este artículo puede valer la pena una lectura. Aquí te mostraremos una práctica herramienta llamada Bower que hace que la gestión de las bibliotecas de sitios web sea una brisa. Vamos a comprobarlo.
Cómo empezar
Para usar Bower, tienes que instalar Node.js. Como Bower está basado en Node.js, deberías poder ejecutar Bower en todas las plataformas: Windows, Mac y Linux.
Una vez que hayas instalado Node.js, abre la Terminal (o el Símbolo del sistema) y ejecuta esta línea de comandos para instalar Bower.
npm install -g bower
Instalación de bibliotecas
Ahora estamos listos para usar Bower. Empecemos por buscar una librería que queramos poner en el directorio de nuestro proyecto. Asumiendo que actualmente estás dentro del directorio, puedes escribir bower search {name of the library}. Aquí, por ejemplo, he buscado Normalize.css, una librería para hacer que el estilo de un elemento sea consistente en todos los navegadores.
bower search normalize
El comando listará un montón de resultados; no sólo nos da el Normalize original, sino que también nos muestra las versiones de Normalize que han sido convertidas a LESS, Sass, Stylus, y las otras plataformas.
Una vez que hayamos elegido cuál instalar, podemos escribir bower install {{name of the repository}}. En este ejemplo, instalaré Normalize LESS así como jQuery.
bower install normalize-less jquery
Este comando descargará la última versión de normalize-less y jQuery, y la guardará en una nueva carpeta llamada bower_components; ahora deberías encontrar la carpeta creada en el directorio de tu proyecto.
Alternativamente, si quieres instalar la versión más antigua de la librería, puedes ejecutar el comando seguido del número de versión, de esta manera.
bower install jquery#1.10.0
Ahora que tenemos las librerías, Normalize y jQuery, en el directorio de nuestro proyecto, podemos utilizarlas haciendo referencia a jQuery desde la carpeta bower_components en el documento HTML e importando Normalize LESS en la otra hoja de estilos LESS.
en HTML
<script src="bower_components/jquery/jquery.min.js"></script>
en LESS
@import "bower_components/normalize-less/normalize.less";
Si una de las librerías ya no se usa en el sitio web, puedes desinstalarla fácilmente con el comando bower uninstall, así.
bower uninstall normalize-less
Actualizar los componentes de Bower
Supongamos que llevas varios meses trabajando en tu proyecto, y algunas librerías que estás utilizando (como jQuery) han sacado una nueva versión. En esta circunstancia, podemos utilizar Bower para actualizar jQuery a la última versión. Pero primero vamos a comprobar si la nueva versión ha sido registrada en bower con el comando bower list.
La última versión de jQuery, como puedes ver a continuación, es la 2.1.1.
Para actualizar jQuery, podemos escribir bower update jquery. Una vez finalizada la actualización, podemos volver a ejecutar el comando bower list para verificar la versión actual instalada. A continuación, como puedes ver, ya tenemos la última versión de jQuery.
Envolver
Bower es una herramienta realmente útil que creo que deberías aprovechar en tu proyecto. Es como tener una AppStore, pero para las cosas de tu sitio web – podemos instalar, actualizar y eliminar bibliotecas convenientemente.
En el próximo artículo nos sumergiremos en Bower y exploraremos algunas características más avanzadas. Así que estad atentos.
