Chargement...

Comprendre et installer Assetic de Symfony


Assetic

Assetic permet de traiter les fichiers avant des les présenter à l'utilisateur. Cela permet notamment de minimifier/combiner CSS et JS, optimiser les images, etc.

{% stylesheets 
    '@ENGELAwesomeBundle/Resources/public/css/bootstrap.min.css' 
    '@ENGELAwesomeBundle/Resources/public/css/*' 
    '@ENGELAwesomeBundle/Resources/public/css/global.css' 
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

{% javascripts
    '@ENGELAwesomeBundle/Resources/public/js/jquery.js'
    '@ENGELAwesomeBundle/Resources/public/js/*'
    '@ENGELAwesomeBundle/Resources/public/js/global.js'
    %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

Il vous faudra ensuite indiquer à Symfony que assetic s'intéresse à votre Bundle

# app/config/config.yml
assetic:
    bundles:        [ENGELAwesomeBundle]

Exécutez la commande suivante:

php app/console assets:install

Vous remarquerez que si vous rechargez votre page, Symfony a copié le contenu de vos sources dans un autre emplacement et appelle celui-ci et non directement la source.

Alternative à Assetic

Assetic est un outil sympa. Mais il en existe d'autres encore plus efficaces comme Grunt

qui vous permet de faire la même chose que Assetic de manière plus rapide avec plus d'options. N'hésitez pas à jeter un oeil sur le lien indiqué.


UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW