HTML5 : Optimisation des flux de production

Optimiser avec PostCSS

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Voyez une méthode de chaînage d'optimisation des CSS qui est l'utilisation du package PostCSS. Voyez en quoi cela consiste et comment mettre en place une telle approche.
08:44

Transcription

Dans l’étape précédente, nous avons vu que pour pouvoir exécuter plusieurs tâches consécutives, nous allons créer diverses tâches et puis les imbriquer au travers d’un pipe qui va régler chaque fois les paramètres nécessaires. Il existe une autre approche plus philosophique sur ce chainage, qui va être postcss. Alors postcss, c’est un package node qui va permettre de travailler dans une philosophie de plugin et donc d’ajouter un ensemble de plugin. Alors, le plus simple ça va être de le mettre en application directement. Alors, juste avant d’aller le mettre en application, je vous invite à vous rapprocher soit de postcss comme on l’a vu sur npmjs, soit sur le github où vous avez un peu le clone de ce qui se passe sur npmjs, mais vous avez tout l’accès à la communauté, aux branches et aux requêtes qui sont réalisées. Vous pouvez aller également sur npmjs, taper postcss dans la recherche et vous avez toute une série de modules qui peuvent être utilisables et nous, on va se focaliser donc sur cssnano qui est un plugin pour postcss ici et on va utiliser uncss qu’on avait vu précédemment, mais cette fois-ci dans sa version postcss, c’est-à-dire sous forme de plugin postcss. Alors ici, on va retourner dans ce chapitre 12 où on se retrouve avec tout un ensemble de fichiers qui va nous permettre l’optimisation. On pointe la console de commande directement sur ce dossier. Pensez à faire un npm install pour récupérer ce package.json qui va nous permettre d’installer à la fois un autoprefixeur, un cssnano qu’on a vu, la librairie gulp, gulp-postcss pour pouvoir utiliser ce package, puis le uncss de postcss qui auto-installe automatiquement la version uncss traditionnelle. Voilà, donc vous faites un npm install, et puis on va venir optimiser donc de la même manière que ce qu’on a fait précédemment à quelques différences près, mais cette fois-ci en passant par le package postcss. Alors, vous voyez ici, j’ai rajouté une classe qui n’est pas utilisée mais que j’appelle préserve dans le sens de dire : celle-là, je veux la garder, celle-là si elle n’est pas utilisée, tu me la supprimes mais préserve, tu me la gardes. Voilà, donc on va rentrer dans le gulp js, et on va venir travailler. Alors d’entrée de jeu, on va faire tous les require nécessaires ici. Voilà, on va directement s’affranchir de cette tâche-là, et là on va attaquer sur le gulp.task, voir la différence qu’il y a d’utilisation entre un postcss et un côté un peu traditionnel de l’utilisation des packages sous gulp. Alors ici, on va revenir à notre fonction native classique de base et puis on va cette fois-ci enregistrer notre return classique avec un gulp.src, toujours pareil, donc on va prendre ce dossier ici, c’est-à-dire le fichier css que l’on veut observer puisque c’est lui qu’on va optmiser, c’est ce fichier css qu’on va venir optimiser, donc je prends celui-ci, et ici on va faire nos pipes classiques, comme on le ferait pour tout autre package, et donc on va faire un postcss, on va invoquer et puis on va faire la sortie, le pipe dest, et on va rester sur le même dossier pour venir écraser l’élément, voilà. Donc jusque-là, en gros, on va fonctionner exactement de la même manière que ce qu’on aurait fonctionné pour un package classique, c’est-à-dire qu’on fait un return, le gulp.src, le gulp dest, voici qui je prends, voici où j’enregistre et on va attaquer cette tâche postcss. Donc maintenant, ce qui nous intéresse de faire, c’est de pouvoir passer à la fois le uncss, l’autoprefixer et le nano. Le nano qui va nous permettre de vraiment optimiser le css dans tous son sens, dans toute sa largeur, donc pour ça, je vous invite à vous rapprocher du github, c’est un peu plus parlant souvent, et de regarder tout ce que va faire vraiment cet outil, et le cssnano va vraiment venir optimiser le css dans toute sa splendeur. Regardez ici, vous avez toutes les optimisations qui sont prises en compte. Revenons ici dans cette partie, voyons comment on va implémenter donc toutes ces tâches à l’intérieur. Mais ce qu’on va faire, c’est : on va créer un objet, taches par exemple, on peut l’appeler, et cet objet on va dire que c’est un tableau, un arrêt et dans cet arrêt, on va venir décrire toutes les tâches que l’on veut implémenter. Donc par exemple, si je veux implémenter la tâche uncss, je prends ce pointeur ici et ce uncss, je vais lui passer sous forme dans sa fonction, un objet qui va contenir toutes les propriétés d’affinage de l’élément. Et donc là, vous vous rapprochez de uncss, et vous regardez tout ce que vous pouvez faire. Donc ici on va dire : le uncss, tu te sers du html, dans un tableau, alors pareil que ce qu’on avait fait tout à l’heure, dans l’étape précédente, c’est-à-dire qu’on va pouvoir venir maintenant lui dire : tu vas aller te servir de ce fichier html pour t’assurer de ne pas supprimer des classes ou des éléments qui seraient utilisés. Et là encore, on pourrait rajouter comme, rappelez-vous, on pourrait faire dans un dossier, ce qu’on avait fait tout à l’heure : *.html, on pourrait dire : tu prends un document en ligne, etc. pour t’assurer de la validité de la classe que tu es en train de vouloir supprimer ou pas. Et on pourra entrer aussi dans une propriété ignore, c’est-à-dire : je vais lui demander de ne pas me retirer et là je vais mettre un tableau et là, pareil ce tableau pourrait contenir des chemins d’accès, tu me touches pas ce dossier, tu me touches pas cette classe, tu me touches pas cet élément. Et là, on va lui dire : tu me préserves la classe préserve. Vous vous rappelez, dans le css ici : si inutilisé, tu ne la trouves pas dans le document html, ici tu me la supprimes ; celle-là, tu ne la trouves pas dans le document html, tu me la supprimes ? Non, non, je t’ai demandé ici dans le gulpfile de me faire un ignore sur preserve. Et voilà, et de cette manière-là, je vais pouvoir venir définir tous les plugins postcss que je vais vouloir utiliser. Donc si je prends le autoprefixer ici , l’autoprefixer, je vais lui passer un paramètre et puis je vais pouvoir faire un cssnano et pareil, je pourrais lui passer un paramètre sous forme d’objet à l’intérieur directement. Donc ici, le paramètre qu’on va passer pour autoprefixer, ça pourrait être de dire : tu me préfixes les éléments pour tous les navigateurs d’une 4 versions jusqu’à la version actuelle, le cssnano, on pourrait passer nos éléments, etc. etc. Donc vous voyez ici, au niveau de l’instruction pure gulp, on passe rien, on passe juste postcss, sauf qu’on va lui dire : maintenant, eh bien tu tiens compte de taches, et là, on va passer cet objet ici, qui va pouvoir venir défiler. Donc vous voyez, ça nous permet d’avoir une autre approche philosophique sur l’imbrication des plugins et des tâches, mais en gros, on reste aussi à utiliser un peu les mêmes types de fonctionnalités. Alors, faites bien attention par contre, tous ces plugins ici maintenant, doivent être des plugins postcss, compatibles avec postcss. On ne peut pas mettre toutes les tâches récupérées sur npmjs. Alors maintenant, il nous reste à passer dans la console ici, et de faire un gulp global et de lancer, et là cette fois-ci on va réaliser toutes les tâches de la même manière qu’on le ferait à un chaînage sauf que c’est postcss qui va gérer toute cette suite-là. Une fois tout terminé, on peut rebasculer dans notre élément, venir voir le html, et on voit bien que le css a été fait, préserve est bien gardé, on voit bien que tous les éléments display, box, flex, etc. ont été adaptés par rapport à browser de 4 versions. Cette fois-ci, les nommages ne se sont pas effectués parce que le fait de pouvoir renommer, rappelez-vous, alors là on peut passer dans l’étape précédente, dans le gulpfile précédent, dès que vous le renommez, c’était le selector, ici gs.run, on attaquait à la fois dans la source, le css et le html, donc ici on serait forcément sur cette task mini-sélecteur qu’on pourrait rajouter en plus, en rajoutant bien sûr le gulp-selectors ici, mais c’est quelque chose qui se passerait en dehors de notre postcss, puisque lui, tape sur des sources qui sont uniquement basées sur ce css. Donc une autre approche philosophique, je vous disais, sur la gestion de l’optimisation de css. Et je vous invite à regarder cet excellent tableau ici qui a été réalisé sur PostCSS.parts, qui va nous permettre de voir justement tous les postcss, ou tous les plugins qu’on peut accéder. Et par exemple, si je regarde au niveau des Fonts, ici je vais avoir que des postcss qui vont permettre d’optimiser les Fonts ici, et vous avez comme ça, si vous travaillez avec du Svg, par exemple ici, vous avez tous les postscss travaillant sur le Svg. Donc vraiment, je vous invite à explorer ce petit site-là qui permet d’avoir une grande vue sur le catalogue accessible à des plugins postcss.

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 !