Search code examples
javascriptsymfonyassetic

Combine javascripts from multiple templates with Assetic

Suppose I have the following twig templates:

base.html.twig:

<html>
    <body>
    {% block javascripts %}
        {% javascripts
            '../app/Resources/js/jquery-2.2.4.min.js'
            '../app/Resources/js/base.js'
            filter='uglifyjs2' output='main.js'
        %}
            <script src="{{ asset_url }}" type="text/javascript"></script>
        {% endjavascripts %}
    {% endblock javascripts %}
    </body>
</html>

page1.html.twig:

{% extends 'base.html.twig' %}

{% block javascripts %}
    {{ parent() }}
    {% javascripts
        '../app/Resources/js/page1_specific.js'
        '../app/Resources/js/page1_other.js'
        filter='uglifyjs2' output='page1.js'
    %}
        <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}
{% endblock javascripts %}

With this code, page1 template will make two javascript requests, one for main.js and another one for page1.js.

Is it possible to write it differently, so I it would generate only one big js file specific to each final template, including the base page js and the page1 specific js?

Solution

  • You can declare in your config.yml the base js, like this:

    assetic:
    assets:
        base:
        inputs:
            - '@AppBundle/Resources/public/js/jquery-2.2.4.min.js'
            - '@AppBundle/Resources/public/js/base.js'

    And call this in your javascript block:

    {% javascripts
    '@base'
    '../app/Resources/js/page1_specific.js'
    '../app/Resources/js/page1_other.js'
    filter='uglifyjs2' output='page1.js'
%}

    You can find more info here.