Está en la página 1de 16

COMPOSER

Que es?
Composer es una herramienta imprescindible para los desarrolladores en PHP, que
permite gestionar de una manera gil las dependencias de un proyecto.
Composer es un gestor de dependencias en proyectos, para programacin en PHP. Eso
quiere decir que nos permite gestionar (declarar, descargar y mantener actualizados) los
paquetes de software en los que se basa nuestro proyecto PHP. Se ha convertido en una
herramienta de cabecera para cualquier desarrollador en este lenguaje que aprecie su
tiempo y el desarrollo gil.

Empiezas un nuevo proyecto con PHP? echa un vistazo antes a Composer porque te puede
ayudar bastante en el arranque y gracias a l podrs resumir muchas de las tareas de
mantenimiento de las libreras de terceros que ests usando.

Por qu un gestor de dependencias


Cuando comienzas un proyecto en PHP, ya de cierta complejidad, no te vale solo con la
librera de funciones nativa de PHP. Generalmente todos usamos alguna que otra librera de
terceros desarrolladores, que nos permite evitar empezar todo desde cero. Ya sea un
framework o algo ms acotado como un sistema para debug o envo de email, validacin de
formularios, etc., cualquier cosa que puedas necesitar ya est creada por otros
desarrolladores.

Todo eso sin contar con que ciertos softwares, como un framework como Symfony,
dependen a su vez de muchas otras libreras que tendras que instalar a mano y a su vez,
mantener actualizadas.

Los gestores de paquetes nos ayudan para resumir las tareas de descarga y mantenimiento
de las versiones del proyecto para que estn siempre actualizadas. Ya existan en otros
lenguajes de programacin y nos resultaban especialmente tiles como npm en NodeJS.
Ahora los desarrolladores de PHP tambin contamos con esta herramienta gracias a
Composer.

Cmo funciona Composer


Composer nos permite declarar las libreras que queremos usar en un proyecto. Su uso es
extremadamente simple, lo que anima a cualquier persona a usarlo, sea cual sea su nivel
tcnico.

Para beneficiarnos del workflow que nos propone Composer simplemente tenemos que
escribir un archivo de configuracin en el que indicamos qu paquetes vamos a requerir. El
archivo es un simple JSON en el que indicamos cosas como el autor del proyecto, las
dependencias, etc.

1
El archivo JSON debe tener un nombre especfico: composer.json

A continuacin tienes un ejemplo de JSON donde declaramos varios parmetros de nuestra


aplicacin.

{
"name": "desarrolloweb/probando-composer",
"require": {
"phpmailer/phpmailer": "5.2.*",
}
}
Luego nos pondremos a desgranar este cdigo para que se entienda cada una de sus partes,
as como veremos qu otra informacin podemos colocar en este JSON. La idea es ver lo
sencillo que es declarar qu libreras o software ests utilizando y con ello dejar nuestro
proyecto listo para la "magia" de Composer.

Una vez tenemos definidas las dependencias en nuestro proyecto debemos instalarlas. Esto
lo conseguimos con un simple comando en el terminal en el que le pedimos a Composer que
las instale:

composer install
Lanzado ese comando Composer se encargar de ir a los repositorios de paquetes de
software y descargar aquellas libreras mencionadas, copindolas en la carpeta de tu
proyecto.

Una vez finalizado el proceso en tu consola de comandos podrs encontrar en la carpeta de


tu proyecto un directorio llamado "vendor" donde estarn las libreras declaradas. Ya solo
nos queda hacer los includes para que estn disponibles en tus aplicaciones y para ello
tambin nos ayuda Composer.

Simplemente tendremos que hacer un nico include o require en nuestro cdigo y todas las
libreras estarn disponibles para usar.

require 'vendor/autoload.php';
Packagist
Se trata del repositorio de paquetes que son instalables por medio de Composer.

En la pgina de Packagist encontrars un buscador que te puede dar una idea de la cantidad
de material que encuentras disponible para usar en cualquier proyecto PHP.

https://packagist.org/

Simplemente busca por cualquier concepto que te interese, como email, template, wysiwyg,
etc. Vers que te aparecen varias opciones clasificadas por popularidad, descargas, etc.

2
Adems sobre cada paquete encuentras informacin y el cdigo necesario para declarar tu
dependencia en el JSON de Composer.

Instalar Composer
El proceso es bien simple. Si todo va bien se reduce a estas acciones, que dependen de tu
sistema operativo.

Windows:

Si estas en Windows usars un instalador de toda la vida. Ningn secreto. Es un asistente y


