Load order in Symfony2 assetic for JS files
You can specify order which files are loaded using different folder structure like this:
{% javascripts '@AcmeFooBundle/Resources/public/js/file1.js' '@AcmeFooBundle/Resources/public/js/file2.js' '@AcmeFooBundle/Resources/public/js/folder/*'%} <script type="text/javascript" src="{{ asset_url }}"></script>{% endjavascripts %}
I do it by naming my .js files in the order I want. Like this:
10_foo.js20_bar.js30_baz.jsthen I don't need to specify them one by one, I just do as normal:
{% javascripts '@MyBundle/Resources/public/js/*' %} <script type="text/javascript" src="{{ asset_url }}"></script>{% endjavascripts %}and they are loaded in order.
Now for the main libraries that should be available in every page, I use a base.html.twig template in the app/Resources/view that gets extended in every page with this code in it:
before <body> tag:
{% stylesheets '@MyMainBundle/Resources/public/css/*' %} <link rel="stylesheet" href="{{ asset_url }}" />{% endstylesheets %}{% block stylesheets %}{% endblock %}and near the end of <body> tag:
{% javascripts '@MyMainBundle/Resources/public/js/*' %} <script type="text/javascript" src="{{ asset_url }}"></script>{% endjavascripts %}{% block javascripts %}{% endblock %}so I leave the main js libraries (with the naming convention I mentioned above) in the "MainBundle" and also configured in the base template. This way they are loaded in every page and I have the possibility of extending CSS and javascript files with some files specific to that page like this:
{% extends '::base.html.twig' %}{% block stylesheets %} {% stylesheets '@MySpecificBundle/Resources/public/css/*' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %}{% endblock %}{% block body %} ... < whatever > ...{% endblock %}{% block javascripts %} {{ parent() }} {% javascripts '@MySpecificBundle/Resources/public/js/*' %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %}{% endblock %}
It is an old question, but i was wondering too how to achieve that, and based on @TroodoN-Mike solution I realized that this will do the trick :
{% javascripts '@AcmeFooBundle/Resources/public/js/file1.js' '@AcmeFooBundle/Resources/public/js/*' %} <script type="text/javascript" src="{{ asset_url }}"></script>{% endjavascripts %}