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

2 réflexions au sujet de « Utiliser YUI Compressor avec Assetic de Symfony 2 »

  1. Mooty

    Bonjour,

    Une question si quelqu’un traine par la :
    Une fois installé tout ce qui est décrit ci-dessus, comment faire pour fusionner les JS ? L’idée n’étant d’avoir qu’une requête sur le prod pour l’ensemble des JS.
    Ça serait très bien niveau réponse du serveur sur le front.

    Je n’arrive pas à trouver cette info :/

  2. Easytek Auteur de l’article

    Il suffit de lister les fichiers JS :

    {% javascripts
    ‘path/js/main.js’
    ‘path/js/autrescript.js’
    ‘path/js/encoreunautrescript.js’
    filter=’yui_js’
    output=’js/all.js’
    %}
    etc..

    Ou de faire ‘path/js/*.js’ pour sélectionner tous les js d’un dossier.

Les commentaires sont fermés.