vas yendo a travs de varias ventanas, siguiente, siguiente.

Linux / Mac:

Si ests en Linux o Mac, usars la lnea de comandos para instalar Composer. Es tan sencillo
como ejecutar esta instruccin:

curl -sS https://getcomposer.org/installer | php


Nota: Ese comando requiere Curl, si te falla puedes intentar hacer lo mismo pero con el
comando de PHP.
php -r "readfile('https://getcomposer.org/installer');" | php
En ltimo caso tambin puedes descargar composer.phar a mano y colocarlo en la carpeta
de tu proyecto donde quieres que est disponible. http://getcomposer.org/composer.phar

Esto descargar en tu carpeta el archivo composer.phar que es un ejecutable de PHP. Los


.phar los puedes correr por la lnea de comandos como otros comandos del terminal. Ese
archivo es justamente el que invocas para cargar las dependencias o actualizarlas.

Colocar nuestro archivo composer.json


Ya lo explicamos en el primer artculo de este manual sobre Composer, pero lo volvemos a
mencionar. Para declarar las dependencias debes indicarlas en un archivo en notacin de
objeto Javascript (JSON). Ese archivo debes colocarlo en la carpeta raz de tu proyecto y su
nombre debe de ser composer.json.

El archivo JSON sirve para indicar algunos datos sobre nuestro proyecto, as como las
dependencias que tiene con otros paquetes de los que te encuentras en Packagist.

Para que sirva de muestra, veamos a continuacin el contenido de un archivo de ejemplo


composer.json.

3
{
"name": "desarrolloweb/probando-composer",
"require": {
"phpmailer/phpmailer": "5.2.*",
"raveren/kint": "0.9.*@dev"
}
}
En este archivo estamos indicando que nuestro proyecto se llama "desarrolloweb/probando-
composer". Siempre se utilizan dos nombres, uno el nick de la empresa o creadores y otro el
nombre del proyecto en s. Luego con el campo require estamos indicando que vamos a usar
dos libreras, por un lado el phpmailer de phpmailer y el kint de ravener.

Adems, observars que cada paquete tiene una versin requerida. Por ejemplo en
phpmailer declaramos como versin "5.2.*". Eso quiere decir que te instale siempre la
versin 5.2.x (la ms reciente de la 5.2). Pero podras haber declarado "5.*". Existen varios
operadores para especificar la versin. Lo mejor es que revises la documentacin de
Composer para conocerlos todos.

Instalando las libreras o software definido como dependencias


Una vez declarado ese json en la carpeta de nuestro proyecto tienes que lanzar un comando
para que composer se ponga en marcha, revise los paquetes que hemos declarado, los
descargue con sus dependencias y los instale en la carpeta de nuestro proyecto.

Ese comando de consola lo tienes que hacer desde la carpeta de tu proyecto. Abres el
terminal y te situas en la carpeta donde has creado en composer.json.

Dependiendo de la instalacin que hayamos realizado de Composer el comando puede tener


ligeras variaciones. Esto tambin puede depender de tu sistema operativo.

Si estamos en Windows es tan sencillo como hacer:

composer install
Nota: Lgicamente ese comando no te va a funcionar si no has instalado previamente
Composer.

Recuerda que en Windows Composer se instala de manera global, para que funcione desde
el terminal en cualquier carpeta de tu sistema. Simplemente te colocars en la carpeta de tu
proyecto y lanzars el comando "composer install" para descargar e instalar dependencias.
Si estamos en Linux/Mac y hemos instalado Composer de manera local a un proyecto. Ser
algo como:

php composer.phar install

4
Si ests en Linux/Mac y has hecho los pasos para instalar Composer de manera global el
comando puede ser:

composer install
Actualizando dependencias con Composer
Una vez ya tienes las dependencias instaladas, si deseas actualizarlas, o bien si has aadido
dependencias a tu archivo JSON, hars un comando como este:

composer update
Nota: Las variantes de ese comando sern ms o menos igual que las del comando
"composer install" dependiendo de nuestra instalacin de composer. Quizs en tu sistema
debas hacer algo como "php composer.phar update".
Con eso Composer se descargar automticamente las libreras que se hayan actualizado, o
aquellas que se han agregado al composer.json y las colocar dentro de la carpeta "vendor"
de tu proyecto.
Usar los paquetes instalados por Composer
Aparte de facilitar enormemente la descarga e instalacin de las dependencias, Composer te
proporciona un sistema de "autoload" de las clases que componen aquellas libreras que
ests usando.

