Bower es un gestor de dependencias que nos facilita la tarea de descargar paquetes como jQuery, Bootstrap, Font Awesome o cualquier otro tipo de framework o librería que utilizamos habitualmente en la construcción de un sitio web, Bower trabaja por nosotros, busca, descarga e instala los paquetes de forma automática, esta herramienta se ha convertido en un recurso imprescindible para el desarrollo de cualquier proyecto en el que trabajen varios desarrolladores, ya que gracias a JSON podemos controlar tanto las dependencias del proyecto como sus versiones.
Entre sus principales ventajas se encuentran la productividad y el control de versiones, Bower es capaz de trabajar con todo tipo de dependencias, ya sean frameworks css, librerias js, repositorios de Github e incluso imágenes.
Instalar nodejs
Lo primero que necesitamos para trabajar con Bower es instalar en nuestro equipo nodejs, desde su página oficial nodejs podemos descargar la versión que corresponda a nuestro sistema operativo, la instalación es sencilla e intuitiva, no soy un experto en nodejs, así que no os voy a hablar mucho de el, solo vamos a utilizarlo para trabajar con los npm (Node Package Manager) que nos permiten instalar Bower y para ejecutar los comandos bower en nuestra terminal.
Una vez instalado nodejs, el sistema está listo para trabajar con los comandos npm, Bower es un Node Package Module, si quereis profundizar en el tema, podéis usar el repositorio general de Node npmjs el cual almacena todos los Node Package Modules que han sido publicados como Bower, Gulp o Grunt entre otros .
Instalar una terminal Windows
Particularmente trabajo con sistemas Windows y la terminal que trae por defecto el sistema no es que se pueda decir que sea muy buena, así que si trabajáis con Windows os aconsejo Git for Windows, es muy completa y nos ofrece entre otras opciones una serie de funciones que podemos lanzar desde el menú contextual haciendo clic derecho con el mouse.
Instalar Bower
Vamos a ver como trabaja Bower, crearemos una carpeta con un documento index.html, si hemos instalado Git, podemos abrir la terminal para que acceda a la ruta desde dentro de la carpeta, por lo que no tendremos que ir a buscar la ruta por comandos, esta es una de las ventajas de Git, dentro de la carpeta hacemos clic derecho y seleccionamos la opción Git Bash en el menú contextual, automáticamente se abrirá la terminal de Git con la ruta de la carpeta seleccionada.
Ejecutamos el siguiente comando
npm install -g bower
Con este comando hemos instalado Bower de forma local, de esta forma el sistema reconocerá las ordenes Bower, este comando no lo tendremos que volver a ejecutar más, a partir de aquí Bower ya está en nuestro sistema instalado de forma local, si queremos comprobar que todo se ha instalado correctamente, podemos ejecutar el siguiente comando
bower -v
La terminal nos mostrará la versión instalada.
Instalando dependencias
Vamos a instalar el primer paquete, como es habitual en la mayoría de desarrollos front-end, instalaremos jQuery, el comando es el siguiente:
bower install jquery
Automáticamente Bower nos crea la carpeta bower_components en la que se instalará jQuery y el resto de dependencias que instalaremos a continuación.
Dentro de la carpeta bower_components se ha instalado la carpeta jquery en la que puedes encontrar la ruta al archivo para insertar el script en el index.html.
<script src="bower_components/jquery/dist/jquery.min.js"></script>Continuamos instalando Bootstrap y animate.css
bower install bootstrap
bower install animate.css
En la siguiente imagen se muestra el contenido de la carpeta bower_components.
Todos los packages publicados en Bower podemos buscarlos en Search Bower packages la sintaxis para instalarlos en la carpeta bower_components es la siguiente:
bower install NOMBRE_DEL_PAQUETE
Bower nos ofrece también la posibilidad de instalar paquetes desde un repositorio de Github con la siguiente sintaxis:
bower install git://github.com/user/package.git
A continuación os muestro el comando para instalar el repositorio de un artículo publicado en este sitio web hace unos dias.
bower install git://github.com/didesweb/url-functions-jquery.git
Tambien podemos instalar un archivo js o css desde cualquier dominio público
bower install http://example.com/style.css
Y descargar archivos de imagen
bower install http://example.com/images/image.png
Bower y JSON
La ventaja de trabajar con Bower es que podemos compartir nuestros proyectos sin necesidad de incluir todas las dependencias comunes que necesita el proyecto controlando el numero de su versión, para ello disponemos del comando bower init, que nos genera un archivo JSON con toda la información necesaria que necesite el proyecto, si quereis saber más sobre los archivos JSON podeis leer el Tutorial de introducción al formato JSON.
Ejecutamos el comando bower init, la terminal nos procesará una serie de preguntas, la mayoría como el nombre, descripción, autor y otras podemos saltarlas pulsando Enter, a continuación la terminal nos pregunta:
set currently installed components as dependencies?, lo que sería en español algo como ¿configurar los componentes instalados actualmente como dependencias?, pulsamos “y” y luego Enter para decirle que si, de esta forma se almacenarán las dependencias con sus numeros de versiones correspondientes como valores en el campo dependencies del archivo JSON.
add commonly ignored files to ignore list?, en español, ¿agregar archivos comúnmente ignorados a la lista de ignorados?, lo que quiere saber la terminal es si queremos no agregar como dependencias aquellas dependencias que no se encuentran publicadas en los packages de Bower y que hemos instalado por medio de Bower en la carpeta bower_components como por ejemplo una hoja de estilos o un archivo js instalado desde un sitio web, no se ignoran los paquetes de Github.
would you like to mark this package as private which prevents it from being accidentally published to the registry?, en español, ¿Marcar este paquete como privado para evitar que sea publicado accidentalmente en el registro?, pulsamos “y” y luego Enter para decirle que si.
Por ultimo nos pregunta Looks good?, y nos muestra una previa del archivo que se va a generar, pulsamos “y” y luego Enter, si vemos la carpeta raiz del proyecto veremos el archivo JSON generado, que muestra el siguiente aspecto:
{
"name": "nombredelproyecto",
"authors": [
"Autor <autor@dominio.com>"
],
"description": "descripcion del proyecto",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"private": true,
"dependencies": {
"animate.css": "~3.4.0",
"bootstrap": "~3.3.6",
"jquery": "~2.1.4"
}
}Como podemos observar el archivo JSON nos muestra el numero de la versión de cada una de las dependencias del proyecto, esto es muy importante ya que nos previene de problemas con las diferentes versiones de las mismas, vamos a ver como funciona la forma inversa, cerramos todo y borramos la carpeta bower_components, dentro de la carpeta del proyecto donde debería estar nuestro archivo JSON, abrimos de nuevo la terminal y ejecutamos bower install.
Automaticamente Bower nos genera la carpeta bower_components e instala todas las dependencias que contiene el campo “dependencies” del archivo JSON como podeis ver en la imagen anterior.
En la web oficial tenemos más información sobre Bower, en la API de Bower podemos encontrar entre otras cosas todos los comandos entre los que vamos a destacar el comando install.
Install
bower install package
Instala el paquete seleccionado
bower install package#version
Instala el paquete seleccionado con el numero de version seleccionado
El package puede ser un paquete del repositorio de Bower, un archivo de un servidor de dominio público o un repositorio de Github, como habiamos mencionado anteriormente:
bower install git//github.com/user/package.git
Instala el repositorio seleccionado desde Github
bower install http://example.com/script.js
Instala el archivo seleccionado desde una URL
Opciones de instalación
bower install package -F
Fuerza la instalación de la versión más reciente publicada
bower install package -S
Guarde los paquetes instalados en el archivo JSON del proyecto
bower install package -E
Configura los paquetes instalados con la versión exacta del paquete
Hasta aquí hemos visto lo más importante, pero podemos hacer muchas mas cosas con los comandos de Bower, como el comando “bower cache”, para administrar la caché, el comando “bower update” para actualizar las versiones, el método de instalación “–offline” para instalar paquetes almacenados en la caché, el comando “bower uninstall” para desinstalar dependencias, el comando “bower search” para buscar dependencias o el comando “bower info” para obtener información sobre los paquetes instalados.
En resumen, una herramienta potente, productiva y muy segura para trabajar en entornos profesionales, a la hora de compartir un proyecto tan solo borramos la carpeta bower_components, el archivo JSON se encargará de informar a Bower allá donde llegue el archivo, que dependencias se han de instalar.
Para terminar os dejo una recopilación de todos los enlaces del tutorial que seguro os serán de utilidad.
Valoraciones
Sé el primero en valorar