Assetic Asset Collection Concatenated in Debug Mode

Question

I am attempting to use Assetic in a Symfony 2 project. I have following settings in my config.yml:

# app/config/config.yml
assetic:
    debug:          %kernel.debug%
    use_controller: true
    filters:
        cssrewrite: ~
        yui_css:
            jar: /home/testing/bin/yuicompressor-2.4.7.jar
        less:
            node: /usr/bin/node
            node_paths: [/usr/local/bin/]
            apply_to: "\.less$"
    assets:
        all_js:
            inputs:
                - @FoundationViewBundle/Resources/public/js/*
            filters: [?yui_js]
        all_css:
            inputs:
                - @FoundationViewBundle/Resources/public/css/*
            filters: [less, ?yui_css]

(In case you're wondering, these settings are not being overridden in the config_dev.yml file.)

These collections are picked up by Assetic and routes are created for them. There are individual routes for each file with a number and the filename without the file extension. For example, for the "base.css" file, the route to download the file (with filters applied) is "/assetic/all_css_part_1_base_1".

I then include the asset collections in my Twig template as follows:

{% stylesheets '@all_css' %}
    <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}">
{% endstylesheets %}

(And similarly for the "all_js" collection, but I'll use the css side to demonstrate my issue.)

When Twig renders my template, it does not use the routes created for the individual files, but instead displays the "asset_url" for the "all_css" collection as "/css/9118a5a_part_1.css".

I'm using the dev front controller and have tested that Assetic believes it is in debug mode. (The production-only filters are not applied.) However the files are still being concatenated, despite documentation suggesting otherwise.

It is very difficult to track down problems in these files since the line numbers do not match up, especially for JavaScript errors. Is there something else that I need to do in order for Twig to display the files separately?

Answer 1

You have to specify the ouput parameter in your twig blocks as follow.

{% javascripts '@all_js' output="assetic/js/all.min.js" debug=false %}
   <script type="text/javascript" charset="utf-8" src="{{ asset_url }}">
{% endjavascripts %}

{% stylesheets '@all_css' output="assetic/css/all.min.css" debug=false  %}
   <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}">
{% endstylesheets %}

The best would be to rely on output parameter specified in config.yml but unfortunately it doesn't work. It works to output the correct file when dumping the assets but not to insert asset automatically in twig. You have to specify it like in the previous example.

The debug argument here is optional it's meant to force debug mode for a specific collection and output different files. You can also set this parameter in config.yml.

assets:
    all_js:
        inputs:
            - @FoundationViewBundle/Resources/public/js/*
        filters: [?yui_js]
        output: "assetic/css/all.min.js"
        debug: true