Load one js file using assetic inside Symfony2

Question

I am new to Symfony 2. Previously I worked a lot with Codeigniter. Now that I am exploring assetic, I am not able to understand how I can add a single file to the stack of JS files which are already being loaded.

I have a main page twig file which has something like this:

{% javascripts '@BlogBlogBundle/Resources/public/js/vendor/*' output='js/combined.js' %}
  <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Now this works fine if all the JS files are inside the vendor folder. But what if I have a JS file contact.js inside a folder called contact and I want that to be visible only on contact page. So, when I added such a code inside block body of contact page twig file

{% javascripts '@BlogBlogBundle/Resources/public/js/home/*' output='js/home_combined.js' %}
  <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

the contact.js is coming before all other js files which are being loaded before the body ends.

In codeigniter, using the Carabiner library I could set up the default files which I want to load on all pages like jQuery. And if there are any specific file for a page, I can do that inside that particular controller.

Please let me know how I can do this inside Symfony also.

Answer 1

You can add a file to your assets like this:

{% javascripts
    '@YourBundle/Resources/public/js/*'
    '@AnotherBundle/Resources/public/js/some.js'
    '@YourBundle/Resources/public/vendor/someother.js'
    output="filename.js"
%}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

In order to have pre-defined asset collections which you can then use as for example '@js_default' you can add these in your assetic.assets configuration as suggested in my answer here.

Answer 2

To add the contact.js after the main file js files you can do something like this.

    {% block javascripts %}
       {{- parent() -}}
       {% javascripts "@AcmeBundle/Resources/public/js/contact.js"  %} 
                 <script type="text/javascript" src="{{ asset_url }}" ></script>
       {% endjavascripts %}
    {% endblock %}