Comparte en Facebook Twitter Google+

laravel-elixir

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:

Allí podrás ver la versión actual de npm. Ahora debemos instalar Gulp, un paquete de node que nos permite crear tareas automatizadas.

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”

Una vez dentro del nuevo directorio iniciamos npm

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

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.

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

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

Una vez instalado inicializamos Bower en el directorio del proyecto.

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:

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.

Ahora que hemos definido las dependencias podemos ejecutar desde la consola:

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

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

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

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:

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.

Para ver el resultado en el navegador, vamos a crear un nuevo archivo index.html con la siguiente estructura

Como puedes ver solo basta con agregar los archivos finales compilados

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.

imagen-1

¿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

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.