Introducción a Bower

  • Por
Conoce y aprende a usar Bower, el gestor de dependencias para el desarrollo web frontend que te facilitará la tarea de instalar y mantener al día librerías y frameworks en tus proyectos.

Bower es un complemento ideal para el desarrollo web. Es un sencillo programa que nos sirve para tener al día las dependencias de un proyecto para la web, en lo que respecta al desarrollo frontend, con Javascript o incluso CSS. Se trata de un programa basado en NodeJS que se ejecuta desde la consola y que tiene un sencillo API de comandos útiles para realizar tareas de mantenimiento y administración de paquetes necesarios para construir un proyecto web, concretamente la parte del lado del cliente.

Con Bower podemos descargar y actualizar todo tipo de librerías, frameworks, plugins, etc., pero sin tener que preocuparnos por descargarlos y subirlos a mano nosotros mismos. En este artículo aprenderemos a usar sus funciones más comunes y al final del texto encontrarás un vídeo donde ampliar la información y ver cómo usarlo en un proyecto.

Por qué Bower

Los desarrolladores frontend hemos sobrevivido toda una vida sin Bower, pero ahora somos más felices felices gracias a él ;). Con esto quiero decir que no es necesario usar Bower para realizar un proyecto o para instalar paquetes del lado del cliente. Solo es un utilidad que nos facilita el día a día, pero acostumbrarse a usarla puede ayudar bastante en determinados procesos.

Sin Bower, cuando queremos instalar una librería Javascript como jQuery o un framework de diseño como Bootstrap, simplemente íbamos al sitio de esos paquetes que requeríamos para un trabajo, los descargábamos y los colocábamos a mano en una carpeta de nuestro proyecto, o bien configurábamos una ruta absoluta al CDN en las etiquetas SCRIPT o LINK, necesarias para incluir esos paquetes. Con Bower ese trabajo, que no es pesado pero sí requiere de varios pasos (ir a un sitio web, descargar una librería, colocarla en una carpeta), se puede hacer con un sencillo comando de consola:

bower install jquery

Quizás todavía no le veas mucha utilidad todavía pero piensa en el momento en el que tienes que mantener toda una serie de librerías externas y actualizarlas con sus nuevas versiones. Requiere volver a descargar la librería a actualizar, borrar la antigua, subir la nueva, etc. Puede que hacer esto para una sola librería no represente mucho trabajo, pero a veces tenemos docenas de paquetes de terceros en un proyecto y entonces mantenerlos actualizados sí te puede llevar un rato. ¿No sería mejor hacerlo con un simple comando de consola? Obviamente, sí.

Cómo instalar Bower

Para usar Bower primero tenemos que instalarlo. Es un programa realizado con NodeJS, por lo que si no tienes Node el primer paso será instalarlo. Lo haces desde la página general de la plataforma Node. Sigue los pasos que encontrarás allí, o en en el manual de NodeJS de DesarrolloWeb.com.

Al instalar NodeJS se instala también un gestor de paquetes Javascript llamado “npm”. Este gestor sirve para descargar e instalar en nuestro sistema cualquier programa basado en NodeJS y se opera por línea de comandos. La manera de instalar Bower en nuestro ordenador es ejecutando el correspondiente comando de instalación, vía npm, como sigue:

npm install -g bower

Ese comando descargará e instalará Bower y estaremos listos para usarlo. Usar Bower no tiene mucho secreto. Si conoces ya algún otro gestor de paquetes, como el propio npm, Composer para PHP, etc., seguramente ya tendrás una idea en la cabeza. Si no es así no desesperes porque te explicamos todo a continuación. De entre todas las maneras de usar Bower te vamos a contar la más “formal”.

Archivo bower.json

Lo ideal es que te crees un archivo bower.json en un carpeta raíz del proyecto. Este archivo te sirve para especificar de una manera formal todas las dependencias que tiene tu proyecto. De esa manera serás capaz de pedirle a Bower que te las instale todas de una vez, que las actualice todas de una vez, si es que se encuentran versiones nuevas que te interese instalar y también, cuando subas a producción un proyecto, que te permita aprovisionarlo con todas las librerías externas necesarias. Este archivo es muy fácil de construir, con sintaxis JSON, indicando una serie de campos que necesita para definir tu proyecto y sus dependencias.

Para crear por primera vez tu archivo bower.json lo más cómodo es lanzar el comando “bower init” desde la raíz de tu proyecto.

bower init

Esto pondrá en marcha un script en el terminal, que recabará todas las informaciones necesarias para identificar tu proyecto. Aunque realmente, si no sabes algún dato de los que te pide, no necesitas preocuparte porque simplemente te ofrecerá un valor predeterminado que podrás aceptar pulsando “enter”. Es por ello, que si tienes prisa puedes hacer “enter, enter, enter…” dejando todas las opciones de manera predeterminada.

Cuando el proceso acabe verás el archivo bower.json en la raíz de tu proyecto, en la misma carpeta donde hiciste el “bower init”. Tendrá una forma parecida a esta:


