HTML5 : Optimisation des flux de production

Employer Node pour compiler LESS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À l'instar de Sass, utilisez LESS directement en ligne de commande. Découvrez deux packages qui permettent de travailler quasiment en direct avec la console.
04:52

Transcription

À l’instar de sass, il est possible de pouvoir utiliser une librairie less, en fait un package less sous node directement. Alors attention, on ne parle pas ni d’utiliser gulp ni grunt mais directement less au sein de node. Alors pour cela, il y a simplement une petite ligne d’installation ici à copier, de se rendre dans la ligne de commande, de pointer vers le dossier ad hoc et puis de ne pas oublier de faire un save dev pour mettre à jour le fichier de dépendance. Attention cependant quand même, c’est que ici un package.json est présent. Donc on peut directement attaquer le install less avec un save dev. Si vous n’avez pas le package.json, pensez par faire un npm init afin de le créer et de pouvoir ensuite enregistrer vos dépendances. Voilà, donc ici on peut lancer l’installation On va se rendre donc du côté de ce fichier package.json où on s’aperçoit que ça y est, il a été mis à jour et il récupère donc ce package less ici. Au niveau des fichiers, on a un fichier html qui pointe vers un fichier css, et puis je vais en profiter pour copier la racine de ce numéro de fichier. Et puis on a deux fichiers less, comme à l’accoutumée, avec un qui pointe vers un second pour pouvoir récupérer la variable de couleur ici. Pour pouvoir générer maintenant le fichier css ad hoc, c’est très simple, il suffit de faire un lessc, copier la racine ici, -2 puisque c’est le nom de fichier .less, un fichier less qu’on va compiler, donc le chevron tourné vers la droite ici, vers le .css qui va être le fichier d’exploitation. Il suffit de le lancer, vous voyez que c’est très rapide, vous allez me dire, le fichier a trois lignes. Et donc ça a été généré ici. Si je regarde maintenant, j’ai bien mon fichier css qui a été fabriqué ici. Et donc on va pouvoir aller le vérifier directement depuis l’éditeur de code pour voir qu’il a bien été compilé avec à la fois les variables de couleur qui ont été apportées. Donc à chaque fois qu’on aura besoin de compiler, on n'aura plus qu’à jouer sur ce jeu d’instruction. On peut assouplir un petit peu le système en se rendant cette fois-ci sur une autre extension, un autre package qui est le less-watch-compile Alors celui là il est mis assez régulièrement à jour, il est assez suivi. Donc vous allez simplement récupérer un install, voilà ici, je vais récupérer cette partie-là, copier, et puis on va lancer également donc cet élément en prenant soin également de faire un save dev ici pour récupérer cette dépendance, voilà. On n'a plus qu’à le lancer. Et puis au niveau de l’instruction à lancer, maintenant, on a plusieurs paramètres qui vont nous permettre donc de pouvoir vérifier ici l’affinage qu’on va avoir besoin. Alors le seul qui va être utile, c’est le fameux -o ici, -outputDir, qui doit être défini afin de pouvoir préciser sur quel périmètre on va enregistrer notre fichier Alors ce que je vous propose de faire, c’est de créer un deuxième dossier, ici on va faire un -o. Et donc ici on va récupérer toute cette partie-là qui nous intéresse et vous voyez bien qu'au niveau de l’instruction, on ne part plus au niveau de less ici, ou de npm, mais on part bien de node. Et on dit à node, on va chercher dans node_modules/less-watch-compile, on va chercher cette extension, pour pouvoir la lancer et ici maintenant, nous allons créer un dossier de sortie. Donc on va créer un nouveau dossier que je vais appeler output. Voilà, directement ici. Et ce que je vais demander, c’est de sortir ce dossier-là dans output directement. Et là, quand on valide cette instruction-là, on part sur un watching directement qui fait que, je vais basculer volontairement directement dans un éditeur de code, ici on a bien le output, vous voyez, qui est vide ici, et puis dès lors que je vais faire une modification, où en enregistrer sur cet élément-là, on va pouvoir générer le output directement Alors ici je suis dans le css, ce n’est pas terrible, c’est plutôt au niveau du less qu'il va me falloir agir ici. Je fais un enregistrer, et vous voyez qu’instantanément le fichier est généré. Alors le petit souci qu’on a, c’est qu’on va générer même les partials. Donc si je vais ouvrir ce fichier-là et que j’enregistre ce fichier-là, on va également le générer. Donc on n'a pas vraiment une véritable compilation qui va pouvoir s’exécuter si j’ai fait une modification ici sur celui-là, mais c’est une extension qui est en cours de développement. Pour cela il suffit de se rendre sur la partie du site et vous voyez que actuellement le Todos, ils disent : je vais voir comment on peut initier le fichier less pour le travail des imports justement, qu’on est en train de travailler. Donc là, à ce moment là, le beaucoup plus simple c’est de retrouver sur le github, et puis au niveau du github de ce développement ici, de pouvoir venir suivre le développement, de pouvoir éventuellement poser des questions, d’interagir avec le groupe, pour pouvoir faire évoluer ce système. Mais bon, on va voir dans d’autres animations qu’il existe d’autres possibilités de compiler less, et celle-ci en est une qui nous permet simplement de ne pas utiliser ni gulp ni grunt pour pouvoir travailler sous node.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 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 !