Symfony2, Assetic, less et yui compressor: Installation sur Mac

Après un petit moment de silence, voici une petite publication concernant l’installation de LESS pour pouvoir l’utiliser avec Symfony2 et Assetic. Pour cela, nous allons utiliser MacPorts. Vous devez posséder les droits administrateur pour le faire.

L’utilisation de LESS demande une installation de Node.js ainsi que Node Package Manager.

sudo port install nodejs
sudo port install npm

Nous allons contrôler que nos 2 éléments ci-dessous soient bien installés.

$ node --version
v0.4.11
$ npm --version
1.0.26

Avec les deux commandes ci-dessous, vous avez maintenant la base. Il nous reste à installer LESS:

sudo npm install -g less

Vous avez la possibilité de voir les packages installés avec la commande suivante:

npm list -g

Il nous reste à installer YUI-Compressor. Vous pouvez télécharger la dernière version chez yahoo. Copier le fichier « yuicompressor-2.4.6.jar » du dossier build dans le dossier app/Resources/java.

Passons maintenant à la configuration d’assetic. Nous allons ajouter quelques lignes dans le fichier se trouvant dans app/config/config.yml:

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        less:
            node:       /opt/local/bin/node
            node_paths: [/opt/local/lib/node, /opt/local/lib/node_modules]
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar

Il nous reste à ajouter quelques lignes dans notre layout de base dans la partie head:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        {% stylesheets
            '@FunstaffCoreBundle/Resources/assets/less/foo.less'
             filter='less,?yui_css'
             output='css/foot.css'
             %}
            <link href="{{ asset_url }}" rel="stylesheet" media="screen" />
        {% endstylesheets %}
        ...
    </head>
    <body>
        ...
    </body>
</html>

Vous nouvelle configuration est prête à être utilisé.

Encore une dernière chose, si vous voulez générer votre css pour votre site en production, il suffit d’exécuter cette commande:

./app/console assetic:dump --no-debug

Voici les sources qui m’ont aidé à écrire cet article:

Share

5 réflexions au sujet de « Symfony2, Assetic, less et yui compressor: Installation sur Mac »

  1. J’ai créé un article similaire pour Ubuntu ici, je t’ai recommandé dessus pour les développeurs mac, ton article est super ! 🙂

    Petite question rien à voir, quel plugin wordpress utilises-tu pour SyntaxHighlighter ? Tu n’as pas des soucis de tags html qui disparaissent quand tu switch entre la vue visuel et html sur ton éditeur ?

    Bon dev ! 😉

  2. Ping : Symfony2 et Assetic, comment intégrer less et yui compressor sur Ubuntu linux | DevYourDreamDevYourDream

  3. SVP g besoin de la config avec windows :(( surtt la config du assetic plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz partie  less:
    08
                node:       /opt/local/bin/node
    09
                node_paths: [/opt/local/lib/node, /opt/local/lib/node_modules]
     

  4. Sachant que pour ceux qui l’ont installé avec homebrew, pour la configuration de less dans le fichier config, c’est plutôt comme ça: less:     node: /usr/local/bin/node     node_paths: [/usr/local/bin/node, /Users/%__user__%/node_modules]  Good job !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *