Cargando



Añadiendo los Assets en Laravel

En este tutorial veremos cómo podemos añadir los assets a nuestra aplicación hecha con Laravel.


sep 19 2014 05:11
Avanzado
sep 22 2014 13:46
Los assets son los recursos que utilizamos en nuestra aplicación, generalmente son los archivos estáticos que nos ayudan a definir el comportamiento y el aspecto de la misma, dentro de esta categoría pueden caer los CSS, los Javascript, las imágenes, etc.

Si queremos ser unos buenos desarrolladores, debemos mantener un orden en nuestra aplicación, esto nos ayuda a dos cosas, la primera saber dónde va cada cosa, de forma que nuestro desarrollo sea lo más rápido y ordenado posible, y la segunda facilitar la vida de nuestros compañeros programadores.

Preparar la aplicación


Primero debemos configurar algunas cosas antes de poder añadir los assets a nuestras vistas, empezamos por modificar el archivo composer.json, ya que este es el que se encarga de instalar dependencias en nuestra aplicación, debemos hacer que tenga el siguiente contenido:

"require": {
	 "laravel/framework": "4.0.*",
	 "teepluss/asset": "dev-master"
},

Con esto aparte de añadir Laravel a nuestra aplicación que es una línea que debería estar creada, la segunda le indica a composer que debe instalar teepluss/asset que no es más que una librería que nos ayuda a manejar estos archivos.

Luego para hacer que esto funcione debemos actualizar nuestra aplicación corriendo el siguiente comando en consola:

php composer.phar update

Finalmente para terminar la fase de configuración en el archivo app/config/app.php debemos añadir un nuevo proveedor:

'Teepluss\Asset\AssetServiceProvider',

Para luego en el mismo archivo generar el alias correspondiente:

'Asset' => 'Teepluss\Asset\Facades\Asset'

Añadir los assets a las vistas


Ya que hemos cumplido con la fase de configuración de nuestra aplicación, ahora debemos hacer las incorporaciones correspondientes, para ello vamos a utilizar las librerías jQuery, jQuery UI y Bootstrap desde sus respectivos CDNs, de forma que no tengamos que descargar nada. Entonces en nuestro archivo routes.php vamos a generar las rutas correspondientes como podemos ver en la siguiente imagen:


Con esto ya creado podemos pasar a la siguiente fase y es incorporar efectivamente esto en una vista, para tal fin vamos a emplear el filtro before, con ello lograremos que se incluya esto antes que se ejecute el resto de la vista ya así lo tenga disponible:


Finalmente vamos a querer imprimir en nuestro documento el contenido de nuestras librerías de forma que las tengamos disponibles, para ello debemos utilizar el alias que creamos durante la configuración, gracias a esto podemos separarlos de forma lógica sin mucho inconveniente, veamos en nuestro header.php como quedarían los estilos:

laravel_add_assets3.jpg


Acto seguido vamos a hacer lo mismo pero con los scripts en nuestro footer, recordemos que por cuestiones de rendimiento se recomienda cargar los .js al final del archivo.

laravel_add_assets4.jpg


Ahora al navegar a nuestra vista del home y al inspeccionar el código fuente debemos tener disponible las librerías desde los CDNs que especificamos, con ello ya en toda nuestra aplicación en donde incluyamos el header y footer lo tendremos disponible.

Con esto finalizamos este tutorial, como vemos Laravel nos permite organizar este tema tan importante como lo son los assets, de manera que podamos mantener un orden adecuado en nuestra aplicación, recordemos que mientras más ordenados y metódicos seamos más fácil será de dar mantenimiento a nuestra aplicación.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X