Cuando instalas una dependencia via Composer te crea un directorio llamado "vendor" que
es donde se instalan todas las libreras que has solicitado. Adems, en esa misma carpeta
encontrars un archivo llamado "autoload.php" que es el nico script que debers incluir
desde PHP.

<?php
require "vendor/autoload.php";
// ahora ya puedes acceder a las clases creadas por las libreras declaradas como
dependencias
Es tan sencillo como esto. No tienes que hacer nada ms. Cada vez que necesites una clase o
una funcin de las declaradas en las dependencias de tu composer.json, estar disponible
para ti sin que tengas que hacer otras acciones. Como observars, este mecanismo tambin
te permite evitar crear una serie de includes o requires en todos tus archivos PHP,
reduciendo tu cdigo.

Sin duda usar Composer te facilitar mucho la vida en el da a da como desarrollador de


PHP. Una vez te acostumbres a este Workflow, muy sencillo como has podido comprobar, no
entenders cmo puedes haber vivido tanto tiempo sin l.

El esquema composer.json
El schema (esquema) de un JSON define la estructura del documento as como los valores
posibles que tengan cada uno de sus campos. La direccin concreta donde puedes encontrar

5
la descripcin completa del schema del composer.json la encuentras en esta URL de
documentacin:

https://getcomposer.org/doc/04-schema.md

Campos que describen tu proyecto


Veamos ahora una serie de campos para ofrecer informacin de nosotros como
desarrolladores de un proyecto. Estos son los datos que necesitaras enviar a Packagist, pero
que no son necesarios a nivel interno para que Composer funcione, sino ms bien para
etiquetar tu desarrollo, mencionar autores, etc.

name:

Sirve para indicar el nombre del autor, se compone de dos partes, el "vendor" (la empresa o
nick del desarrollador o grupo que lo ha creado) y el nombre del proyecto propiamente
dicho. Por supuesto, un vendor puede crear diversas libreras o paquetes y quedaran todas
vinculadas al mismo vendor con nombres de proyectos distintos.

description:

Es la descripcin que ofrecemos de este paquete. Es un texto normalmente de una nica


lnea.

homepage:

Una URL del sitio web del proyecto.

authors:

Es un array con los autores del proyecto. Cada uno de los elementos de ese array es a su vez
un objeto JSON donde se pueden indicar distintos datos: name, email, homepage, role (rol
dentro del proyecto).

"authors": [
{
"name": "Miguel Angel Alvarez",
"email": "algo@desarrolloweb.com",
"homepage": "http://www.desarrolloweb.com",
"role": "Project Manager"
},
{
"name": "Alvaro Martnez",
"email": "algo@escuela.it",
"homepage": "http://www.escuela.it",
"role": "Beta tester"

6
}
]
Definir las dependencias
A nivel de desarrollo de nuestras propias aplicaciones, el campo ms importante donde
debemos centrarnos es en la definicin de las dependencias, as como las versiones que
deseamos que sean instaladas, o actualizadas de cada una de esas dependencias.

require:

Es un objeto con una serie de pares clave/valor que definen cada una de las dependencias
que Composer debe instalar para nuestro proyecto. En la clave debemos de indicar el
nombre del paquete que depende (que obtienes del sitio de Packagist) y como valor
indicamos la versin que deseamos que est instalada, o el rango de versiones.

"require": {
"respect/validation": "0.6.*",
"phpunit/phpunit": ">=4.0",
"tinymce/tinymce": "dev-master"
}
En los pares clave/valor de cada una de las dependencias, la parte del nombre del vendor y
la librera es muy fcil de obtener. Simplemente te vas a Packagist buscas y escoges el
paquete que ms te convenga y copias la cadena del nombre. Por ejemplo
"respect/validation" indica que "respect" es el vendor y "validation" es el nombre de la
librera.

La parte de la versin tambin te puedes ayudar de Packagist, pues ah encontrars la lista


de versiones liberadas de esa librera y disponibles como paquetes. Lo que vers es que la
expresin que define la versin tiene algunos caracteres "comodn" que debes aprender a
tratar. En general puedes usar estas variantes de expresin.

