Jose Hernández

Bower

Bower es un gestor de paquetes para componentes que contienen código HTML, CSS, Javascript, fuentes e imágenes. Es decir, nos permite gestionar los paquetes cuando trabajamos en frontend. Viene a ser el equivalente de Maven o Gradle para Java o Composer para PHP. Bower mantiene un seguimiento de las versiones y paquetes que usas en tu proyecto en un fichero llamado bower.json. Gracias a él todo tu equipo de desarrollo puede mantener un seguimiento con las versiones de cada proyecto que estais usando actualmente.

Instalar Bower

La instalación de Bower es muy sencilla, simplemente necesitamos tener instalado en nuestro equipo node y git. Cumpliendo estos requisitos, ahora abrimos un terminal y escribimos:

> npm install -g bower

Crear un proyecto con Bower

Para crear nuestro primer proyecto con bower podemos hacerlo de dos formas distintas. Podemos escribir el siguiente comando en un terminal:

> bower init

A continuación, contestando las distintas preguntas que nos van apareciendo se creará interactivamente nuestro fichero bower.json. La otra forma es crear el fichero a mano e ir rellenandolo.

En este artículo no pretendo explicar todas las opciones de configuración que tiene bower, para ello podemos darle un vistazo a su especificación donde se puede ver detalladamente cuales son y para que sirve cada uno de los elementos del fichero bower.json.

Pero vemos un ejemplo sencillo de un fichero:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "name": "sample-project",
  "authors": [
    "Jose Hernandez <my@mail.com>"
  ],
  "description": "This project is a sample about configure bower",
  "license": "MIT",
  "homepage": "http://josehernandez.xyz",
  "private": true,
  "dependencies": {
    "angular": "~1.5.0",
    "jquery": "~1.12.1",
    "bootstrap": "~3.3.6"
  },
  "devDependencies": {
    "qunit": "~1.21.0"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
   ]
}

Los campos name, authors, description, license y homepage no necesitan mucha explicación, simplemente sirven para declarar la información del proyecto. Por su parte, el campo private es un campo para asegurarnos de que aunque intentemos publicar el proyecto, si este campo está a true, bower no permitirá hacerlo. Publicar un proyecto sirve por si estamos desarrollando una librería y queremos que la gente la pueda descargar mediante bower.

Pasemos ahora a otros campos más interesantes como lo son dependencies y devDependencies. Estos campos son para indicar de que otros proyectos va a depender el nuesto. La diferencia es que en devDependencies indicamos los proyectos necesarios durante el desarrollo, mientras que en dependencies ponemos los necesarios para que nuestra librería funcione correctamente. Normalmente en devDependencies suelen ir las dependencias de test, mocks… Como podemos ver, para indicar las dependencias ponemos el nombre de la librería que dependenemos y un número de versión.

Para definir la versión podemos indicarlo de varias formas y cada una tendrá un significado, veremos un ejemplo para que quede más claro:

  • “angular”: “1.5.0”: Se requiere la versión exacta 1.5.0, esta forma equivale a poner “angular”: “=1.5.0”, pero no es necesario ya que por defecto si no se indica ningún signo se asume que es el igual.
  • “angular”: “<=1.5.0”: Se requiere cualquier versión que sea menor o igual que la 1.5.0. Versiones validas serian: 1.5.0, 1.4.9, 1.2… Mientras que versiones invalidas serían: 1.5.1, 1.6, 2.3…
  • “angular”: “>=1.5.0”: Se requiere cualquier versión mayor o igual que la 1.5.0. Versiones validas serían: 1.5.0, 1.5.1, 1.6, 2.3,… Y versiones invalidas: 1.4.9, 1.2, 1…
  • “angular”: “<1.5”: Se requiere cualquier versión menor que la 1.5. Las validas serían: 1.4.9, 1.4.8, 1.2… Las invalidas: 1.5, 1.5.0, 1.6…
  • “angular”: “>1.5.2”: Se requiere cualquier version mayor que la 1.5.3. Validas: 1.5.3, 1.7, 4.3… Invalidas: 1.5.2, 1.5, 1.2…
  • “angular”: “~1.5.0”: Con el simbolo ~ indicamos que requerimos la última versión que se encuentre de la 1.5. Es decir, sería como expresar la ultima versión de 1.5.x donde x tomaría el valor de la última versión disponible (1.5.7 por ejemplo). En caso de solo indicar una major y una minor “~1.5” estaríamos indicando que queremos la ultima versión de 1.x donde la x seria de nuevo la última version disponible (1.7.3 por ejemplo).

