Less : les compilateurs server-side en fonction des langages

[ 1 ] Commentaire
Share

J’ai eu à trouver un compilateur LESS server-side qui ne devait pas fonctionner sur Node.Js ou Java, et c’est la raison pour laquelle je me suis penché sur la recherche de compilateur LESS en fonction des différents langages. Avant toute chose, je pense que la meilleure des chose est d’employer la solution via server node.js + compilateur original (c’est la façon, je pense d’avoir le plus grand support de fonctionnalités). Mais tout le monde ne peut pas forcément installer un server node.js et le maintenir, d’où l’utilité de faire quelque fois autrement.

Voilà la liste de ce que j’ai pu rassembler.

Les compilateurs server-side AVEC interface graphique

  • WinLess for Windows
  • CodeKit for Mac
  • I use SimpLESS (pour Windows et Mac) : pratique car embarque le drag and drop.

Les compilateurs server-side SANS interface graphique

  • Si vous utilisez Node.js, alors le compilateur d’origine lesscss devrait faire l’affaire.
  • Avec Ruby, on peut installer un compilateur Less qui n’a pas besoin de Node.js, et qui fonctionne comme un gems.
  • Avec PHP, on peut utiliser lessphp. C’est pas le meilleur des compilateur (notamment en terme de passage de variables), mais il fait le boulot.
  • En ASP.Net, il y a .less.
  • Pour Java, lesscss4j compile les fichiers grâce au compilateur d’origine + l’environnement Rhino inclut dans Java6.
  • Pour ceux qui utilisent Perl, il y a le module LESSp dans CPAN. Problème, il n’intègre pas les imports.

Lessc : le compilateur intégré aux sources

Comme dit plus haut, LESS est fournit avec un compilateur en binaire (lessc) qui vous permet de précompiler vos fichiers .less en ligne de commande. Il s’utilise comme suit :

 $ lessc styles.less > styles.css 

Mais il est probable que la majorité des gens utilisent la commande  lessc -w ou lessc --watch afin de recompiler les fichier CSS automatiquement dès que le fichier LESS est modifié. Le compilateur permet également de minifier ses css, comme ceci : lessc -w -x.

Attention : Le compilateur lessc se trouve habiltuellement dans le code ramené avec toute l’installation de LESS (que l’on récupère via le package manager de node.js). Mais on peut aussi le télécharger manuellement depuis GitHub.

lessc est mis dans le dossier /bin/lessc. C’est un binaire Linux/Unix (donc il devrait aussi fonctionner sur Mac), mais il y a aussi un binaire Windows (lessc.exe) basé sur  dotless, qui est un autre compilateur LESS pour Windows.

Source

Et si on n’a pas les droits d’installation sur la machine ?

C’est mon cas : je n’ai pas les droits pour installer le serveur Node.js, qui est requis pour pouvoir utiliser en mode server le compilateur lessc. Donc il me faut un compilateur standalone.

Voilà comment exécuter Node.js + lessc en standalone pour compiler un fichier .less.

D’abord, installez Node.js en standalone sur votre machine :

mkdir nodejs
cd nodejs
wget http://nodejs.org/dist/v0.8.5/node-v0.8.5.tar.gz
tar xzf node-v0.8.5.tar.gz
cd node-v0.8.5
./configure
make

Puis, exécutez le compilateur :

path/to/node chemin/vers/lessc -x -O2 chemin/vers/fichier.less > chemin/vers/output.css 
  • -x : compress
  • -O2 : mode d’optimisation

NB : J’ai eu l’erreur suivante lors du make :


make -C out BUILDTYPE=Release V=1
make[1]: Entering directory `nodejs/node-v0.8.5/out'
make[1]: *** No rule to make target `nodejs/node-v0.8.5/out/Release/obj.target/v8_base/gen/debug-support.o', needed by `nodejs/node-v0.8.5/out/Release/obj.target/deps/v8/tools/gyp/libv8_base.a'.  Stop.
make[1]: Leaving directory `nodejs/node-v0.8.5/out'
make: *** [node] Error 2

Il s'avère que j'ai eu cette erreur parce que ma machine était en x64 et que j'avais une version de gcc trop vieille pour que le make fonctionne (cf ce groupe Google pour essayer de régler votre problème si vous l'avez). Du coup j'ai switché sur la version 0.6.19 de Node.js qui utilise un autre mode de make.

Un commentaire sur ce billet

  1. syndrael dit :

    Bon article..
    De mon côté j’ai laissé tombé WinLess au bout de deux heures de tests..
    J’ai opté pour lessPHP pour faire de la compilation à la volée lors du 1er appel de mes fichiers LESS. Sous WordPress ça marche plutot bien.. il me reste plus qu’à faire une fonction de nettoyage car les CSS obsolètes.. j’accumule un peu.. LOL !!
    Je regrette juste l’emploi de e() au lieu de ~().. Il a fallu que je retouche mon Twitter Bootstrap pour le rendre compatible.
    Je trouverai un peu de temps pour SASS, mais la version Javascript de Less m’a séduit dès le début.
    S.

    RépondreRépondre

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>