Versin exacta: indicas a Composer que debe instalar una versin exacta, y solo
esa. Quiere decir que nunca te va a actualizar el paquete, porque tu proyecto debe
tener esa versin y no otra. Por ejemplo "4.3.1".
Rango de versiones: permite indicar versiones que sean mayor que una
determinada, menor o que est entre una versin y otra. Por ejemplo ">=2.0".
Comodn: Permite decir cualquier versin de una release mayor. Bueno, puedes
usar algo como "4.*" para indicar que se deje siempre la versin 4 y cualquier cosa.
O algo ms restrictivo como "4.2.*" que te pondr siempre la versin 4.2.x.
Lgicamente, en este caso cuando actualices, se colocar la versin ms avanzada
permitida por ese comodn.
Virgulilla (el rabo de la ee): permite indicar la versin de una manera diferente,
"prxima versin significativa". Por ejemplo, "~2.2" siempre te dejar la versin
mayor o igual a la 2.2 y menor que la 3.0. Por ejemplo "~2.2.1" te pondr la versin
mayor igual que 2.2.1 y menor que 2.3.

7
Tambin te permite cosas como "dev-master" que ser la versin actual de
desarrollo, que puede darse el caso que no sea estable. "1.0.*@beta" que te
permitir colocar versiones beta o "@dev" que tambin referencia a versiones de
desarrollo que pueden sufrir inestabilidad.

Mantener actualizado composer


Aparte de actualizar las dependencias, acurdate de actualizar el propio Composer. Una de
las primeras recomendaciones que te ofrecen en la gua de Composer es que ante cualquier
problema te asegures primero de estar ejecutando la versin ms nueva del software. Lo
consigues con un comando de auto-actualizacin o auto-update.

composer self-update
Recuerda que quizs tengas que ejecutar ese comando como superusuario (sudo composer
self-update). Recuerda tambin que si tu instalacin de composer no es global posiblemente
tengas que invocar llamando directamente a composer.phar a travs del intrprete de PHP
(php composer.phar self-update).

Problemas Comunes

JSON mal formado

Este error es muy fcil de detectar. Si has formado mal tu JSON tendrs un error como:

"./composer.json" does not contain valid JSON

En el artculo de la instalacin de Composer explicamos que uno de los problemas tpicos, en


Windowa es no estar usando la codificacin UTF-8. Es necesario para que composer
considere que el JSON est bien formado.

Si ests con UTF-8 debe ser un error de sintaxis, unas comillas que te faltan, una coma o algo
as. Si te vuelves loco para encontrar el fallo prueba a usar un Validador de JSON:
http://jsonlint.com/

Memoria lmite de PHP


Si tu composer.json declara muchas dependencias quizs tengas que aumentar la memoria
de los procesos de PHP. El error que vers es parecido a este:

Fatal error: Allowed memory size of 536870912 bytes exhausted (tried to allocate 72 bytes)
in phar:///usr/local/Cellar/composer/1.0.0-
alpha8/libexec/composer.phar/src/Composer/DependencyResolver/RuleSetGenerator.php
on line 123

Esto se soluciona asignando ms memoria para el proceso de PHP y se indica en el php.ini,


en la variable de configuracin memory_limit.

8
memory_limit = 2048M
El valor de memory_limit admite nmeros enteros, en cuyo caso ests especificando una
cantidad de Bytes. Pero tambin te admite terminar con una unidad ("K", "M", "G")
indicando el valor en Kb, Mega o Giga.

Cul es mi php.ini cuando trabajo por lnea de comandos?


Es una pregunta tpica. Si ests trabajando con Composer lo hars con el comando
"composer" en tu terminal de sistema operativo. En ese caso es posible que ests
trabajando con un php.ini diferente de tu PHP cuando trabaja sobre Apache.

Para saber el php.ini de lnea de comandos (PHP CLI) tienes que hacer simplemente este
comando.

php -i
Eso te mostrar una cantidad enorme de datos, parecidos a los que obtienes con phpinfo().
Tienes que buscar entre toda esa salida el texto "php.ini" para encontrar la ruta del archivo
de configuracin que se est utilizando.

Aumentar el tiempo del proceso de composer


Cuando invocas el comando composer de manera predeterminada se asigna un tiempo de
procesamiento que son 300 segundos. Este tiempo puede ser insuficiente en caso que los
paquetes a descargar sean pesados o en conexiones a Internet lentas. Si te ocurre esto
recibirs un error que entre otras cosas tendr este texto.

[...] The process "git clone [...] exceeded the timeout of 300 seconds

En este caso puedes invocar al comando asignando un nuevo valor mximo en segundos
para realizar las operaciones de actualizacin o instalacin de las dependencias. Sera algo
como:

COMPOSER_PROCESS_TIMEOUT=3600 composer install


