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:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>
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
$ npm install -g bower
Ahora para llevar un control de las dependencias o paquetes que instalaremos con Bower en nuestro proyecto podemos ejecutar
$ bower init
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:
{
"name": "elixir",
"version": "0.0.0",
"authors": [
"Jeff <[email protected]>"
],
"description": "test project",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
}
}
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.
$ bower install bootstrap-sass-official --save
De la misma manera instalamos jquery
$ bower install jquery --save
El flag –save guarda este paquete en la lista de dependencias dentro del archivo bower.json
"dependencies": {
"jquery": "~2.2.0",
"bootstrap-sass": "bootstrap-sass-official#~3.3.6"
}
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.
elixir(function(mix) {
mix.sass('app.scss')
.copy(
[
'bower_components/jquery/dist/jquery.js',
'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
],
'resources/assets/js/vendor'
)
.scripts(
[
'resources/assets/js/vendor/jquery.js',
'resources/assets/js/vendor/bootstrap.js',
],
'public/js/app.js'
)
.version(
[
"public/css/app.css",
"public/js/app.js"
]
);
});
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
$ gulp --production
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).
<script src="{{ elixir('js/app.js') }}"></script>
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.
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.
$(function(){
alert('It works');
});
Ahora agregamos este archivo a la lista de .scripts en gulpfile.js.
.scripts(
[
'resources/assets/js/vendor/jquery.js',
'resources/assets/js/vendor/bootstrap.js',
],
'public/js/app.js'
)
Y ejecutamos nuevamente
$ gulp --production
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.
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:
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; @import "_custom.scss";
y alteramos la primera línea para que importe los archivos de Bootstrap que tenemos en el directorio bower_components
@import "../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; @import "_custom.scss";
Una vez hecho esto puedes ejecutar nuevamente
$ gulp --production
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 obtén acceso a todo nuestro contenido.
Lección anterior Uso de Sesiones en Laravel 5.1 Lección siguiente Cómo usar el componente de traducciones de Laravel