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.

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:

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:

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

Comment *

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>.