Introducción a Bower, gestor de paquetes

Introducción a Bower, gestor de paquetes

Hola a todos y saludos desde el área web de la Escola Espai. En este post hablaremos de un complemento ideal para el desarrollo front-end. Hablaremos e haremos una introducción a Bower, un gestor de paquetes y dependencias front end.

Introducción a Bower

Bower, es un sistema de gestión de paquetes que usaremos para gestionar nuestros paquetes (packages) de desarrollo web front-end. Cuando hablamos de paquetes nos referimos a conjunto de archivos y/o librerías que solemos usar en nuestros proyectos. Como por ejemplo: Bootstrap, Font-awesome, AngularJs, cualquier plugin jQuery, etc..

Sin Bower, cuando queremos instalar uno de estos paquetes en nuestro proyecto web, simplemente vamos al sitio web en cuestión, los descargámos y los colocámos a mano en una carpeta de nuestro proyecto, o bien configurámos una ruta absoluta al CDN en las etiquetas script o link, necesarias para incluir esos paquetes. Además, si existiera una actualización más adelante deberíamos actualizar los archivos o las rutas CDN.

Con Bower ese trabajo, se puede hacer con un sencillo comando de consola.
Bower, por lo tanto, nos facilita el día a día. Acostumbrarse a usarlo puede ayudar bastante en determinados procesos.

Vamos a instalarlo y a ver un ejemplo de como funciona:

Instalación de Bower

Bower es un programa realizado con NodeJS por lo que si no tienes Node el primer paso será instalarlo.
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 en la consola de com, vía npm, como sigue:
npm install -g bower

Con esto tendremos Bower instalado en nuestro ordenador.

Inicializar nuestro proyecto con Bower

Ahora nos dirijimos a la carpeta de nuestro proyecto. Yo voy a realizar un proyecto con Bootstrap y Font-awesome.
Allí crearemos un archivo en la raíz del proyecto llamado .bowerrc. Este será el archivo de configuración para esta instancia de Bower. De momento escribiremos lo siguiente y guardaremos.

{
  "directory": "libs"
}

Así le especificamos que la carpeta donde estarán nuestras librerías será “libs”.
Ahora volveremos a la línea de comandos y nos situaremos en la carpeta de nuestro proyecto y escribiremos esto:
bower init

Con esta sentencia vamos a configurar nuestro proyecto. Nos preguntará una serie de detalles para configurarlo. Podemos rellenar los que tengamos claro de momento. Aquí tenéis una captura de mi ejemplo:

Inicialización de un proyecto con bower

Ejemplo de configuración de un proyecto con Bower.

Este proceso crea un fichero .json (bower.json) en la raíz de nuestro poyecto.

Instalar paquetes front end en nuestro proyecto con Bower

Bien! Pues ahora solo nos queda por hacer es instalar los paquetes que queramos para nuestro proyecto. Para hacerlo volveremos al terminal y escribiremos bower install y los paquetes que queramos separados por espacio finalizado con un --save. Para este proyecto de prueba usaré Bootstrap y Font-awesome y la línea de comando a ejecutar será la siguiente:
bower install bootstrap font-awesome --save

Una vez hecho esto veremos lo genial que es Bower:

  • Para empezar si nos fijamos en el fichero bower.json nos ha añadido las dependecias de nuestro proyecto.
"dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.6.3"
  }

  • También, si lo hemos hecho bien, nos habrá creado una carpeta “libs”, ya que así le habíamos indicado en el fichero .bowerrc, que contiene los paquetes que le hemos pedido que instale. En nuestro ejemplo “bootstrap” y “font-awesome”.

Podemos apreciar que hay un directorio extra que es “jquery”. Eso es porque bootstrap necesita de jQuery para funcionar. Así que Bower, no solo nos integra los paquetes que le pedimos , sino que también nos trae lo estos paquetes necesitan para funcionar.

Introducción a Bower

Bower nos crea el directorio con los paquetes y sus dependencias

Esto ha sido una breve introducción del potencial de Bower. Pero hay mucho más… Si quereis conocer bower mas a fondo os sugiero que visiteis su pagina web: https://bower.io/.
Allí encontrareis muchísima información para ampliar conocimientos. Podréis buscar todos los paquetes disponibles, hacer cosas mucho más específicas mediante diferentes comandos proporcionados por su API y ampliar conocimientos sobre el funcionamiento del fichero de configuración .json de Bower.

Espero que os haya gustado y que useis Bower en vuestros proyectos y/o ejercicios de la escuela.

Saludos

Escribe un comentario