Symfony2 Assetic

I will try in short words write about using assetic in Symfony2 project.

Why do I need assetic anyway? What is that?
That was the first question I asked myself before asked my good friend ‘Google’.

Assetic Bundle is part of Symfony2.0 standard edition package. It is used to join all CSS files or all JavaScript files included in template, so loading time and number of file requests to web server are minimal.
For example if you have 5 or more CSS files included and also have few JavaScript files included in your twig template, page loading speed is slower than if you put all those CSS in one file and also all JavaScript in one file. But doing it manually is not good solution.
I suppose that you don’t want to manually join different JavaScript or CSS files.
Let assetic bundle do that for us:

There is one more important benefit of using assetic: with that you can also compress your css and JavaScript files and remove white spaces between code in them, so file size of those files are significantly smaller which give us smaller loading time and increase speed of page loading.

For this article, I choose one option for using assetic, so let’s start:

First of all, download yui compressor from the Yahoo! Site and unpack  ‘.jar’ file inside ‘app/Resources/java’ folder inside your project.

Rename it to ‘yuicompressor.jar’.

Now, change your style and JavaScript import declarations in template header into this:

{% stylesheets '@Symfony2uAdminBundle/Resources/public/css/*' filter='?yui_css' %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
{% javascripts '@Symfony2uAdminBundle/Resources/public/js/*' filter='?yui_js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

This tells to assetic that each file inside ..public/css folder need to be handled with assetic. You don’t have to specify each file manually. Filter attribute is name of compressor (filter) that we are using. In this case, we are using yui_css compressor. Next we need to make some changes in main config.yml file to make use of our assetic configuration:

    debug:          %kernel.debug%
    use_controller: false
            jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
            jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"

And that is all for basic configuration, We can start using assetic inside project. Don’t forget to delete existing cache and use command line tool to dump assetic:

php app/console assetic:dump

After that you can inspect your page source code to see how CSS and JavaScript files are included. Until now with current configuration, assetic are not compressed, but loaded separate in dev mode and joined into one file in production mode. If you want to be also compressed (this is not good for development, but just for production), just remove ‘?’ from filter=’?yui_css’ and filter=’?yui_js ‘attributes and dump assetic one more time after clearing cache:

{% stylesheets '@Symfony2uAdminBundle/Resources/public/css/*' filter='yui_css' %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"
{% endstylesheets %}
{% javascripts '@Symfony2uAdminBundle/Resources/public/js/*' filter='yui_js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
php app/console cache:clear
php app/console assetic:dump

Enjoy with Symfony2.0 like me every day! 🙂


  1. One thing, don’t use // to comment your Javascript, sometimes it can break yuicompressor ;-(

    There is no way to deal with image properly, I recommand to use LESS compilator to deal with CDN URL dynamically (in dev & prod env)

  2. I’m interested in Nyro’s question too. Have some problems using url in css…
    Have you may a simple and good description therefore?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.