{
  name: 'Prueba Bower',
  version: '0.0.0',
  authors: [
    'Miguel Angel Alvarez '
  ],
  description: 'Esto es una simple prueba',
  main: '',
  moduleType: [],
  license: 'MIT',
  homepage: 'http://www.desarrolloweb.com',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

Ahora vamos a editarlo para indicar nuestras dependencias, con tu editor de código de preferencia.

Realmente es tan sencillo como colocar un nuevo campo “dependencies" cuyo valor será un objeto que define los nombres de los paquetes que tenemos como dependencias junto con sus versiones.


{
  "name": “Prueba Bower”,
  "version": "0.0.0",
  "authors": [
    "Miguel Angel Alvarez "
  ],
  "dependencies": {
    "jquery": "~2.1.4",
    "bootstrap": "~3.3.5"
    "angular": "1.4.7",
    "angular-route": "1.4.7",
  }
}

Nota: No coloco todos los campos del bower.json para no reproducir de nuevo el mismo texto de antes. Lo importante aquí es ver el mencionado campo "dependencies".

Como podrás apreciar, algunas veces indicamos una versión exacta de una dependencia, pero a veces se le agrega el carácter “~” delante. Esto quiere decir que aceptas que se actualice la versión. Para que te sirva de referencia:

Si indicas “~1.2” estás diciendo que puede actualizar la versión de 1.2 a 1.3 cuando aparezca, 1.4, etc. Pero nunca subiría a la 2.0. Si indicas “~2.4.3” estás indicando que aceptas versiones 2.4.X pero nunca te instalará una 2.5. Puedes usar otros códigos para informar de las versiones como >=2.3. Estos códigos para indicar las versiones forman parte de una notación estándar que tienen otros gestores de paquetes.

Una vez tenemos nuestro archivo bower.json podemos instalar las dependencias que hemos declarado gracias al comando "bower install". En seguida lo comentamos con mayor detalle.

Comandos típicos de Bower

Ahora te dejamos una lista de comandos que podrás usar habitualmente del API de Bower. Un par de ellos los hemos comentado ya, pero los repetiremos para que nos quede un listado más completo.

bower init
Es un atajo para generar un archivo bower.json, en el que definir las propiedades de un proyecto.

bower install
Si hacemos "bower install", sin ningún parámetro adicional, bower leerá lo que hayamos configurado en el archivo bower.json, instalando todas las dependencias que hayamos definido. Todos los componentes se colocarán en una carpeta específica llamada generalmente "bower_components".

bower install NOMBRE_PAQUETE
Este comando sirve para instalar un paquete, sin necesidad de nombrarlo entre las dependencias definidas en el archivo bower.json.

bower install NOMBRE_PAQUETE --save
Es un útil atajo para que, aparte de instalar un paquete en el directorio de componentes, te salve la dependencia en el archivo bower.json. Si no haces --save te instala el paquete, pero no te actualiza el archivo bower.json, con lo cual no tendrás memorizado que ese paquete está entre las dependencias y no se instalará si vuelves a colocar el proyecto en otro lugar (por ejemplo el servidor de producción) y necesitas volver a descargar los paquetes.

bower update
Este comando ejecuta la actualización de los paquetes, conforme a lo indicado en el archivo bower.json, ya que somos nosotros como desarrolladores los que debemos informar el rango de versiones que permitimos se actualicen.

bower uninstall NOMBRE_PAQUETE
Sirve para desinstalar un paquete completamente del directorio de componentes de Bower. Este paquete debemos nombrarlo de manera obligatoria y si deseamos que se elimine también su referencia en la sección "dependencies" de bower.json deberemos indicarlo con la opción "--save".

Existen varios otros comandos que podrás leer en la documentación de Bower.

Modificar el directorio components-bower en el archivo .bowerrc

Antes de acabar queremos llamar la atención sobre otro detalle importante a la hora de trabajar con Bower, definido en el archivo .bowerrc. Este archivo sirve, entre otras cosas, para modificar el directorio donde se van a instalar los componentes de Bower.

Por defecto ya dijimos que todas las librerías se instalan en una carpeta llamada bower-components, pero no siempre querremos dejar los paquetes ahí, sino que a veces preferiremos organizar los archivos del proyecto de otra manera.

El mecanismo es indicar, también en formato JSON, el directorio donde queremos que se instalen nuestros componentes.


{
    "directory": "libraries/components"
}

Nota: Ten en cuenta que al comenzar por punto, el archivo .bowerrc estará oculto en sistemas Linus y Mac.

Vídeo de utilización de Bower

Si quieres aprender a usar Bower de una manera sencilla te recomendamos ver el siguiente vídeo en el que explicamos las bases de Bower, por qué existe y por qué es recomendable usarlo, y donde luego practicamos con sus distintos comandos, etc.

Conclusión

Hemos conocido Bower, el gestor de dependencias para proyectos web, una herramienta imprescindible para el desarrollo frontend. No hay mucho más que decir sobre este programa, pues es realmente sencillo de manejar. Si no lo usas todavía, deberías, pues facilita mucho nuestro trabajo del día a día cuando se deben mantener todas las dependencias del lado del cliente de un proyecto.

Si te entra curiosidad o tienes la necesidad de saber cómo se crea un package con Bower, te recomendamos la lectura del artículo Crear un package en Bower.

Recuerda repasar cualquier información adicional directamente en su documentación oficial en http://bower.io/.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Alvaro

13/10/2015
Grunt
Buen tuto, gracias. Podrían hacer uno de Grunt? saludos

Francisco

15/10/2015
Interesante, ¿funciona tambien si no trabajas en local?
Muy interesante lo de Bower, nunca lo he usado.
¿Entiendo que solo funciona para proyectos que trabajes en local y no por FTP,no?.

Alex

16/10/2015
Funciona en local y remoto
En remoto sólo tienes q correr el bower install para q te cargue las librerías en el servidor. Eso si, necesitas poder acceder por ssh.

Carlos

20/10/2015
Comentario
Muy buen post para iniciar la tarea :) muchas gracias!

Ademar Cadenas Colunche

16/8/2017
Error
Todo lo que he leído y he aplicado me ha funcionado muy bien. Salvo que, he utilizado el comando "bower install" y me vota el siguiente error:
"bower jquery#~3.1.1 ENOGIT git is not installed or not in the PATH"

Alguna sugerencia para esto.
Gracias, saludos desde Perú.