Comparte en Facebook Twitter Google+

banner-bootstrap-sass-con-bower-en-laravel

En la lección anterior te explicaba Cómo instalar la versión SASS de Bootstrap 3 en Laravel y como configurar Elixir para compilar tus archivos de Sass sin embargo dejamos de lado algo importante y se trata de los archivos de javascript, pero no te preocupes que es justo lo que vamos a solucionar a continuación.

Bootstrap requiere de dos archivos de javascript para funcionar correctamente. El primero de ellos es jquery.js y el segundo boostrap.js (propio de Bootstrap). En el ejemplo anterior agregábamos estos archivos de la siguiente manera:

Esto no esta mal del todo, pero ya que tenemos a nuestra disposición una poderosa herramienta como Elixir para compilar y minificar tus assets, puedes aprovecharla para optimizar al máximo el rendimiento de tus aplicaciones.

Una opción es descargar manualmente cada uno de los archivos para incluirlos en el directorio de la aplicación y posteriormente proceder a compilarlos, también podemos utilizar el archivo de bootstrap.js incluido en el directorio node_modules/boostrap-sass/assets/javascripts/bootstrap.js que instalamos en la clase anterior pero hoy te enseñaré a utilizar Bower, un gestor de paquetes para la web.

Bower es una herramienta que nos permite llevar control de los paquetes de javascript que usamos en nuestra aplicación, similar a como lo hace composer con nuestros paquetes de PHP.

Para instalar Bower hacemos uso del siguiente comando en el directorio principal del proyecto

Ahora para llevar un control de las dependencias o paquetes que instalaremos con Bower en nuestro proyecto podemos ejecutar

Sigue las instrucciones en la consola, puedes agregar allí los valores solicitados o simplemente presionar enter hasta finalizar. Una vez terminado el proceso se habrá creado un nuevo archivo llamado bower.json en el directorio principal del proyecto con una estructura similar a esta:

Ahora procedemos a instalar el paquete boostrap-sass-official que contiene tanto los archivos Sass como los archivos de javascript del framework.

En la clase anterior instalamos boostrap Sass utilizando npm, en esta lección vamos a hacerlo utilizando Bower.

De la misma manera instalamos jquery

El flag –save guarda este paquete en la lista de dependencias dentro del archivo bower.json

Estos paquetes se instalan en la carpeta bower_components.

Vamos a configurar el archivo gulpfile.js para compilar los archivos de javascript de la misma manera como lo hicimos con los archivos de Sass en la clase anterior.

El metodo .copy() nos permite copiar una serie de archivos en un nuevo directorio, en nuestro caso resources/assets/js/vendor.

El metodo .scripts() indica cuales de estos archivos van a ser compilados, en nuestro caso en un nuevo archivo llamado app.js.

Ahora simplemente ejecutamos el archivo para compilar y minificar el código

Por ultimo vamos a sustituir el llamado a los scripts jquery.js y bootstrap.js con app.js en el archivo layout.blade.php con el nuevo compilado app.js (esta es la vista que creamos en la clase anterior).

Si vas al navegador y abres nuevamente el url de tu aplicación veras el mismo resultado que obtuvimos en la primera parte de este tutorial, lo que quiere decir que todo esta funcionando correctamente.

Styde Net (1)

Estoy seguro que además de esto vas a necesitar escribir tus propios scripts y lo mejor es que estén compilados de igual manera dentro de app.js, para ello puedes crear un nuevo archivo llamado custom.js dentro de resources/assets/js.

Ahora agregamos este archivo a la lista de .scripts en gulpfile.js.

Y ejecutamos nuevamente

Si entras ahora al navegador y te diriges a la ruta principal del proyecto que creamos en la lección anterior y actualizas la página verás que todo sigue funcionando y aparecerá el siguiente mensaje.

Selección_022

Por ultimo, si pensamos un poco en lo que hicimos en la clase anterior, instalamos Bootstrap Sass como un componente de Node.js y nuevamente lo instalamos utilizando Bower, no hay necesidad de tener ambos directorios, para arreglar esto vamos a cambiar un poco el archivo resources/assets/sass/app.scss el cual se encuentra actualmente de la siguiente manera:

y alteramos la primera línea para que importe los archivos de Bootstrap que tenemos en el directorio bower_components

Una vez hecho esto puedes ejecutar nuevamente

y eliminar el directorio node_modules/bootstrap-sass.

Esto ha sido todo por ahora, prueba este componente y déjanos saber tu impresión acerca de el en la sección de comentarios, recuerda que puedes hacer tus recomendaciones para nuevo material en teach.styde.net.

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.

Lección anterior Uso de Sesiones en Laravel 5.1 Lección siguiente Cómo usar el componente de traducciones de Laravel