HTML5 : Optimisation des flux de production

Chaîner plusieurs tâches

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Chaînez plusieurs tâches afin de poursuivre l'optimisation de vos CSS. Vérifiez que la tâche précédente soit bien terminée avant d'entamer la suivante.
09:33

Transcription

Profitons de cette étape pour aborder deux points essentiels sur le chaînage dans gulp d’une part et d’autre part sur la continuation dans l’optimisation de nos css. Alors si ici je prends ce document html ici, on s’aperçoit qu’on a des classes, éléments, conteneurs, grilles qui font en référence à un fichier css que voilà, et ce fichier css, bien sûr reprend les descriptions pour ses règles, conteneurs, éléments, grilles, mais aussi des descriptions pour le class inutilisé dans notre document html dont aucune balise article ne fait référence ici, dans ce document html. Alors on voit qu’on va pouvoir nettoyer ces éléments, et pour cela, je vais faire appel à une catégorie de package ici, comme gulp-uncss qui permet, comme son nom l’indique ici, de retirer tous les sélecteurs css qui ne sont pas utilisés. Je vous invite à venir regarder les réglages fins, et les options directement dans la page npmjs. On ne s’attardera pas sur cet élément-là puisque ce qui nous importe c’est aussi le chaînage et puis de voir comment on peut optimiser. Gulp-selectors, qui lui va permettre de minifier les sélecteurs. Alors, si on regarde les class-name, another-class name, an-id, etc. on va pouvoir les remplacer par des nommages très courts : a,b,c, etc. Bien entendu, ça va être remplacé à la fois dans le css et dans le html. Et faites bien attention, si vous venez dans les réglages ici, fin dans le cas où vous les utilisiez par du jQuery pour faire des sélecteurs afin de ne pas casser ces références que vous allez utiliser. Enfin, un dernier élément qu’on va voir, un dernier package qui est le run-sequence, qui va nous permettre justement de rentrer dans des séquences de manière consécutive ou de manière parallèle. Alors consécutive, ici on voit bien qu'on va exécuter d’abord build-clean. Quand build-clean sera terminé on utilisera de manière parallèle build-scripts et build-styles, peu importe qui finira des deux, quoi qu’il en soit, runSequence attendra que les deux soit terminé avant d’aller exécuter build-html. Donc quand vous voulez faire du consécutif, vous séparez par des virgules, Quand vous voulez faire du parallèle, vous placez les éléments à l’intérieur d’un tableau JavaScript tout simplement. Ce qui est très important, c’est de faire appel de ce callback ici pour dire : attention, rend-moi au moins un callback. Alors on verra cela un détail pour mieux le capter. Alors revenons maintenant sur notre contexte ici, on se retrouve avec un document qui se retrouve dans un dossier 04_11, et vous avez un package.json, qui est global ici. Donc ne vous en privez pas, faites un npm install pour installer directement les dépendances et surtout les nodes_modules ici nécessaires. Une fois ceci réalisé, on va passer dans notre gulpfile maintenant pour pouvoir le fabriquer. On va regrouper les tâches en fonction des sources de travail. Première chose à faire, c’est : on va utiliser un require gulp pour lui demander de travailler, bien sûr sous gulp, et puis on va placer uncss et un autoprefixer, deux éléments. Le autoprefixer, on l’a vu dans l’étape précédente qui peuvent tous les deux faire référence à une tâche qui pointerait sur une source commune qui serait en l’occurrence un fichier JavaScript. Alors ici on va créer une première tâche qui sera optimisecss qui va pointer sur la source css de ce document ici. Alors on n’aurait pu pointer vers un *css, mais il est vrai que généralement nos productions focalisent au final sur un seul et unique fichier css qui regroupe le tout. Alors on pourrait faire un concat, on verra les concats avec le JavaScript, donc ça fonctionne exactement pareil que si vous le fassiez sur un css. Ici, on va dire qu’on a directement ce fichier css qui a été généré. On va faire un autre pipe uncss, en passant comme paramètre tous les documents html qui se trouvent dans ce dossier. Également, on aurait pu pointer vers un dossier html comme ça, de cette nature, en prenant tous les documents html de ce dossier. On aurait pu pointer vers un document en ligne, http, puisqu'on pourrait faire référence à un site voisin ou parallèle qui ferait référence à cette feuille de styles.css. Pourquoi cela ? Mais tout simplement pour dire: attention, avant de me retirer les sélecteurs dans les fichiers css, assure-toi que mes fichiers html n’y font pas référence. De même assure-toi que mes fichiers JavaScript ne le gèrent pas en dur. Alors ça attention, c’est un travail qui est en cours de développement par le groupe de travail, mais voilà : donc de bien aller indiquer à uncss qui sont les documents qui font référence aux règles de ce fichier css. Ensuite, on va lui placer un autoprefixer comme on l’a fait dans l’étape précédente en lui disant : rends-moi ça valable pour les quatre versions de navigateurs précédentes, précédant celle qui est en cours, et puis maintenant un pipe gulp.dest pour repointer tout ce document css et l’enregistrer à la racine. Donc en gros, il va venir écraser ce document css. On va préparer maintenant une seconde séquence de nettoyage qui va être le gulp-selectors. Alors là, le gulp-selectors, première chose à faire, c’est : on va lui dire de pointer vers gulp-selectors, de récupérer ce package et puis on va faire une task qui sera minimiseselecteurs qui elle va pointer vers une source différente, puisque cette source différente va faire à la fois appel à du document css et du document html. Alors, pour cela, encore une fois on aurait pu également pointer vers un dossier étoile.css et un dossier étoile. html parce qu’il pourrait y avoir plusieurs documents css utilisés, plusieurs documents html utilisés, avant de courir ce gulp selector. En gros, on lui dit : attention. tu vas aller chopper des class ou des ID qui vont se trouver dans ces documents css, tu vas les comparer par rapport à ces documents html, et tu vas maintenant aller les minifier d’un côté comme de l’autre. Et une fois que l’étape sera terminée, tu vas pouvoir enregistrer tous ces petits fichiers dans le même dossier de départ, le même dossier puisque là, il n'y a pas de nom quoi, donc ça va être ce dossier de départ, j’aurais pu avoir un /output, « / » de façon à lui dire : tu m’enregistreras tout ça dans un dossier de sortie et un dossier de production. Mais on voit bien que tout peut être exécuté à la même racine. Alors maintenant ce qu’on a envie c’est d’avoir une tâche qui me regroupe ces deux, sauf que je ne pourrais minifier les sélecteurs que lorsque j’aurai fini d’optimiser mes css. Je ne peux pas le faire avant quoi, donc c’est vraiment important. Et donc là-dessus, on va utiliser le dernier larron de la bande qui est le runSequence ici, donc on va aller chercher le package et maintenant, on va créer une task qui sera globale qui va dire de faire optimisecss, et ensuite minimiseselecteurs. Par contre, faites bien attention à placer ce callback, on verra le callback juste après, alors maintenant on part du principe que tout a été installé, vous aviez fait un npm install direct, et là on va pouvoir faire un gulp global directement et quand j'exécute ce gulp global, on voit qu’on va partir dans le global, on optimise css, on termine optimisecss, on minimise css. Quand on a terminer minimisecss, on terminera le global. Donc, tout va être exécuté étape par étape. Tout ça, parce qu’il y a le callback. Vous voyez, ici on a bien fini optimisecss. On relance et le global se termine qu’au final. Alors, regardons déjà le résultat de nos optimisations. Si je viens du côté du html, on voit bien que les classes, grilles conteneurs, et éléments ont bien été remplacés par des a, b, c. Côté css, on a bien ce retour vers a, b, c qui a été placé, on a bien le préfixage qui a été mis en place également, et on voit que le sélecteur article et le sélecteur inutilisé ont été retirés, puisque justement ils ne sont pas utilisés, le uncss a bien fait son job. Alors si on revient maintenant, on va pouvoir voir dans la console... Enfin avant de passer dans la console, on va retourner dans notre gulpfile et je vais retirer ce callback ici, je vais le supprimer ici, et je vais le supprimer ici, y compris la virgule, et j’enregistre ce gulpfile. Et regardez ce qui va se passer si je release mon gulp global. Au lieu que optimisecss attende la fin pour pouvoir lancer minisélecteur, vous voyez que optimisecss a dit : moi, j’ai fini, parce qu’il n’y a pas de callback qui a été fait et global se termine. Il me dit : moi, j’ai terminé. Aucune information autre me disant que c’est pas terminé. Par contre les tâches, elles, qui ont été lancées, elles se déroulent à la fin. Alors, imaginez un peu les mauvais processus que ça peut faire parce qui ce qui m’importe, ce qui est très important pour moi, c’est que la minimisation du sélecteur se fasse que une fois que le uncss a été terminé. Alors pour cela, c’est là où on va justement passer ces fameux callback parce que si vous regardez bien ici, on a un return qui nous renvoit l’information dans la tâche pour nous dire : ça y est, c’est terminé. Ici dans le runSequence, il n’y a rien qui nous dit : c’est terminé, si ce n’est ce callback. Alors ici, le nom du callback peut être purement arbitraire. Est-ce celui-là qui sera appelé ? C’est-à-dire que chaque fois que la fonction va recevoir une information pour lui dire : ça y est j’ai fini ceci, ça y est j’ai fini cela, c’est ce callback qui va parler, donc il est très important d’utiliser ce callback ici si vous utiliser un runSequence pour être sûr de ne renvoyer la fin de global que lorsque les deux, les trois, les X tâches consécutives seront réalisées. Voilà donc, c’est très important de pouvoir utiliser ce callback. Dernier petit point : c’est que pour pouvoir réinitialiser, si vous êtes ouvert et si vous pouvez faire des CONTRÔLE-Z et vous allez revenir à l’état naturel de vos documents, donc vous allez pouvoir les retravailler si besoin était, si des fois vous fermez les fichiers et que vous faites autre chose, venez dans la source txt, vous avez dans la première partie ici la partie html et dans la seconde partie, la partie css, pour pouvoir remettre en exploitation vos tâches et pouvoir mieux les expérimenter.

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 !