Una vez vistas las dependencias, pasemos al último campo que nos queda ignore. En este campo indicamos los tipos de ficheros que queremos que bower no instale cuando se descarga el proyecto. En el ejemplo indicamos que no queremos que nos instale ficheros que empiezen por el caracter ‘.’ o que estén en algunas de las carpetas indicadas. Esto viene bien para evitar tener un monton de ficheros en tu directorio que no vas a utilizar

Con todo lo anterior claro, es momento para instalar nuestras dependencias, así que volvemos al terminal y escribimos lo siguiente para que bower comienza a descargar:

> bower install

Si quisierasmos obtener la versión sin las dependencias de devDependencies escribiriamos:

> bower install -p

Comprobar las dependencias instaladas

Cuando la instalación finalice, podemos comprobar el directorio desde donde hemos ejecutado bower y podremos observar que se ha creado un nuevo directorio llamado bower_components. Dentro de él tenemos varios directorios con cada una de las librerías que hemos indicado como dependencias y si los abrimos veremos los fichero que contiene cada una.

En teoría ahora podríamos enlazar los fichero .js y .css que necesitemos desde este directorio y podríamos comenzar a trabajar. Pero si vemos con detalles los directorios de las librerías, vemos que en algunos de ellos hay muchisimos archivos que se han descargado y que no vamos a usar. Esto es debido a que bower se descarga todo el repositorio completo de las librerías y únicamente elimina los fichero que hemos indicado en la sección ignore. Pero, ¿como podríamos optimizarlo para únicamente obtener los ficheros que realmente vamos a utilizar? En este punto hay muchas alternativas, se podría usar grunt o gulp, pero yo voy a utilizar bower-installer que es muy sencillo.

Instalar bower-installer

La instalación de bower-installer es igual de fácil que fué la de bower. Solo tenemos que ir a un terminal y escribir:

> npm install -g bower-installer

Completar la configuración del proyecto

Para que bower-installer funcione, simplemente tenemos que añadir a nuestro fichero bower.json un nuevo apartado llamado install

1
2
3
4
5
6
7
{
  ...
  
  "install": {
    "path": "statics"      
  }
}

Simplemente añadiendo esto, haremos que los ficheros .css, .js, .less… ahora estén en el directorio statics. Para comprobarlo de nuevo vamos al terminal y esta vez escribimo:

> bower-installer

Pero aun podemos definir más la instalación, si en vez del código anterior añadimos lo siguiente al fichero bower.json:

1
2
3
4
5
6
7
8
9
10
{
  ...
  
  "install": {
    "path": {
      "css": "statics/css",
      "js": "statics/js"
    }
  }
}

Estaremos instalando los fichero css dentro de statics/css y los ficheros js dentro de statics/js. Además también podemos poner expresiones regulares en las reglas como por ejemplo ”/[sc|le]ss$/”: “statics/css” e indicaremos que tanto los ficheros scss y less vayan a la carpeta statics/css.

Una cosa a tener en cuenta es que algunos componentes registrados en bower no estan correctamente configurados y no se copian al destino que indicamos. Para poder copiar estos ficheros, tenemos que indicarlo manualmente añadiendo la sección sources dentro de install. Un ejemplo de esto lo podemos ver en el ejemplo que estamos siguiendo, ya que por ejemplo, la css de bootstrap no se copia. Para hacer que se copie y aparezca dentro de la ruta que nos interesa, modificaremos la sección install de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  ...
  
  "install": {
    "path": {
      "css": "statics/css",
      "js": "statics/js"
    },
    "sources": {
      "bootstrap": [
        "bower_components/bootstrap/dist/css/bootstrap.css"
      ]
    }
  }
}

De esta forma ahora si que tendremos bajo el directorio css el directorio bootstrap con su correspondiente css.

El último elemento que queda por ver en bower-install es como poder renombrar los ficheros, para ello supongamos que queremos copiar la css optimizada de la libreria bootstrap, bootstrap.min.css y queremos que se renombre como bootstrap.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  ...
  
  "install": {
    "path": {
      "css": "statics/css",
      "js": "statics/js"
    },
    "sources": {
      "bootstrap": {
        "mapping": [
          {"bower_components/bootstrap/dist/css/bootstrap.min.css": "bootstrap.css"}
        ]
      }
    }
  }
}

Si lo comprobamos veremos que ahora la versión que se ha copiado ha sido la del fichero bootstrap.min.css y se ha cambiado su nombre al indicado