En la propia documentacin de Composer encontrars una excelente gua de resolucin de
problemas (en ingls) en la que seguramente dars respuesta a muchas otras situaciones. Yo
ir colocando en esta lista otros problemas que me vaya encontrando, de momento esto es
todo! si tu problema no est en la lista mndanos la solucin cuando la encuentres!

9
BOWER
Qu es Bower?
Si tan solo buscamos cualquier definicin encontraremos que Bower se lo considera como
un manejador de paquetes para la web, es decir, cualquier librera de cdigo abierto que
puedas necesitar para el desarrollo de tu front-end lo podrs gestionar con Bower.
Es probable que es este concepto te parezca familiar si has ledo sobre npm antes,
podramos decir que el concepto y funcionamiento es bastante similar.

Entonces cual es la diferencia con npm?


Aunque algunos utilizan npm para el manejo de sus paquetes y librera en el front-end esta
prctica no es completamente acertada debido a que npm est enfocado principalmente a la
gestin de mdulos.
Bower est enfocado y optimizado para el front-end por lo que el manejo del rbol de
dependencias es plano, en lugar de anidado como npm, esto evita problemas de
versionamiento de las libreras adems de una cantidad innecesaria de dependencias por
versin.

Instalacin
Debido a que Bower depende directamente de npm, y por consiguiente de Node.js,
deberemos instalar estos primero, ya se de manera manual, o por Homebrew.
Posteriormente solo debemos instalar Bower de manera global:
$ npm install -g bower

Preparacin
Tomando como base la sencilla aplicacin en el repositorio de esta entrada, veremos que es
tan slo un pequeo servidor con una pgina de Hola Mundo:
doctype html
html
head
title= titulo
body
.jumbotron
p #{texto}

10
Lo cual en HTML sera algo como esto:
<!DOCTYPE html>
<html>
<head>
<title>titulo</title>
</head>
<body>
<div class="jumbotron">
<p>texto</p>
</div>
</body>
</html>

Vemos que tenemos la clase jumbotron de Twitter Bootstrap que por el momento no hace
ningn efecto porque no tenemos nada de esta librera.

Para ejecutar la aplicacin debemos ejecutar npm install y node app.js en el directorio del
proyecto.

Veamos como solucionarlo con Bower.

11
Buscar paquetes
Sabemos que queremos Twitter Bootstrap pero debemos encontrar el nombre del paquete,
para ello ejecutaremos en el terminal:
$ bower search bootstrap
Search results:

bootstrap git://github.com/twbs/bootstrap.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
sass-bootstrap git://github.com/jlong/sass-bootstrap.git
bootstrap-sass git://github.com/jlong/sass-twitter-bootstrap
bootstrap-datepicker git://github.com/eternicode/bootstrap-datepicker.git
bootstrap-select git://github.com/silviomoreto/bootstrap-select.git
bootstrap-timepicker git://github.com/jdewit/bootstrap-timepicker
angular-ui-bootstrap git://github.com/angular-ui/bootstrap.git
angular-ui-bootstrap-bower git://github.com/angular-ui/bootstrap-bower
bootstrap.css git://github.com/bowerjs/bootstrap.git
...

Veremos varios paquetes que contienen la palabra Bootstrap, esto se debe a la gran
popularidad de esta librera. Si la haz utilizado antes podrs identificarlo por su repositorio
de Github y sabrs que el paquete que estamos buscando es el primero de la lista.

Informacin de paquetes
Veamos un poco de informacin sobre l:
$ bower info bootstrap
bower bootstrap#* not-cached git://github.com/twbs/bootstrap.git#*
bower bootstrap#* resolve git://github.com/twbs/bootstrap.git#*
bower bootstrap#* download
https://github.com/twbs/bootstrap/archive/v3.1.1.tar.gz
bower bootstrap#* extract archive.tar.gz
bower bootstrap#* resolved git://github.com/twbs/bootstrap.git#3.1.1

{
name: 'bootstrap',
version: '3.1.1',
main: [
'./dist/css/bootstrap.css',
'./dist/js/bootstrap.js',
'./dist/fonts/glyphicons-halflings-regular.eot',
'./dist/fonts/glyphicons-halflings-regular.svg',
'./dist/fonts/glyphicons-halflings-regular.ttf',
'./dist/fonts/glyphicons-halflings-regular.woff'

12
],
ignore: [
'**/.*',
'_config.yml',
'CNAME',
'composer.json',
'CONTRIBUTING.md',
'docs',
'js/tests'
],
dependencies: {
jquery: '>= 1.9.0'
},
homepage: 'https://github.com/twbs/bootstrap'
}

