Assets

La extensión permite gestionar los archivos css y javascript, que, en adelante, llamaremos activos.

Básicamente, se encarga de:

• Crear un único archivo "asset", que agrupa varios activos.
• Comprimir los archivos asset para el entorno de producción.
• Desagrupar los archivos asset para el entorno de desarrollo.
• Compilar y distribuir los archivos asset.
• Realizar un control de versión en la caché de los navegadores de los clientes.
• Utilizar sass para las hojas de estilo, administrar las variables sass y generar temas.
• Personalizar las hojas de estilo de las distribuciones, de acuerdo a los temas instalados.
• Reemplazar los archivos que trae una extensión, por archivos propios.

 

Assets

La librería principal es Assets. Se encarga de incluir activos en una página web.

De modo complementario, es posible utilizarla para declarar etiquetas meta y variables, que luego, pueden ser utilizadas por una plantilla.

La librería debe ejecutarse a través de una instancia única:

$assets = app('assets');

Sin embargo, pocas veces se utiliza la librería directemente, ya que es más común utilizarla, indirectamente, con el objeto Template.

Es decir, los métodos que detallaremos a continuación, podrán ser utilizados desde una plantilla.

 

Agregar archivos css

Agregue archivos css de la siguiente manera:

$assets->css('path/to/css/styles.css, path/to/css/styles2.css');
$assets->css(['path/to/css/styles.css', 'path/to/css/styles2.css']);
$assets->css([
	['href' => 'path/to/css/styles.css', 'integrity' => '...']
]);

La lista de rutas a las hojas de estilos puede ser:

1. una cadena separada por comas;
2. un arreglo;
3. un arreglo multidimensional, siendo cada uno de ellos, un par attributo/valor del activo.

 

Agregar archivos javascript

$assets->js('path/to/js/scripts.js, path/to/js/scripts2.js', true);
$assets->js(['path/to/js/scripts.js', 'path/to/js/scripts2.js']);
$assets->js([
	['src' => 'path/to/js/scripts.js', 'defer' => '']
]);

La lista de rutas a los archivos javascript puede ser:

1. una cadena separada por comas;
2. un arreglo;
3. un arreglo multidimensional, siendo cada uno de ellos, un par attributo/valor del activo.

Por defecto, los archivos javascript se declaran antes del cierre de la etiqueta body.

Si se desea declarar los archivos javascript en el head, debe pasarse true como segundo parámetro.

 

Utilizar los archivos de assets

Las rutas a los archivos generados por Assets, se definen como:

"assets/asset-key.min.css"
"assets/asset-key.min.js"

Con el solo hecho de utilizar estos archivos, ya estamos utilizando las funciones de la librería. Por ejemplo:

• en producción, las hojas de estilo pueden ser reemplazadas por las de otro tema;
• todos los activos pueden realizar un control de versión en la caché de los navegadores;
• en tiempo de desarrollo, es posible utilizar los archivos originales en lugar de las agrupaciones.

 

Ejecutar javascript

Es posible ejecutar código javascript cuando se termina de cargar la página, de la siguiente manera:

$assets->domready("alert('Hello word')");

 

Agregar etiquetas meta

Para ingresar etiquetas meta, utilice el método:

$assets->meta(['title' => '...', 'content' => '...']);

 

Utilizar un único método

Para agregar opciones de manera flexible, incluso variables aleatorias, se utiliza el método:

$assets->options([
	'js' => 'path/to/js/scripts.js',
	'css' => ['path/to/css/styles.css', 'path/to/css/styles2.css'],
	'domready' => "alert('Hello word')",
	'hash' => 'page-hash',
]);

En el ejemplo, agregamos una variable llamada hash. Para recuperar esa variable, se utiliza:

$hash = $assets->getOption('hash');