Elixir es la herramienta oficial de Laravel para el manejo de assets dentro del framework.
Elixir provee una clara y fluida API para definir tareas básicas de Gulp en tus aplicaciones de Laravel. Elixir soporta muchas de los comunes pre-procesadores para CSS y JavaScript, incluyendo herramientas para pruebas.
Cuando ejecutamos «npm install» por primera vez en un proyecto de Laravel, se instalan las dependencias definidas en el archivo package.json ubicado en la raíz del proyecto. Hoy aprenderemos a crear un nuevo proyecto desde cero utilizando npm y a cómo configurar Elixir para compilar fácilmente los assets de tu aplicación. Ésta es una solución muy útil a la hora de trabajar con maquetado de proyectos o sitios estáticos (solo front-end).
Node.js, npm y Gulp
Primero debes instalar node.js en tu máquina, esto puedes hacerlo descargando el instalador correspondiente a la versión de tu sistema operativo y siguiendo las instrucciones de instalación en https://nodejs.org/en/ Una vez instalado node.js tendrás acceso a npm (node package manager), el manejador de paquetes de node, para verificar que es así ejecuta desde la consola:
$ npm -v
Allí podrás ver la versión actual de npm. Ahora debemos instalar Gulp, un paquete de node que nos permite crear tareas automatizadas.
$ npm install -g gulp
El flag -g permite instalar el paquete de forma global.
Creando un nuevo proyecto con npm
Desde la consola creamos un nuevo directorio para nuestro proyecto, en mi caso usare uno llamado «styde-elixir»
$ mkdir styde-elixir
Una vez dentro del nuevo directorio iniciamos npm
$ npm init
Deberás llenar los campos que te pide la consola como nombre del proyecto, versión, autor, etc. Al final se habrá creado un nuevo archivo llamado packages.json similar a este
{
"name": "styde-elixir",
"version": "1.0.0",
"description": "Test project",
"main": "index.js",
"scripts": {
"test": "test"
},
"author": "Jeff @jeffer8a",
"license": "ISC"
}
Allí se irán registrando igualmente las dependencias que vayamos instalando en el proyecto.
Instalando Gulp y Elixir
Anteriormente instalamos Gulp de forma global, esta vez lo haremos dentro del directorio local, con esto nos aseguramos de registrarlo como una dependencia necesaria que se instalará cada vez que hagamos «npm install» desde cualquier otra maquina, en caso de que necesites compartir el proyecto.
$ npm install gulp --save-dev
El flag –save-dev registra el paquete como una dependencia necesaria para el desarrollo del proyecto dentro del archivo packages.json.
Ahora instalamos Elixir de la misma forma
$ npm instal laravel-elixir --save-dev
Las dependencias de node se instalan dentro de un nuevo directorio llamado node_modules.
Si estas utilizando git, deberás agregar este directorio al archivo .gitignore para evitar subir una gran cantidad de archivos innecesarios al repositorio de tu proyecto.
Para más información sobre como usar Gulp y Elixir visita nuestro post sobre Manejo de assets con Elixir y Gulp en Laravel 5.1
Instalando Bower
Bower es otro manejador de paquetes y dependencias similar a npm, algunas personas prefieren utilizar Bower en algunos casos para cierto tipo de dependencias, por ello explicaremos su instalación aquí. Primero debemos instalarlo de forma global con
$ npm install bower -g
Una vez instalado inicializamos Bower en el directorio del proyecto.
$ bower init
Igualmente debes llenar los campos que te pide la consola y al final del proceso tendrás un archivo llamado bower.json similar a este:
{
"name": "styde-elixir",
"version": "1.0.0",
"authors": [
"Jeff"
],
"description": "Test project",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
Instalando algunas dependencias antes de iniciar el proyecto
Para esto usaremos Bower. Las dependencias a instalar son de uso común en proyectos nuevos
- jQuery
- Font Awesome
- Normalize
- Bootstrap Sass
Hay dos forma de instalar estas dependencias usando Bower, la primera es instalando una a una desde la consola. La segunda y la más conveniente en este caso es instalar todas las dependencias simultáneamente editando el archivo bower.json de la siguiente manera.
{
"name": "styde-elixir",
"version": "1.0.0",
"authors": [
"Jeff"
],
"description": "Test project",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.1.4",
"bootstrap-sass-official": "~3.3.4",
"font-awesome": "~4.3.0",
"normalize.css": "~3.0.3"
}
}
Ahora que hemos definido las dependencias podemos ejecutar desde la consola:
$ bower install
Este comando instalará todas las dependencias dentro de un nuevo directorio llamado bower_components.
Si estas utilizando git, deberás agregar este directorio «bower_components» al archivo .gitignore.
Estructura del directorio del proyecto
Debido a que elixir fue un paquete construido para trabajar con el framework Laravel, hay una estructura de carpetas que debemos seguir para asegurarnos de que todo funcione correctamente en proyectos que no son de Laravel. La estructura es la siguiente
|-resources |----assets |-public |----css |----js
Custom assets
Por supuesto en algún punto deberemos comenzar a escribir algo de código de JavaScript y de CSS (o Sass en este caso) para compilarlo posteriormente. Para ello vamos a crear dos nuevos archivos
resources/assets/sass/app.scss resources/assets/js/app.js
Configurando Gulp
Gulp nos permite crear tareas automatizadas, en este caso vamos a configurar las acciones a realizar mediante Elixir una vez ejecutemos gulp desde la consola para compilar los assets del proyecto. Esto se hace en el archivo gulpfile.js
var elixir = require('laravel-elixir');
elixir(function(mix) {
// compila el archivo app.scss
mix.sass('app.scss')
// Copia las fuentes al directorio /public
.copy(
[
'bower_components/bootstrap-sass-official/assets/fonts',
'bower_components/font-awesome/fonts'
],
'public/fonts'
)
// Copia los archivos .js de jquery y bootstrap a resources/assets/js/vendor
.copy(
[
'bower_components/jquery/dist/jquery.js',
'bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js'
],
'resources/assets/js/vendor'
)
// Compila todos los .js dentro de public/app.js
.scripts(
[
'resources/assets/js/vendor/jquery.js',
'resources/assets/js/vendor/bootstrap.js',
'resources/assets/js/app.js'
],
'public/js/app.js'
)
// Opcional: crea una version para cada compilado dentro de public/build
.version(
[
"public/css/app.css",
"public/js/app.js"
]
);
});
Incluyendo Bootstrap
Dentro del archivo app.scss vamos a incluir o importar todos los archivos de Sass y CSS que deseamos compilar con gulp. Vamos a editar entonces el archivo app.scss de la siguiente manera:
@import "../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap"; @import "../../../bower_components/font-awesome/scss/font-awesome";
Cuando este archivo va a ser compilado dentro de public/css/app.css por eso se incluye el path relativo a esa dirección.
Compilando los assets
Una vez configurada nuestra aplicación tan solo nos queda ejecutar gulp y ver el resultado.
$ gulp
Para ver el resultado en el navegador, vamos a crear un nuevo archivo index.html con la siguiente estructura
<!DOCTYPE html>
<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 - Laravel Elixir</title>
<link href="public/css/app.css" rel="stylesheet">
<body>
<div class="container">
<div class="well center-block">
<a href="https://styde.net" class="btn btn-primary btn-lg btn-block">Go to Styde.Net</a>
</div>
</div>
<script src="public/js/app.js"></script>
</body>
</html>
Como puedes ver solo basta con agregar los archivos finales compilados
<link href="public/css/app.css" rel="stylesheet"> <script src="public/js/app.js"></script>
Ahora puedes desarrollar todo el código de tu proyecto dentro de resources/assets y compilarlos en app.js y app.css.
Simplemente abre el archivo index.html con tu navegador y veras los estilos de Bootstrap funcionando correctamente.
¿Quieres ir mucho más allá?
Si quieres crear tareas automáticas mucho más poderosas con Gulp, en Styde tenemos una serie que puede ayudarte, se trata de nuestro Curso de Gulp creado por Ramon Lapenta donde aprenderás todo lo referente a Gulp iniciando desde su instalación y configuración hasta la creación de tareas complejas para manejar tus proyectos de una forma mucho más profesional. Si quieres mejorar tus habilidades en el diseño web, puedes ver nuestro nuevo Curso de Sass dónde llevaremos tu forma de escribir CSS a otro nivel. En Styde.Net trabajamos día a día para crear material de calidad con el único objetivo de ayudarte a mejorar tus conocimientos como profesional en el mundo del desarrollo web.
Esto ha sido todo por ahora, espero que sigas nuestros cursos y lecciones, te espero en una próxima lección, por favor no olvides compartir este material en redes sociales y si tienes alguna duda, puedes dejarla en la sección de comentarios.
Continua aprendiendo
- Manejo de assets con Elixir y Gulp en Laravel 5.1
- Bootstrap Sass en Laravel con Elixir y Gulp
- Editar archivos Sass en Laravel con Chrome Developer Tools
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
