Définir des groupes d'assets avec Assetic sous Symfony2

Définir des groupes d'assets avec Assetic sous Symfony2
par Rémi Leclerc, le 30/01/2015

Afin de rendre la configuration d'Assetic plus propre, elle peut être écrite dans un fichier à part appelé par la configuration générale. Le début du fichier de configuration "app/config/config.yml" ressemblerait donc à :

imports:
    # ...
    - { resource: assetic.yml }

# ...

Notre fichier "app/config/assetic.yml" ressemblerait à :

assetic:
    debug: "%kernel.debug%"
    use_controller: false
    # Bundles utilisant Assetic
    bundles:
        - AcmePremierBundle
        - AcmeSecondBundle
        # Etc
    filters:
        cssrewrite: ~
        yui_css:
            jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.8.jar"
        yui_js:
            jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.8.jar"
    assets:
        bootstrap_3_css:
            inputs:
                - "%kernel.root_dir%/Resources/bower/bootstrap/dist/css/bootstrap.min.css"
                - "%kernel.root_dir%/Resources/bower/bootstrap/dist/css/bootstrap-theme.css"
            filters: [yui_css]
        bootstrap_3_js:
            inputs:
                - "%kernel.root_dir%/Resources/bower/bootstrap/dist/js/bootstrap.min.js"
                - "%kernel.root_dir%/Resources/bower/bootstrap-modal/js/bootstrap-modalmanager.js"
            filters: [yui_js]
        acme_js:
            inputs:
                - "%kernel.root_dir%/Resources/librairies/Acme/js/malib1.js"
                - "%kernel.root_dir%/Resources/librairies/Acme/js/malib2.js"
            filters: [?yui_js]
        # Etc

Dans cet exemple, nous avons créé deux groupes d'assets pour Bootstrap3 :

  • Un groupe "bootstrap_3_css" comprenant les CSS de Boostrap,
  • Un groupe "bootstrap_3_js" comprenant son JavaScript nécessaire.

Nous utilisons "yui_css" et "yui_js" pour minifier le résultat.

Pour le groupe "acme_js" comprenant le JavaScript de notre application, nous ne minifions le résultat que pour l'environnement de prod (d'où le "?yui_js").

Nous utilison ensuite nos groupes dans nos vues comme ceci :

{% block stylesheets %}
    {% stylesheets output="compiled/acme.css"
        '@bootstrap_3_css'
    %}
        <link rel="stylesheet" href="{{ asset_url }}">
    {% endstylesheets %}
{% endblock %}
 
{% block javascripts %}
    {% javascripts output="compiled/acme.js"
        '@bootstrap_3_js'
        '@acme_js'
    %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}