What is the Assetic Bundle and why would I use it?

Until recently I simply published my bundles’ assets in the project’s web folder via symlinks.

php app/console assets:install web --symlink

Note: If you decide to use this method make sure you don’t forget to add the symlink parameter. It wouldn’t be the first time that I have forgotten it, and later wondered why new assets added to my bundle were not taking effect.

After linking your files so that they can be accessed in the web folder of the project I would the reference the asset in my twig files like so.

{{asset('bundles/mysite/css/contact.css')}}

Note: After publishing the assets the bundles assets are stored under the web folder in bundles, with each project having its own folder and subsequent heirarchy.

Assetic Bundle

The Assetic Bundle seems to be a much better solution to managing your assets. It provides similar flexibility, enabling assets to be stored and managed in individual files but with the efficiency at deployment by combining these assets to reduce the number of HTTP requests required by clients. Also, the Assetic Bundle comes with the Symfony 2.0 standard distribution bundle so all you need to do is start using it.

Basic Use

{% stylesheets '@SSMySiteBundle/Resources/css/style.css'%}
 
{% endstylesheets %}

This works in much the same way to the previous method, serving the asset directly, however this does mean that you don’t have to publish your assets directly to your web directory. Assetic becomes much more useful when you are looking to serve multiple files.

{% stylesheets '@SSMySiteBundle/Resources/css/style.css'
               '@SSMySiteBundle/Resources/css/contact.css'%}
 
{% endstylesheets %}

The key advantage of Assetic in this case, as previously hinted upon, is that both files are now served up as a single file, reducing the number of HTTP requests required by the client. This can be made yet more efficient by compressing this combined file using Assetic’s built in YUI compression filter.

{% stylesheets filter='yui_css'
    '@SSMySiteBundle/Resources/css/style.css'
    '@SSMySiteBundle/Resources/css/contact.css'%}
 
{% endstylesheets %}

In order to use the YUI compression filter you must have the following, minimum, configuration in your app/config/config.yml.

# app/config/config.yml
 
# Assetic Configuration
assetic:
    debug:         %kernel.debug%
    use_controller: false
    filters:
        yui_css:
             jar: /usr/share/yui-compressor/yui-compressor.jar
        yui_js:
             jar: /usr/share/yui-compressor/yui-compressor.jar

That is all that is required for the basic configuration, you are now ready to start using Assetic in your Symfony project. As always you have to remember to clear your existing cache and “dump Assetic”.

php app/console cache:clear
php app/console assetic:dump

You can find more information about configuring the YUI compression filter at sftuts.com

This post has concentrated on css files however using Assetic for your javascript files is almost identical. You can see the configuration for the YUI compression filter for javascript files above. and the following snippet illustrates how to include all of you javascript resources.

{% javascripts '@SSMySiteBundle/Resources/public/js/*' filter='yui_js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}