HTML5 : Optimisation des flux de production

Combiner Gulp et LESS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il est possible de compiler vos fichiers LESS à partir une tâche gérée par un automatiseur. Initiez-vous d'abord à l'environnement de Gulp et étudiez sa mise en place. Par la suite, selon vos besoins, complétez-la avec d'autres modules.
05:08

Transcription

Il est possible d’employer donc maintenant un automatiseur comme gulp par exemple pour compiler sous less. Alors cette fois ci, on ne va pas chercher less sur npm mais gulp-less. Alors ici pareil, c’est un package qui est travaillé de manière assez régulière puisqu’on voit que là il a été mis à jour il y a trois semaines. Il est énormément téléchargé, il a été chargé 27 000 fois hier, on voit que 613 000 fois depuis le début du mois. Donc c’est quelque chose qui est assez maintenue. Rapprochez-vous du github également pour pouvoir être proche de ses divers collaborateurs qui travaillent, et puis éventuellement voir s'il y a des améliorations à apporter, ou ce qui est apporté comme amélioration demandée par les autres contributeurs. Alors pour l'installer, une seule ligne, install gulp-less, mais attention, puisqu’il travaille sous gulp, ça veut dire qu’il va falloir travailler à la fois avec gulp. Alors ici je vous invite à travailler depuis le dossier numéro 7, chapitre 4. Vous avez un dossier css qui va contenir le fichier source de sortie, les sources qui sont constituées d'un document less qui importe un document imports ici placé dans une autre arborescence, et puis le fichier gulpfile et package.json qui contiennent les fichiers à travailler. Alors si on regarde du côté du package.json, il a déjà été installé puisqu’il y a le gulp qui est présent et le gulp-less, simplement ce que vous faites c’est : si vous avez ce fichier-là, vous retournez dans la ligne de commande, vous placez le pointeur sur le dossier ad hoc, et vous faites simplement un npm install et là, automatiquement le node package manager va aller chercher tous les packages qui sont présents, en fonction de ces dépendances. Voilà, vous pouvez laisser le processus se mettre en place. Ce qu’on va faire maintenant c’est retourner du côté du gulpfile et fabriquer ce gulpfile, nous, à la volée. Bien entendu, je le re-répète, aussi encore pour cette fois-ci, si vous n'avez pas le package.json, vous faites un npm init vous partez sur npm install gulp save dev et npm install gulp less save dev pareil pour pouvoir en arriver au même niveau. Première chose, on va créer une variable gulp, pour demander un pointage vers le fichier require gulp tout court. Donc ici on va pouvoir pointer vers ce fichier, on va créer une variable less maintenant, encore une fois, les variables, vous les appeler comme vous le souhaitez, il n'y a aucun souci sur ce nommage-là. Mais plus vous garderez des noms proches de la réalité, plus ça sera souple à maintenir quand vous aurez beaucoup de packages sur un même fichier gulpfile, pour pouvoir s’y retrouver. Voilà, donc maintenant, on va interroger le pointeur gulp, c’est le pointeur de cette variable qu’on vient de créer ici, pour l’instant. Et on va lui placer une tâche, en lui donnant un nom complètement arbitraire, ici, je vais dire compileless pour lui demander donc de compiler notre fichier à la demande. Et là-dessus on va appeler un fonction anonyme directement à l’intérieur de ce fichier ici. Voilà, je vais juste venir rajouter un « ; » qui n’a pas été mis, pour mieux terminer ma fonction. Ce qu’on va demander, c’est de faire un retour pour lui dire : Voilà, quand tu auras terminé ce qu’on te demande, tu nous renvoies, et là on va passer sur le pointeur gulp. On va lui dire : tu vas prendre comme fichier source de travail, les fichiers qui se situent dans la source. Alors ici, on est bien dans la source, c’est bien dans ce dossier ici, donc on va lui dire : par rapport à la racine où je suis, tu prends dans le dossier sources, et tu prendras tous les fichiers que tu verras sous forme de less. Vous inquiétez pas, s'il y a des imports, c’est fait exprès, on voit bien que l’import, il va venir dans un dossier qui n’est pas surveillé, mais qui va permettre quand même, par l’import, de venir le chercher. On va s’en apercevoir quand on va compiler. Ici ce qu’on va faire c’est : on va placer une tuyauterie, on va faire un pipe, et ce pipe, on va indiquer de résoudre la fonction less directement ici. Et puis une fois que tu auras lessifié on va dire donc, transformé ces fichiers less, tu me placeras les résultats, pipe, on va replacer un pipe ici, et cette fois-ci, on va appeler le gulp.dest ici et on va lui dire : tu nous les placeras dans le dossier de sortie qu’on appelait css ici, .css tout court. Alors ./css, dans ce dossier-là, tu me les places. Voilà, donc là ça sera terminé, l’instruction a appelé ses compileless, je vais venir la copier ici, CONTRÔLE-C, CONTRÔLE-S pour le gulpfile, et on voit qu’entre-temps le node_modules a bien été installé. On a bien gulp et gulp-less qui se sont installés là-dedans. On peut retourner dans la console ici, directement. Donc on voit que tout a été installé, on va nettoyer tout ça pour l’instant et donc on va demander à gulp de nous faire un compileless ici, tout simplement, et là, le compile se fait, vous voyez, le starting a été fait, il a été fini, après il y a rien à appeler, donc il nous rend la main. Et si je regarde maintenant du côté de la compilation ici, on s’aperçoit qu’on a bien notre fichier css qui a été compilé. Donc on peut regarder à ce niveau-là, on voit bien que la couleur est une variable qui est récupérée dans le fichier d’import, et si je vais dans le css, on voit bien que la couleur a été récupérée. Voilà donc, très facile de pouvoir inclure une compilation less dans un automatiseur de tâches de type gulp, et donc bien sûr, de l’associer avec d’autres paramètres pour pouvoir faire un watch que l’on peut voir par la suite de cette formation.

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
Votre/vos formateur(s) :
Date de parution :26 déc. 2016
Durée :5h29 (62 vidéos)

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 !