Laravel, Elixir & Gulp

Con Laravel 5 puedes integrar el uso de Gulp mediante la herramienta Elixir que viene instalada en el proyecto por default de laravel 5, Gulp es una herramienta muy útil para el manejo de tareas repetitivas y/o automatizar tareas como hacer merge a los css o js, ademas de minificar los css y js, o usar pre procesadores para las hojas de estilo entre muchas otras operaciones, lo único que tienes que hacer previo a usar Gulp y Elixir es instalar nodejs y gulp para ello vamos a seguir los siguientes pasos:

Instalando Node JS en ubuntu linux (si ya lo tienes no continua con el tutorial)

Lo primero que necesitamos es instalar node Js en nuestro equipo

sudo apt-get install nodejs

si la instalación es exitosa podemos visualizar la versión de node con el siguiente comando

node -v

Instalamos el package manage de Node

sudo apt-get install npm

Instalamos Gulp

una vez que tengamos el package manager de node, podemos instalar gulp con el siguiente comando

npm install — global gulp

si tienes algun problema al instalar gulp prueba haciendo la instalación de gulp con sudo.

Instalar dependencias en la raiz del nuestro proyecto Laravel 5

una vez que tengamos node y gulp instalados, nos vamos al directorio raiz de nuestro proyecto y ejecutamos el comando

npm install

Con esto ya tendremos instalado elixir listo para trabajar…

Ahora con esto ya podemos automatizar tareas con gulp y elixir, recuerda que cuando comenzamos un proyecto nuevo en Laravel 5 se tiene una carpeta /resources/assets en la cual tu puedes guardar los “recursos” de tu pagina como son JS , CSS , etc. para comenzar, en nuestro directorio raiz de nuestro proyecto abrimos el archivo gulpfile.js y editamos las tareas que necesitamos automatizar con nuestros css y jss

En esta imagen hacemos uso de mix.styles que es una tarea que hace un merge(unifica) los css de tu aplicación

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ], 'public/build/css/everything.css');
});

Puedes asignar la ruta y el nombre del archivo final en la configuracion de esta tarea.

la orden mix.scripts nos hace un merge de los JS que definamos y podemos asignar el nombre final de nuestro js, y la orden mix.version versiona nuestros archivos para efectos de testeo de nuestra pagina web

esta es la imagen de nuestra carpeta /resources/assets para este ejemplo.

como podemos ver los js y css estan bajo la caperta /resources/assets

El último paso para compilar y ver funcionar nuestro ejemplo es correr el comando gulp en la consola en el directorio raíz de nuestra aplicación, y esto nos genera nuestros archivos versionados y con el merge aplicado.

los archivos generados son salvados en nuestra carpeta public y ahí son versionados y listos para usarse dentro de nuestras plantillas en Laravel 5, para usarlas solo tenemos que usar la etiqueta elixir y el nombre final de nuestro archivo generado en gulp y listo….

como puedes observar esto es muy útil a la hora de optimizar nuestro código y bibliotecas js y css para efectos de aplicación page speed a nuestros proyectos, si quieres saber mas acerca de el uso de elixir puedes ir a la documentación oficial de laravel 5 http://laravel.com/docs/5.3/elixir