6. Assetic

Assetic is an asset management framework for PHP. This extensions provides support for it’s usage in Symfony2 when using Smarty templates.

Assetic combines two major ideas: assets and filters. The assets are files such as CSS, JavaScript and image files. The filters are things that can be applied to these files before they are served to the browser. This allows a separation between the asset files stored in the application and the files actually presented to the user.

Using Assetic provides many advantages over directly serving the files. The files do not need to be stored where they are served from and can be drawn from various sources such as from within a bundle:

{javascripts
    assets='@AcmeFooBundle/Resources/public/js/*'
}
<script type="text/javascript" src="{$asset_url}"></script>
{/javascripts}

To bring in CSS stylesheets, you can use the same methodologies seen in this entry, except with the stylesheets tag:

{stylesheets
    assets='@AcmeFooBundle/Resources/public/css/*'
}
<link rel="stylesheet" href="{$asset_url}" />
{/stylesheets}

6.1. Combining Assets

You can also combine several files into one. This helps to reduce the number of HTTP requests, which is great for front end performance. It also allows you to maintain the files more easily by splitting them into manageable parts. This can help with re-usability as you can easily split project-specific files from those which can be used in other applications, but still serve them as a single file:

{javascripts
    assets='@AcmeFooBundle/Resources/public/js/*,
            @AcmeBarBundle/Resources/public/js/form.js,
            @AcmeBarBundle/Resources/public/js/calendar.js'
}
<script src="{$asset_url}"></script>
{/javascripts}

In the dev environment, each file is still served individually, so that you can debug problems more easily. However, in the prod environment, this will be rendered as a single script tag.

6.2. Block attributes

Here is a list of the possible attributes to define in the block function.

  • assets: A comma-separated list of files to include in the build (CSS, JS or image files)

  • debug: If set to true, the plugin will not combine your assets to allow easier debug

  • filter: A coma-separated list of filters to apply. Currently, only LESS and YuiCompressor (both CSS and JS) are supported

  • combine: Combine all of your CSS and JS files (overrides debug)

  • output: Defines the URLs that Assetic produces

  • var_name: The variable name that will be used to pass the asset URL to the <link> tag

  • as: An alias to var_name. Example: as='js_url'

  • vars: Array of asset variables. For a description of this recently added feature please check out the Johannes Schmitt blog post about Asset Variables in Assetic.

    Note: Unlike the examples given in the Asset Variables in Assetic, which uses curly brackets for the vars placeholder we are using square brackets due to Smarty usage of curly brackets as syntax delimiters. So js/messages.{locale}.js becomes js/messages.[locale].js.

6.3. Full example

Example using all available attributes:

{javascripts
    assets='@AcmeFooBundle/Resources/public/js/*,
            @AcmeBarBundle/Resources/public/js/form.js,
            @AcmeBarBundle/Resources/public/js/calendar.js',
            @AcmeBarBundle/Resources/public/js/messages.[locale].js
    filter='yui_js'
    output='js/compiled/main.js'
    var_name='js_url'
    vars=['locale']
}
<script src="{$js_url}"></script>
{/javascripts}

6.4. Symfony/Assetic documentation

For further details please refer to the Symfony documentation pages about Assetic: