En un tutorial anterior hablamos sobre la configuración básica de Elixir en nuestros proyectos de Laravel, ahora vamos a instalar la versión Sass del framework de diseño Bootstrap 3 en un proyecto usando esta herramienta. Sass es un preprocesador de CSS que nos ayuda estructurar de una forma mucho más fácil y conveniente todo el código de diseño del proyecto, ademas a diferencia del CSS convencional, Sass nos permite utilizar, entre otros complementos, variables para definir valores constantes que podemos reutilizar en desarrollo, es allí donde está la mayor ventaja de usar esta versión de Bootstrap, ya que una vez instalado el framework podemos hacer uso de las variables o funciones del mismo. Ahora por medio de Laravel Elixir y Gulp podemos compilar los archivos Sass y convertirlos en archivos CSS y además el crear versiones de éstos.
Antes de ver un ejemplo iniciemos con la instalación.
Debes tener instalado node en tu máquina local, te recomiendo visitar este post sobre Manejo de assets con Elixir y Gulp en Laravel 5.1.
Este proceso es muy sencillo y consta básicamente de los siguientes pasos:
- Ingresa a la carpeta principal de tu proyecto y ejecuta
$ npm install // en windows $ npm install --no-bin-links
Este comando instala las dependencias definidas en el archivo package.js en la carpeta node_modules.
{ "private": true, "devDependencies": { "gulp": "^3.8.8" }, "dependencies": { "laravel-elixir": "^4.0.0", "bootstrap-sass": "^3.0.0" } } - Instalar Gulp desde la consola con:
$ npm install gulp
- Ingresa al archivo resources/assets/sass/app.scss, descomenta la línea que aparece en ese archivo y guarda los cambios.
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
Si ingresas al archivo gulpfile.js en el directorio principal del proyecto verás la siguiente estructura:
var elixir = require('laravel-elixir'); elixir(function(mix) { mix.sass('app.scss'); });Esto quiere decir que vamos a compilar el archivo app.css, por defecto lo hará en la carpeta public-css.
- Ejecuta desde la consola:
$ gulp
- Si ingresas al directorio public/css podrás ver el archivo app.css que contiene todo el código de Bootstrap compilado. Hasta ahora todo bien, pero podemos optimizar aún más el proceso agregando una versión minificada de este archivo, esto se puede hacer ejecutando:
$ gulp --production
- Por otra parte, lo mejor es además poder crear una compilación versionada de estos archivos, con la finalidad de evitar que se carguen versiones anteriores del diseño alojadas en la cache del navegador del usuario, esto se puede hacer modificando el archivo gulpfile.js:
var elixir = require('laravel-elixir'); elixir(function(mix) { mix.sass('app.scss') .version( [ "public/css/app.css" ] ); });Una vez hecho esto ejecutamos por consola nuevamente gulp –production y observamos los cambios ocurridos en la carpeta public:
├── build │ ├── css │ │ ├── app-4917ea3558.css │ │ └── app.css.map │ └── rev-manifest.json ├── css │ ├── app.css │ └── app.css.map
Ha sido creada una nueva carpeta llama build que contiene la versión del archivo app y cada vez que realicemos un cambio y compilemos el código esta versión va a cambiar.
- Vamos a crear una nueva vista que contenga el layout de nuestro proyecto:
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Styde.Net</title> <!-- Bootstrap --> <link rel="stylesheet" href="{{ elixir('css/app.css') }}"> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>para incluir el archivo CSS hacemos uso del helper de Laravel elixir() para que cargue el archivo CSS versionado:
<link rel="stylesheet" href="{{ elixir('css/app.css') }}"> - Vamos a agregar unos pequeños cambios al layout para verificar que Bootstrap está instalado:
<body> <div class="container"> <h1>Hello, world!</h1> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default desktop">Left</button> <button type="button" class="btn btn-default desktop">Middle</button> <button type="button" class="btn btn-default mobile">Right</button> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body>Si ingresas a la url de tu proyecto podrás ver algo similar a esto:
- Si te fijas he agregado dos clases nuevas a los botones que no pertenecen a Bootstrap que son «desktop» y «mobile» lo que quiero hacer con esto es darte un ejemplo del beneficio de instalar el framework de esta forma en lugar de usar los archivos planos de CSS.
Creamos un nuevo archivo llamado custom.scss dentro de resources/assets/sass.desktop { @extend .hidden-xs; } .mobile { @extend .visible-xs; }Usando la directiva @extend de SASS podemos extender las clases .visible-xs (para mostrar un objeto solo en mobile) y .hidden-xs (para ocultar un objeto solo en mobile) de Bootstrap, en este caso lo hacemos dentro de las dos nuevas clases que creamos.
Para incluir estos cambios no hace falta declarar otro «link» en el código HTML, sino simplemente vamos a incluir este archivo «custom» en la compilación editando el archivo app.scss de la siguiente manera:@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; @import "custom.scss";
Si entras al navegador veras que en los tamaños de pantalla mayores a 768px se mostraran los botones «left» y «middle» mientras que en tamaños de pantalla menores a ésta se mostrará solo el botón «right» (puedes verificando cambiando el tamaño de la ventana del navegador).
La finalidad de este tutorial no es explicar a fondo cómo funciona Sass sino cómo puedes configurar este tipo de archivos junto con el compilador en tus proyectos de Laravel, pero si te interesa conocer mucho más sobre este pre-procesador de CSS te recomiendo la serie Aprende Front-end (CSS, Sass).
Esto ha sido todo por ahora, espero te haya gustado este tutorial. Recuerda que puedes dejar tus dudas en la sección de comentarios.
Material Relacionado
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Sobrecarga en PHP extendiendo la clase Laravel Collection Lección siguiente Uso de Sesiones en Laravel 5.1