Bower es un manejador de dependencias especialmente dirigido para el front-end, con el podemos instalar dependencias como boostrap, jquery, angularjs y cualquier otro paquete que podamos manejar en el front-end.
El primer requisito es tener instalado en nuestra máquina nodejs y por supuesto, su manejador de paquetes npm. En los enlaces pueden encontrar información sobre nodejs y npm.
Una vez tengamos estos requisitos instalamos bower de la siguiente manera:
|
1 |
$ npm install -g bower |
Normalmente bower instala todos sus paquetes en el directorio bower_components/ de la raiz de nuestro sitio, para nuestro ejemplo demos/bower_components/ pero todos nuestros assets deben ir en la carpeta web/ para esto debemos configurar bower.
Creamos el archivo .bowerrc en la raiz del sitio y en este archivo colocamos la ruta donde se deben instalar los componentes de bower.
|
1 2 3 |
{ "directory": "web/assets/bower_components/" } |
Como la idea de nuestro proyeto demos es usarlo como una aplicación web, el siguiente paso es instalar bootstrap y ya que tenemos bower, simplemente ejecutamos el siguiente comando .
|
1 |
$ bower install bootstrap --save |
Esto instalará boostrap y todas sus dependencias y el resultado es como el que se muestra a continuación:
Instalar AsseticBundle
Symfony 2.8 por defecto no trae el asseticBundle para manejar los assets, así que es necesario instalarlo manualmente. Los pasos son muy sencillos.
|
1 |
$ composer require symfony/assetic-bundle |
Luego habilitamos el bundle en el AppKernel
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// app/AppKernel.php // ... class AppKernel extends Kernel { // ... public function registerBundles() { $bundles = array( // ... new Symfony\Bundle\AsseticBundle\AsseticBundle(), ); // ... } } |
Y por último, lo configuramos en el config.yml
|
1 2 3 4 5 6 7 8 |
# app/config/config.yml assetic: debug: '%kernel.debug%' use_controller: '%kernel.debug%' filters: cssrewrite: ~ # ... |
Con esto tenemos todo listo para comenzar a darle forma a nuestro proyecto.