Available versions:
- 3.1.1
- 3.1.0
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 3.0.0-rc1
- 3.0.0-rc.2
- 2.3.2
- 2.3.1
- 2.3.0
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.1
- 2.1.0
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.4.0
- 1.3.0
- 1.2.0
- 1.1.1
- 1.1.0
- 1.0.0

Podremos ver varios datos importantes de esta librera como:

13
Datos del repositorio y fuente de descarga.
Archivos principales que incluye.
Dependencias.
Versiones disponibles.

Instalacin de paquetes
Digamos que queremos instalar Bootstrap pero no estamos listos para la versin 3:
$ bower install bootstrap#2.3.2
...
...
bower bootstrap#2.3.2 install bootstrap#2.3.2
bower jquery#>=1.8.0 <2.1.0 install jquery#2.0.3

bootstrap#2.3.2 bower_components/bootstrap
jquery#2.0.3

jquery#2.0.3 bower_components/jquery

Si quisiramos instalar la ltima versin obviaramos el #2.3.2

Notaremos que aparte de instalar Bootstrap, Bower ha instalado tambin jQuery, pero te
preguntars:

Por qu la versin 2.0.3?


Si vemos las dependencias de esa versin de Bootstrap:
$ bower info bootstrap#2.3.2
...
dependencies: {
jquery: '>=1.8.0 <2.1.0'
},
...

Veremos que Bower instal la versin mas reciente de jQuery que cumple con las exigencias
de esa versin en particular.

Listar paquetes instalados


Echemos un vistazo a los paquetes que tenemos ahora:

14
$ bower list
bower check-new Checking for new versions of the project dependencies..
prueba-bower /Volumes/Storage/jonathanwiesel/Git/prueba-bower
bootstrap#2.3.2 extraneous (latest is 3.1.1)
jquery#2.0.3 (latest is 2.1.1-rc1)

Podemos notar un rbol de dependencias convencional pero si vemos el contenido del


directorio bower_component veremos algo as:
bower_components
bootstrap
docs
img
js
less
jquery
build
speed
src
test

Podrs notar que, como mencionamos inicialmente, el rbol fsico de dependencias es


plano, es decir, jQuery no est contenido dentro de Bootstrap lo cual tendera a traer
complicaciones si existiera otra librera que tambin dependiera de jQuery.

Actualizar paquetes (sin bower.json)


$ bower update

Qu paso, no se actualizaron mi paquetes?


Debido a que aun no tenemos un bower.json que indique algn parmetro de
versionamiento, Bower simplemente nos ignora. Esto lo veremos ms adelante.
Para este caso deberemos instalar directamente la ltima versin de esta manera:
$ bower install bootstrap

bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.1.1


bower bootstrap#* validate 3.1.1 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.0 cached git://github.com/jquery/jquery.git#2.1.0
bower jquery#>= 1.9.0 validate 2.1.0 against git://github.com/jquery/jquery.git#>= 1.9.0

Unable to find a suitable version for bootstrap, please choose one:


1) bootstrap#2.3.2 which resolved to 2.3.2
2) bootstrap#~3.1.1 which resolved to 3.1.1

15
Prefix the choice with ! to persist it to bower.json

[?] Answer: 2
bower bootstrap#~3.1.1 install bootstrap#3.1.1

bootstrap#3.1.1 bower_components/bootstrap
jquery#2.0.3

Veremos que slo la versin de Bootstrap se ha actualizado ya que la versin de jQuery que
tenamos sigue cumpliendo con las exigencias de dependencias que debe ser mayor o igual a
las 1.9.0, esto para evitar una incompatibilidad por actualizar dependencias sin control.

Demo
Ahora que tenemos nuestra librera de Bootstrap, solo debemos agregar las etiquetas
necesarias a la pgina para importar Bootstrap, su dependencia jQuery y la hoja de estilo de
Bootstrap:
doctype html
html
head
title= titulo
link(rel='stylesheet', href='/bootstrap/dist/css/bootstrap.min.css')
script(src='/bootstrap/dist/js/bootstrap.min.js')
script(src='/jquery/jquery.min.js')
body
.jumbotron
p #{texto}

La lnea app.use(express.static(__dirname + '/bower_components')); que tenemos en


nuestro app.js establece que el directorio /bower_components es de recursos estticos y
por ello podemos acceder a su contenido directamente en nuestras vistas.

Y veremos nuestra pgina ahora con el estilo de Twitter Bootstrap 3:

16

También podría gustarte