Ver índice de contenidos del libro

10.1. Utilizando Assetic

Hoy en día es prácticamente imposible que un sitio web defina solamente unos pocos archivos CSS y JavaScript estáticos. Seguramente tus proyectos utilizarán varios archivos Sass o LESS que se compilan a código CSS y después se combinan y minimizan para mejorar el rendimiento de la parte frontal de la aplicación.

Existen muchas herramientas que resuelven bien este problema, incluyendo algunas especialmente diseñadas para el frontend y que no utilizan PHP, como por ejemplo GruntJS.

Buena Práctica Utiliza Assetic para compilar, combinar y minimizar los assets web, a menos que sepas utilizar bien herramientas del frontend como GruntJS.

Assetic es un gestor de assets capaz de compilar los assets desarrollados con decenas de tecnologías, incluyendo por supuesto LESS, Sass y CoffeScript. Combinar todos estos assets en un único archivo mediante Assetic es tan sencillo como utilizar la etiqueta {% stylesheets %} de Twig:

{% stylesheets
    'css/bootstrap.min.css'
    'css/main.css'
    filter='cssrewrite' output='css/compiled/all.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
 
{# ... #}
 
{% stylesheets
    'js/jquery.min.js'
    'js/bootstrap.min.js'
    output='js/compiled/all.js' %}
    <script src="{{ asset_url }}"></script>
{% endstylesheets %}

10.1.1. Aprendiendo más sobre Assetic

Assetic también es capaz de minimizar los archivos CSS y JavaScript utilizando UglifyCSS/UglifyJS, para aumentar el rendimiento de tu sitio web. De hecho, Assetic también puede comprimir las imágenes para reducir su tamaño antes de servirlas a los usuarios.