Installer LESS CSS avec Grunt

Bootstrap est conçu sur une base LESS CSS permettant de rendre les feuilles de styles dynamiques. Pour commencer à utiliser LESS CSS, le framework propose de multiples façons de l’installer. Découvrons dès à présent comment installer LESS CSS avec Grunt.

Après avoir téléchargé le dossier « source » de Bootstrap destiné à l’utilisation de LESS CSS, le framework nous demande d’installer Node.js pour les différents modules indispensables au bon fonctionnement de Grunt et Bootstrap.

Installer Grunt

Ouvrez votre terminal, lancez la commande, puis pressez « entrer ».

Pour Macintosh :

sudo npm install -g grunt-cli

Pour Window :

npm install -g grunt-cli

Pointer vers le dist

À présent, nous devons définir la direction « root » vers le dossier « dist » de Bootstrap afin d’installer les packages npm « package.json« . Cela va permettre d’apporter les différents modules indispensables à Grunt pour compiler LESS CSS avec Bootstrap.

Voici ci-contre, l’organisation du dossier source de Bootstrap :

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/

À noter que le dossier source (précédemment téléchargé) est renommé « bootstrap ». Faisons de même.

Il ne nous reste plus qu’à rediriger en fonction de l’emplacement de votre dossier source et de sa dénomination. Pour faire le plus simple possible, je vous recommande chaudement de placer le dossier source renommé « bootstrap » sur le bureau de votre ordinateur.

cd Desktop/Bootstrap

Installer les npm

Nous venons de l’évoquer. Les npm regroupes l’intégralité des modules nécessaire au bon fonctionnement de LESS CSS avec Grunt et Bootstrap. Après avoir « rooté » vers le dossier « dist », nous pouvons lancer l’installation avec la commande ci-dessous.

Pour Macintosh :

sudo npm install

Pour Window :

npm install

Vous pouvez dès à présent utiliser LESS CSS pour Bootstrap avec Grunt.

Compiler le CSS

Lorsque vous souhaitez voir les modifications LESS apportées à vos fichiers, vous devez effectuer (à chaque fois!) la commande suivante permettant de compiler les fichiers LESS en un fichier bootstrap.css :

grunt dist

cd ~/Desktop/Bootstrap