Elixir es una herramienta que permite programar, de una forma muy fácil y rápida, tareas de Gulp dentro de nuestra aplicación siendo compatible con una gran variedad de pre-procesadores de CSS y javascript. Gracias a esto puedes estructurar tanto el diseño como la funcionalidad de tu aplicación de una forma mas ordenada, creando pequeños archivos con menos código, posteriormente gracias a Elixir y Gulp dichos archivos pueden ser comprimidos en uno único disminuyendo la carga de peticiones en tu proyecto y optimizando el tiempo de respuesta en la aplicación.

Gulp esta desarrollado en javascript y disponible a través de node.js, por lo cual antes de iniciar deberías tener instaladas estas dos herramientas en tu máquina de trabajo.

Instalando node.js

node-js-install

Su instalación es realmente sencilla solo debes dirigirte a la página de descargas de node.js y seleccionar la versión correspondiente a tu sistema operativo, posteriormente ejecutar el instalador y seguir las instrucciones.

Para verificar que todo haya finalizado correctamente ejecuta desde la consola de comandos:

$ node -v

y podrás ver la versión que has instalado:

v0.12.5

Instalando Gulp 

gulp

Desde la consola de comandos debes ejecutar:

$ npm install -g gulp

Si estas en Linux y obtienes algún error durante la instalación, es probable que debas ejecutar este comando como administrador:

$ sudo npm install -g gulp

Trabajando con Gulp y Sass

Por defecto Elixir viene configurado para trabajar con Less, pero muchos programadores prefieren usar Sass por diferentes razones y si eres uno de ellos, no te preocupes, la configuración es muy sencilla.

Puedes crear tus estilos de scss dentro de resources/assets/sass y definir dentro de un archivo llamado app.scss todos tus estilos, en este post no hablaremos mucho sobre la sintaxis del pre-procesador o de CSS, así que solo lo voy a ejemplificar con lo siguiente

.body {
	width:100%;
}

Solo una pequeña muestra de css convencional. Si queremos compilar nuestro código de scss a css para incluirlo en la aplicación solo debemos indicarle a elixir cual es el archivo que deseamos compilar modificando un poco las instrucciones de gulpfile.js ubicado en el directorio raíz de la aplicación.

elixir(function(mix) {
    mix.sass('app.scss');
});

Luego desde la consola ejecutamos

$ gulp

Nota: si durante la ejecución obtienes algún error del tipo error cannot find module ‘clean-css’ o algo por el estilo en la consola, no entres en pánico, esto quiere decir que debes instalar dicho módulo y para ello ejecutas

npm install clean-css

Y lo mismo debes hacer para errores similares, solo basta con leer un poco la respuesta que te devuelve la ejecución de cada comando.

Le estamos diciendo que compile el archivo app.scss, como resultado tendremos dentro del directorio public/css un archivo llamado app.css.

.body {
  widh: 100%; }

/*# sourceMappingURL=app.css.map */

Pero qué ocurre cuando tenemos mas de un archivo .scss ?

Vamos a crear un archivo con un poco mas de sintaxis sass llamado style.scss

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

Modificamos nuevamente packages.js para incluirlo en la función

elixir(function(mix) {
    mix.sass(['app.scss', 'other.scss']);
});

Y nuevamente desde la consola

$ gulp

Ahora nuestro archivo public/css/app.css ha cambiado a algo como esto

.body {
  widh: 100%; }

#main p {
  color: #00ff00;
  width: 97%; }

#main p .redbox {
  background-color: #ff0000;
  color: #000000; }

/*# sourceMappingURL=app.css.map */

Genial! ahora solo debemos incluir en nuestra vista o plantilla un link a este único archivo app.css.

 Trabajando con archivos css 

Si hasta este momento estas pensando algo como, «para esto debo aprender sass o less y a mi me gusta trabajar con css plano, no tengo interés en usar ningún pre-procesador y no veo la utilidad de usar elixir..», Piénsalo otra vez pues de igual forma puedes compilar varios de tus archivos css dentro de uno solo con algunos cambios.

Nuevamente vamos a crear dos archivos css dentro del mismo directorio public/assets/css (el directorio es opcional puedes cambiarlo si lo desas)

style.css

.main {
	width: 80%;
}

nav.css

.boxed {
	margin : 1em;
}

En este caso debemos cambiar la instrucción mix.sass por mix.styles

    mix.styles([
    	'css/style.css',
    	'css/nav.css'
    ], null, 'public/assets');

Por defecto Laravel usa como carpeta base para los estilos resources/assets/ ya que estoy utilizando otra ubicación, debo especificar cual es el nuevo directorio base enviándolo a través del tercer parámetro, el segundo parámetro es el nombre del archivo de salida, pero nuevamente, es opcional, lo podemos dejar en null y se creará uno con el nombre por defecto.

Como siempre, desde la consola

$ gulp

Y como resultado se habrá creado un nuevo archivo llamado all.css dentro de public/css

.main {
	width: 80%;
}
.boxed {
	margin : 1em;
}
/*# sourceMappingURL=all.css.map */

Trabajando con archivos de javascript

No te vallas todavía! si en lugar de trabajar con estilos y css eres desarrollador de javascritp, elixir también te va a servir, al igual que en el ejemplo anterior puedes fusionar tus archivos en un único compilado, qué cambia, no mucho, solo debes cambiar la instrucción dentro de packages.js a algo como esto

elixir(function(mix) {
    mix.scripts([
        "jquery.js",
        "app.js"
    ]);
});

y el resultado lo podrás ver dentro de la carpeta public/js

Como puedes ver elixir tiene una gran variedad de funcionalidades que puedes aplicar bien seas backend, o frntend, usando, o no, pre-procesadores tanto de javascript como de css.

Este ha sido un pequeño ejemplo de su potencial, si deseas aprender mucho más sobre este u otro de los componentes de Laravel te invito a seguir todas las Series y Cursos que tenemos para ti en Styde.

Lecturas recomendadas

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Jeff

Publicado por:

Laravel developer

Lección anterior Model factories en Laravel 5.1 Lección siguiente Artisan signatures en Laravel 5.1