Elixir Laravel

Cómo instalar Elixir en Laravel 5.1

Aunque Laravel es un framework pensado para facilitar el desarrollo del backend en nuestras aplicaciones; también nos ofrece una herramienta para hacernos mas fácil el desarrollo del front-end. Y aún si eres desarrollador backend, tarde o temprano tendrás que hacer modificaciones o encargarte del desarrollo del front-end; y es aquí en donde Elixir se convierte en nuestro aliado.

Fue incluido en el paquete base de Laravel a partir de la versión 5.0. Nos ofrece un API o wrapper para trabajar con Gulp y, de esta forma, poder automatizar tareas recurrentes en el desarrollo del front-end. Tales como utilizar pre-procesadores de CSS Sass o Less, compilar Coffeescript a Javascript, entre muchas cosas más.

Si no estás familiarizado con Gulp, te recomiendo leer este artículo en el que explicamos a detalle qué es y cómo funciona.

Como mencioné al inicio, Elixir viene por defecto en el paquete inicial de Laravel desde la versión 5.0. Pero para este ejemplo utilizaremos la versión 5.1, ya que es la más reciente.

Instalación

Instalando Node

Antes de cualquier otra cosa, debemos estar seguros de tener instalado node en nuestra máquina de desarrollo. Para ello, basta escribir el siguiente comando en nuestra terminal.

node -v

Si node está instalado, veremos lo siguiente:

elixir-node

Si obtienes algún error, visita la página oficial e instala node. El proceso es tan simple que con un par de clics estará listo para usarse.

Instalando Gulp

De igual manera que como hicimos con node, debemos asegurarnos de tener instalado Gulp en nuestra máquina. Para saberlo, basta con escribir el siguiente comando en nuestra terminal:

gulp -v

Deberíamos obtener lo siguiente:

elixir-clu

Si obtienes algún error no te preocupes; su instalación es muy simple. Sólo debes escribir el siguiente comando en la terminal:

npm install --global gulp

Esto descargará e instalará gulp de forma global en tu máquina.

Instalando Elixir

Finalmente, es necesario instalar Elixir. Para ello, Laravel utiliza el archivo package.json que define todas las dependencias de node. El contenido del archivo luce así:

#JSON
{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
       },
  "dependencies": {
    "laravel-elixir": "^2.0.0",
    "bootstrap-sass": "^3.0.0"
  }
}
#JSON

Para instalar Elixir y sus dependencias, debes estar dentro del directorio raíz del proyecto de Laravel y escribir el siguiente comando:

npm install

Espera unos minutos y al terminar de ejecutarse el comando, Elixir debe estar instalado y listo para usarse.

Es importante mencionar que que node y Gulp se instalan una sola vez en tu máquina. Sin embargo, Elixir debe instalarse una vez por proyecto.

Probando Elixir

En el directorio raíz del proyecto encontrarás el archivo gulpfile.js. Aquí es donde se definen todas las tareas que quieres que realice Elixir. Por defecto, su contenido es el siguiente:

#Javascript
var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

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

Como puedes ver, el contenido es muy simple. Sólo se define una tarea para compilar el archivo app.scss.

Para probar que todo esté funcionando de manera correcta, basta con escribir en la terminal el siguiente comando:

gulp

Si todo está en orden, deberíamos ver lo siguiente:

elixir-gulp

¡Y listo! ya tienes instalado y configurado Elixir. Y ya puedes empezar a trabajar con él. En la próxima entrega de esta serie, aprenderás a detalle a usar la compilación de Sass y Less. Pero si quieres convertirte en un profesional del uso de Laravel 5.1, no te pierdas el curso de Platzi.

Entrar al curso de PHP y Laravel