Découvrir LESS

Précompiler avec la ligne de commande

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous pouvez utiliser la ligne de commande pour compiler vos fichiers LESS. Au préalable, vous devez installer la ligne de commande en question.

Transcription

Afin de précompiler nos fichier LESS avec la dernière version disponible de LESS, eh bien, nous allons télécharger sur notre système la dernière version du fichier less.js qui est donc le fichier qui va nous permettre de réaliser cette compilation. Il s’agit à l'heure actuelle, de la version 2.7.1, vous le voyez ici au-dessus. Alors, si je vais cliquer sur le lien Using Less, qui se trouve ici, dans la colonne de gauche de ce site, eh bien, je vais voir ici que la manière la plus facile d’installer LESS sur mon ordinateur c’est via npm. Npm, c’est le Node Package Manager, et donc c’est un système qui nous vient, vous le voyez juste ici, à côté de node.js. Alors node.js, c’est, sans rentrer dans les détails, un système qui vous permet d’exécuter du JavaScript en dehors du contexte de votre navigateur, donc en dehors d'une page web, et donc d’exécuter ce code JavaScript directement donc, au niveau de votre système d’exploitation. Alors pour que cela fonctionne, vous devrez au préalable installer node.js. Donc, si ce n’est pas déjà fait, sur votre système, rendez-vous sur le site nodejs.org. Vous allez télécharger donc, le paquet d’installation, ici de node.js. Alors, ça existe pour Mac, pour Windows, et pour pratiquement toutes les versions de Linux, donc quel que soit le système que vous utilisez, vous trouverez très certainement, un paquet d’installation pour node.js, et puis, une fois que ce sera installé, moi, je l'ai déjà installé sur mon système, donc je vais me rendre ici, sur Mac, au niveau de mon terminal, si vous êtes sur Linux, vous vous rendrez également dans le terminal, et puis, si vous êtes sur Windows, eh bien, vous allez vous rendre au niveau de l’invite de commande, et je vous invite sur Windows, à faire un clic-droit sur cette invite de commande, et à l’exécuter en tant qu’administrateur, puisque dans quelques instants, vous aurez besoin des privilèges d’administration pour installer LESS. Donc, maintenant que node.js est installé sur mon ordinateur, je peux utiliser npm, ce Node Package Manager, pour installer quelque chose. J’ai envie d’installer ce quelque chose de manière globale. Donc je vais passer l’option -g comme ceci. si vous ne passez pas cette option, vous allez installer LESS, mais uniquement pour l’utilisateur actuellement connecté. Donc moi, ça ne m’intéresse pas, j’ai envie de l’installer sur tout mon système, donc je vais installer le paquet qui s’appele less. Alors sur Linux et sur Mac, vous devez préfixer cette commande, du mot-clé sudo, qui signifie superuser do, puisque vous aurez besoin des privilèges d’administration pour installer ceci. Sur Windows, vous n’avez pas besoin de taper sudo devant de votre commande puisque vous avez déjà utilisé votre invite de commande, en tant qu’administrateur, vous avez donc déjà les privilèges requis. Alors je vais lancer la commande. Voilà. Et LESS donc, se télécharge et s’installe sur votre ordinateur. Il est possible que vous deviez d’ailleurs taper avant que ça ne s’installe, votre mot de passe d'administrateur pour que ceci fonctionne. Moi je l’avais déjà testé juste un petit peu auparavant donc je ne dois plus retaper mon mot de passe. Alors voilà, LESS est maintenant installé sur ma machine. Pour vérifier que ça s’est bien passé et que c’est bien installé convenablement, eh bien je vais lancer la commande lessc pour LESS compiler avec l’option -v, « v » pour version, et vous voyez que j’ai bien installé less 2.7.1 et que je viens d’exécuter directement dans mon terminal ici, sur mon Mac ou dans mon invite de commande sur Windows, du JavaScript, en dehors donc d’un navigateur ou d’une page web, c’est ça la magie de node.js. Alors, maintenant que lesscss est correctement installé sur mon ordinateur, je vais pouvoir l’utiliser pour compiler du code LESS. Donc pour ça, je vais revenir ici au niveau du site lesscss.org pour vous montrer le Command-line Usage, donc comment utiliser cette ligne de commande. Alors, vous voyez que c’est très très simple. Je dois simplement taper la commande lessc pour les less compiler et puis lui dire quel fichier less je veux compiler. Donc, avant de faire ça, je vais faire un rapide petit détour par mon éditeur de code, par Brackets, pour vous montrer que je suis revenu à la situation initiale. Donc, j’ai supprimé le fichier styles.css que j’avais généré dans la vidéo précédente. Et j’ai également supprimé ici la balise link que j'avais tapée dans la vidéo précédente. Alors allons-y, je vais me rendre au niveau de mon terminal. Alors, je suis pour le moment dans le dossier less de mon projet. D’ailleurs si je tape la commande ls ici sur Mac ou sur Linux, c’est la commande dir sur Windows, eh bien, je vais avoir la liste des fichiers qui se trouvent dans le dossier dans lequel je me trouve et je suis, vous le voyez, dans le dossier less et j’ai donc ici, tous les fichiers less de mon projet qui sont disponibles. Donc je vais taper la commande lessc, et j’ai envie de compiler eh bien les fichiers styles.less. Allons-y ! Eh bien, vous voyez que ça fonctionne puisque ce fichier a bel et bien été compilé, vous voyez ici le résultat de cette compilation qui apparait dans mon terminal. Alors, si je vais voir au niveau de mon éditeur de code, vous voyez que rien n'a changé, je n’ai pas de fichier styles.css qui était généré. Effectivement, si j’utilise la commande de cette manière-là, eh bien, je vais compiler le code mais dans le terminal ou dans l’invite de commande. Alors, si je veux rediriger cette compilation dans un fichier, eh bien, je vais devoir donc réutiliser ma commande lessc, je veux toujours compiler styles.less mais je vais devoir rajouter un argument supplémentaire à cette commande, je vais lui dire : « eh bien, stocke-moi le résultat de cette compilation dans le dossier css de mon site, et appelle-ça styles.css comme ceci. Je lance la commande, vous voyez que plus rien ne revient ici dans le terminal parce que maintenant, eh bien regardez, j’ai généré un fichier styles.css ici. Vous voyez donc le résultat ici, de cette compilation par la ligne de commande. Une autre option intéressante va me permettre de compiler ce code mais en le minifiant. Cela dit, pour pouvoir le minifier, je vais devoir installer un plug-in pour lesscss. Donc allons-y, je vais taper donc sudo, si vous êtes sur Windows, vous n’avez pas besoin de taper sudo puisque vous êtes en administrateur déjà, je vais demander à node package manager d’installer quelque chose de manière globale. Et ce que je veux installer ça s’appelle : less-plugin-clean-css, c’est le plugin qui va me permettre de minifier mon code css. Donc voilà, je vais l’installer, on télécharge, on l’installe. Et donc maintenant, je vais lancer la commande lessc avec l’option --clean-css, comme ceci, remarquez qu’il faut deux « - » ici, devant cette option, donc --clean-css, et j’ai envie de compiler le fichier styles.less, et de le compiler dans mon dossier css, dans un fichier que je vais appeler styles.css, comme ceci. Et donc, quand je reviens maintenant au niveau de mon éditeur de code et de styles.css, eh bien vous voyez que mon fichier a bel et bien été compilé et minifié par la ligne de commande. Voici donc, comment installer node.js, comment installer less.css et le plugin-clean-css via Node Package Manager, et puis comment utiliser donc la ligne de commande pour précompiler vos fichiers less sur votre ordinateur.

Découvrir LESS

Étendez le langage CSS avec LESS. Exploitez les fonctions d'automatisation, comme les variables, les fonctions, et la possibilité d'écrire du code de manière imbriquée.

2h59 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :21 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !