Compilation de fichiers LESS à la volée

Sur un projet avec le thème Bootstrap, nous utilisons less pour simplifier la création des fichiers css.

S'il est possible de compiler manuellement les fichiers avec la commande lessc, il est plus productif de compiler ces fichiers automatiquement dès qu'un changement est intervenu.

Il faut noter que node.js est un pré-requis à l'installation de lessc

Installer node.js

Plusieurs options sont possibles :

  1. via apt-get : on récupère une version assez ancienne
  2. via des PPA sur Debian ou Ubuntu
  3. via les binaires
  4. via les sources

Pour disposer de la dernière version, il vaut mieux partir sur les options 3 ou 4, sachant que l'option 4 est de loin la plus rapide...

Il faut auparavant avoir installé python.

Par apt-get

Sur certaines distributions, il est possible d'installer nodejs directement via les paquets du système.

sudo apt-get install nodejs npm

Ceci récupère une version assez ancienne (sur une ubuntu 12.10, il s'agit de la version 0.6.19, alors que la dernière version est 0.10.28).

Via un PPA spécifique

Cette méthode permet d'utiliser les fonctionnalités de mises à jour. Il faut déclarer 2 PPA : l'un pour node.js, l'autre pour npm.

sudo apt-get install python-software-properties software-properties-common
sudo add-apt-repository ppa:chris-lea/node.js
sudo add-apt-repository ppa:gias-kay-lee/npm
sudo apt-get update
sudo apt-get install nodejs npm

Via les binaires

On peut également récupérer les binaires directement sur le site nodejs.org :

cd /tmp
wget http://nodejs.org/dist/latest/node-v0.10.28-linux-x64.tar.gz
cd /usr/local
tar --strip-components 1 -zxf /tmp/node-v0.10.28-linux-x64.tar.gz

La dernière version contient npm

node -v
v0.10.28
npm -v
1.4.9

Via les sources et une compilation

On récupère les sources via git, après avoir installé les composants pré-requis :

apt-get install git python gcc make
apt-get install build-essential openssl libssl-dev pkg-config
git clone --depth=1 https://github.com/joyent/node.git
cd node
git tag
git checkout (last version)
./configure
make
sudo make install

Les dernières versions de node.js embarquent également npm.
Note : l'option depth=1 permet d'éviter de récupérer l'ensemble de l'arborescence git.

Installer less

npm install less --global

L'option --global permet d'installer less au niveau global sur le serveur (dans /usr/local/bin) plutôt que dans le répertoire courant.

Installer le programme de "Watch Compiler"

Récupérer le zip sur github
https://github.com/jonycheung/Dead-Simple-LESS-Watch-Compiler

cd /opt
wget https://github.com/jonycheung/Dead-Simple-LESS-Watch-Compiler/archive/master.zip
unzip master.zip
mv Dead-Simple-LESS-Watch-Compiler-master less_watch_compiler

ou via git :

cd /opt
git clone https://github.com/jonycheung/Dead-Simple-LESS-Watch-Compiler.git
mv Dead-Simple-LESS-Watch-Compiler-master less_watch_compiler

Mettre en place la surveillance d'un répertoire

En admettant que les fichiers LESS à surveiller sont dans le répertoire /var/www/drupal/sites/all/themes/bootstrap_custom/ :

cd /var/www/drupal/sites/all/themes/bootstrap_custom/
nohup node /opt/less_watch_compiler/less-watch-compiler.js less css > ./less.compile 2>&1  &

La commande nohup permet de quitter la connexion de la console sans arrêter le traitement.

Catégorie: 

Tag: