Tutos & Astuces

Symfony2 et Assetic, comment intégrer less et yui compressor sur Ubuntu linux

M’étant moi même battu pour installer proprement ce systeme, je tiens a partager avec vous ma démarche a suivre pour installer et intégrer Less à vos projets Symfony2 avec YUI...

M’étant moi même battu pour installer proprement ce systeme, je tiens a partager avec vous ma démarche a suivre pour installer et intégrer Less à vos projets Symfony2 avec YUI compressor.

Je ne vais pas m’attarder sur l’explication du fonctionnement d’Assetic, ceci est déjà très bien fait sur la page officielle, je vous conseille fortement d’aller y faire un tour ! 😉

Installation de less sur Ubuntu

Pour utiliser Less sur Symfony2, nous allons procéder a une installation de type server-side.
Pour le faire, nous avons tout d’abord besoin de nodejs et npm :

apt-get install nodejs
apt-get install npm

Pour les autres distributions Linux ne possèdant pas le paquet nodejs et npm, je vous invite à suivre les instructions sur les sites de nodejs et npm.

Ensuite il ne reste plus qu’à installer less avec cette simple commande :

cd /usr/local/lib
sudo npm install -g less

Configuration de Symfony

Avant de configurer votre projet pour less, nous devons savoir où est le binaire node :

which node # Vous affichera par exemple : /usr/bin/node 

Le dossier node_modules devrait se trouver où nous l’avons installé, c’est à dire dans /usr/local/lib, si vous souhaitez chercher après :

locate -b "\node_modules" # Repérez celui contenant le dossier less

Nous allons maintenant déclarer deux variables dans notre parameters.yml ( ou .ini par default pour Symfony2.0) :

parameters:
    node_bin: /usr/bin/node # Le chemin du binaire node
    node_modules: /usr/local/lib/node_modules # le path ou se trouve le dossier less

Et ensuite, importer les variables dans le fichier config.yml :

imports:
    - { resource: parameters.yml }

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [VotreBundle]
    filters:
        less: # Nous importons ici nos variables
            node: %node_bin%
            node_paths: [%node_modules%]
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor.jar
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor.jar

Je ne m’attarde pas sur la configuration de yui_css, ceci est déjà expliqué par ici.

Mais pourquoi diable créer des variables dans parameters.yml ? On peut très bien les mettres directement dans le fichier de config !

En effet ! 😀 Mais imaginez une seconde que vous travaillez en projet avec un ami qui travail par exemple sur un mac ? Il n’aura pas forcement le même chemin d’accès pour node et node_modules ! Avec cette méthode, chacun pourra configurer less comme il faut ! 😉

D’ailleurs en passant, pour nos amis travaillant sur mac, je vous conseille de lire un très bon article similaire au mien mais plus spécialisé dans le domaine de la pomme sur funstaff.ch.

Importation avec twig

Et c’est parti pour la déco ! \o/
Je vous laisse créer le fichier less de votre choix, dans cet article nous l’appellerons main.less

Pour importer votre code less afin qu’il soit automatiquement compilé en css, il suffit d’ajouter ce bout de code dans votre fichier twig :

{# app/Resources/base.html.twig #}
{% stylesheets
    filter='less,?yui_css'
    output='css/compiled/main.css'
    '@VotreBundle/Resources/less/main.less'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}

Si vous navigez en environement de dev, Assetic vérifiera les modifications et recompilera le css automatiquement dès que nécessaire.

En mode production, il vous faudra utiliser la commande suivante pour compiler votre fichier css :

php app/console assetic:dump --env=prod

Sachez qu’il existe tout de même un petit bug, si vous modifiez des fichiers less importés à partir d’un autre fichier (@import), les changements ne seront pas détectés au chargement de la page de dev. Vous serez donc contraint de vider le cache et de forcer la compilation, si ce bug est résolu dans les prochaines versions, faites moi signe ! 😉

A vos pinceaux !

Voila, vous avez toutes les clés en mains pour profiter de la puissance de less sur Symfony2, il ne manque plus que l’esprit créatif de vos petites têtes blondes ! 😛

Une question ? Une coquille dans l’article ? N’hesitez-pas à m’en faire part ! 😉

Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0
  • Michel

    Hi !
    I have that same error (Error: Cannot find module ‘less’) and I can’t get rid of it.

    I’ve done the exact same thing you describe here. The only difference I can find is that I work on Windows and that my path is C:/Program Files/nodejs.

    I first thought that my problem came from the “space” on this path but whatever I try I still get that “Error: Cannot find module ‘less’”

    Any idea ? Plz plz plz ?

    • Soullivaneuh

      Hi !

      I never tested that on Windows.
      How did you did that ? With a linux shell ? Other way ?

      If you use an another installation guide of less for windows, can you give me the link, maybe can I help you after… 😉

      • LackOfAName

        Hi,

        I know i’m coming a bit late, but i found a way to do that on Windows.

        In your parameters.yml :
        node_bin: ‘C:\Program Files\nodejs\node.exe’
        node_modules: ‘C:\Users\\AppData\Roaming\npm\node_modules’

        In fact, you just have to escape the backslashes, and find your LESS path using the ‘where’ command :
        > where lessc
        C:UsersAppDataRoamingnpmlessc

        Please note that LESS is not in the Program Files directory while NodeJS is.