HTML5 : Optimisation des flux de production

Minifier, uglifier et concaténer

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez vous retrouver avec autant de dossiers que de librairies. Regroupez et minifiez le tout au sein d'un seul et unique fichier CSS et JS. Ici, Gulp et npm vous seront utiles.
09:30

Transcription

Alors nous avons vu qu’il était possible donc de pouvoir extraire et récupérer les fichiers. Le problème c’est qu'on se retrouve quand même avec un fichier jQuery, un fichier lightbox, un fichier xy, et si on a dix librairies, ça va faire dix fichiers. Et donc ce qui serait intéressant, c’est de regrouper tout cela sur un seul et unique même fichier, même arborescence. Alors on va repartir sur ce projet qui est cloné tout simplement. Et pour cela, je vous invite pour l’instant, de manière aveugle quelque part, à vous pointer sur le dossier ad hoc et de faire un bower install déjà pour récupérer l’intégralité des components que l’on va avoir besoin, bien sûr on se retrouve avec la même problématique de dépendance, donc à savoir si lightbox va piocher dans le 3.1.1, ou installer sa propre librairie. Et puis ensuite, on va faire également un npm install et là, beaucoup de choses vont s’installer, on va les laisser s’installer, et je vous propose qu’on retourne, nous, en façade pour commencer à travailler. Premier élément qu’on a besoin, c’est de se dire : on voudrait concaténer déjà tous les JavaScript. Alors pour concaténer les JavaScript, qu’est ce qu’on va faire ? On va aller du côté de npm.js, alors moi je vous propose ici un gulp-concat-js qui est une extension, qui est assez maintenue quand même, qui est assez simple à utiliser, et sur laquelle je vous invite à venir regarder les diverses informations, et sur le github également. On va avoir besoin de renommer notre fichier parce qu’on va pouvoir concaténer, mais on va pas pouvoir renommer. Donc pour pouvoir renommer, on va utiliser. je vous propose gulp-rename qui est une vieille extension qui fonctionne, qui fait le job. Là pareil, je vous invite à explorer les git et les éléments, et puis on va utiliser un uglify, qui est un outil qui va permettre d’optimiser, de minimiser complètement le JavaScript que l’on va produire. Alors pour cela, on va installer donc des npm install, mais on fait feu de cette opération, ne vous inquietez pas, le fichier package json est relativement complet à ce niveau-là, tout a été prévu, donc ça sera installé, il y aura pas besoin de le faire. Ici, donc on va simplement appeler nos fonctions concatJS, rename et uglify qui vont eux-mêmes faire des require Alors on va créer une task qu’on appellera concatJS, rien à voir avec cette variable là, c’est simplement une tâche que j’appelle. Et donc il va, elle, va faire un return gulp, il y pas de souci, c’est toujours en gros le même schéma, et là donc on va venir piocher notre fichier source. Alors notre fichier source, le souci c’est que théoriquement il se retrouverait dans libs, et moi le fait qu’il se trouve dans libs, ça me gène un peu. Je préfère qu'on appelle celui-ci temp, temporaire, parce que c’est un dossier temporaire dans lequel on va venir récupérer l’intégralité des fichiers JavaScript la fonction juste avant. Ce que je vais faire, c’est je vais lui dire : maintenant tu vas venir me les chercher dans temp, mais dans temp tu risques d’avoir pleins de fichiers, peu importe leur nom, puisque tu auras lightbox, tu auras html5, tu auras jQuery, et là à l’intérieur, par contre, je sais que t’auras un dossier JavaScript, eh bien, tu me prendras tous les fichiers .js, peu importe leur nom, que tu auras à l’intérieur. Et là à ce niveau-là, je sais que je vais pouvoir récupérer tous les éléments JavaScript. Ce que je vais faire maintenant, c’est : je vais faire un pipe et je vais lui dire dans ce pipe de me faire concatJS, alors attention cette fois-ci, j’appelle celui-ci, là, j’appelle pas cet élément-là que j’ai nommé de manière string ici, concatJS et je vais lui dire : tu me le feras un main.js ici temporairement, tous les deux en trait d’union. Une fois que on aura concaténé l’ensemble de ces éléments, je vais demander un pipe cette fois-ci, et je vais faire un gulp dest, je vais lui dire : tu vas me les placer dans libs, ici directement donc, tu vas me créer cette fois-ci libs pour pouvoir stocker ce fichier main que tu vas me récupérer. Mais par contre ce fichier main, je vais le renommer maintenant pipe rename, et je vais le renommer à main.min.js, de façon à savoir que là cette fois-ci, je travaille avec la version optimisée, la version minimale. Mais pour que je puisse être en version minimale, eh bien là, je vais y faire un pipe uglify et je sais que là, je vais optimiser cet élément-là, et le résultat de tout ça, tu me le mets dans libs. Voilà, pipe gulp.dest et tu me le mets dans libs, voilà. Donc là, on est, on est carré là, je sais que maintenant on aura fait notre JavaScript. Il nous reste maintenant le css à faire, puisque c’est vrai qu'on a fait la partie concatJS mais on n'a pas fait la partie concatCSS. Alors pour cela, on retourne faire notre marché auprès de npm.js. Et là on a un outil qui s’appelle gulp-concat-css que l’on doit installer. Encore une fois, ça a été installé par le npm install global qu’on a fait. Et puis ensuite on va utiliser clean-css qui, lui, va pouvoir nous permettre d’enregistrer directement dans la version souhaitée, sans passer par un rename. Je vous invite également à venir sur ce petit github ici qui va vous donner toutes les options de clean-css que vous pouvez utiliser ici directement dans l’objet, parce que là, je ne passe pas d’option, je passe tout par défaut. L’essentiel c’est de comprendre la mécanique et après vous pourrez affiner avec les besoins à chaque fois, de filtrage ou de contexte. Donc ici, on va se placer à ce niveau-là, on va importer nos deux variables qui vont faire des require par rapport au package nécessaire, donc concatCSS et cleanCSS, et on va venir placer notre tâche directement ici. Donc on a un concatCSS. Encore une fois, c’est pas ce concatCSS ici, c’est le concatCSS de string qu’on va appeler, la fonction que l’on va appeler, la tâche. Et on va pouvoir faire ici un return, on va prendre un gulp.src, on va venir piocher dans le même dossier temporaire ici avec peu importe le nom qu’on va avoir. Par contre cette fois-ci, on piochera dans le dossier css. On va rajouter une extension *.css pour dire : tu prendras tout les fichiers css que tu trouveras, quel que soit leur dossier. L’essentiel c’est qu’il soit dans le dossier css. Alors ensuite, on va faire un pipe concat ici. On va pouvoir concaténer directement notre css. Donc on va faire un concatCSS. Et là une propriété que l’on avait pas, ici dans le concatJS réellement quoi, c'est-à-dire qu’on va pouvoir vraiment maintenant enregistrer un main.min.css puisqu’on n'a pas à le récupérer pour faire un uglify de manière indirecte, on peut le passer sur le clean css et c’est là où on passerait l’objet ici, cet objet dans lequel je vous invite à venir piocher les paramètres ici sur le github ici, pour pouvoir vraiment venir voir comment vous souhaitez affiner tout cela. Donc on retourne dans notre gulp ici. Donc le cleanCSS, on va le laisser tel quel, et puis on fait un dernier pipe qui va faire un gulp dest pour aller dans le dossier libs pour aller se placer également au même niveau, au même dossier. Jusque là on est très bien. Par contre, ça va nous demander de réaliser trois tâches, de refaire un regroupedist, puis après de refaire un concatJS, puis de refaire un concatCSS, etc. Donc c’est un peu long. Alors ce qu’on peut faire, c’est le séparer en deux étapes et faire une première regroupe distribution et puis faire une seconde étape, une dernière tâche qui ferait les concaténations. Voilà, donc c’est un peu ce qu’on va faire ici, on va faire une tâche concat qui fera le concatJS plus le concatCSS. On aurait pu faire avec une précédence, c’est vous qui voyez comment vous pouvez le mieux optimiser votre production. Ici, on retourne donc dans notre console, on va nettoyer un peu tout ce petit monde. On va demander à gulp dans un premier temps de refaire un regroupedist ici, il va regrouper tous ces éléments-là. Il me dit : ah, le local gulp n’a pas été installé, même erreur que précédemment. Donc on va faire un install gulp et on va faire un save dev qui n’avait pas été mis en place, voilà. On installe cet élément-là, et puis on peut relancer juste au terme de cette installation le regroupedist et le concat. Voilà, donc on va remonter de deux niveaux ici. Donc on lance le regroupedist. Le premier regroupedist va nous fabriquer ce dossier temporaire ici. Donc ici on l’a placé. Alors il s’appelait libs. Tout simplement c’est que le gulpfile n’a pas été enregistré. Donc on retourne dans la console ici. On va pouvoir supprimer déjà dans un premier temps le libs ici qui était inutile. Voilà. Et donc, on va pouvoir relancer notre regroupedist. On peut vérifier en temps réel, on a bien cette fois-ci un dossier temp qui se crée ici. Et donc là ce qu’on va faire, c’est maintenant de faire un gulp et on va faire un concat puisqu’il s’appelait concat, la tâche partagée. Si je fais un concat cette fois-ci, et gulp concat, et là, tout se fait. Et si je regarde maintenant du côté de mon dossier, j’ai bien ma libs, qui est ma production définitive. Et si je regarde, j’ai un main.js qui n’a pas été détruit, un main.min.css et un main.min.js qui sont les deux fichiers qui vont contenir l’intégralité de mes librairies concaténées.

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 !