Utiliser YUI Compressor avec Assetic de Symfony 2

Dans la même idée que l’article pour convertir des CSS en LESS avec le bundle Assetic de Symfony2, voyons comment compresser (minifier/minify) des fichiers JS ou CSS grâce à la lib YUI Compressor de Yahoo.

Installation de YUI Compressor

Avant toute chose, si vous n’avez pas Java et que vous êtes sous Debian (ou Ubuntu) il faut également l’installer :

aptitude install openjdk-6-jre

La manière conseillée en général pour installer YUI Compressor pour Symfony est d’utiliser le fichier JAR (archive java) fournit par Yahoo. Téléchargez l’archive en question à l’adresse suivante : http://yuilibrary.com/download/yuicompressor/

Dans le dossier “build” de l’archive ZIP que vous avez téléchargé se trouve le fichier de l’archive java “yuicompressor-2.4.7.jar” (2.4.7 variant en fonction de la version que vous aurez téléchargée évidement). Placez ce fichier dans “app/Resources/java” (le dossier java n’existe pas par défaut).

Configuration de YUI Compressor dans Symfony 2

Ensuite, ouvrez “app/config/config.yml” et configurez les deux nouveaux filtres (un pour le css et un pour le js) assetic de la manière suivante :

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        yui_css:
            jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"
        yui_js:
            jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"

Utilisation dans les templates Twig

Pour finir, il ne vous reste plus qu’à utiliser le filtre dans vos templates twig :

{% stylesheets
    '../app/Resources/css/theme.css'
    filter='yui_css'
%}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}

 

{% javascripts
    '../app/Resources/js/main.js'
    filter='yui_js'
%}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Si vous voulez combiner LESS et le YUI Compressor :

{% stylesheets
    '../app/Resources/less/theme.less'
    filter='less,yui_css'
    output='css/theme.css'
%}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}

Pour qu’un filtre ne s’applique pas dans l’environnement “dev“, il vous suffit d’ajouter un point d’interrogation devant, exemple : filter=’less,?yui_css’, et votre LESS sera converti en CSS mais pas minifié lorsque vous serez en dev.

Et comme d’habitude avec Assetic, pour mettre en prod les fichiers, tapez la commande :

php app/console assetic:dump

En cas de problème, pensez à vider le cache, ça règle souvent certaines erreurs lorsque l’ont vient de modifier la gestion des assets.

Versions utilisées : 2.0, 2.1, 2.2, 2.3