[MUSIC]
Nous allons maintenant poursuivre notre parcours avec les scripts NPM dans ce prochain exercice.
Ici, nous allons apprendre comment construire
un dossier de distribution qui contient tous les fichiers de
notre projet que nous pouvons simplement déployer sur un serveur Web qui héberge notre site Web.
Donc, compte tenu des fichiers HTML, CSS et JavaScript que
nous avons déjà préparés dans notre dossier de projet, nous allons, à partir de
ceux-ci, les traiter en utilisant les différentes tâches dont nous avons parlé.
Cela fait une modification CSS,
concaténation et uglification JavaScript, minification
et minification HTML,
puis générer un dossier de distribution avec tous les fichiers.
Mais forme essentiellement l'ensemble des fichiers qui peuvent être
déployés sur notre serveur Web qui héberge notre site Web.
Pour vous aider à comprendre ce que nous allons faire dans cet exercice particulier,
comme nous le notons sur notre page index.html, nous avons un ensemble de
fichiers CSS que vous avez inclus ici en utilisant cette balise de lien ici.
De même, vous avez un ensemble de scripts que vous avez inclus en
bas de cette page à l'aide de la balise de script.
Nous avons inclus un ensemble de code JavaScript.
Maintenant, ce que nous allons faire dans cet exercice est de combiner tous ces
fichiers dans un seul fichier JavaScript qui sera livré
de notre serveur Web à un navigateur qui tente de consulter notre site Web.
De cette façon, nous minimisons le nombre de téléchargements que le navigateur doit faire
pour rendre notre site Web.
De même, nous allons combiner tout le code CSS en un seul fichier CSS,
afin qu'il puisse être livré.
Donc, le fichier CSS combiné contiendra tout le code pour
Bootstrap plus Bootstrap social, ainsi que la Font Awesome et
aussi le code CSS que nous avons écrit nous-mêmes.
De même, il y aura un seul fichier JavaScript qui
contiendra le tether jQuery, Bootstrap et le code JavaScript que nous,
nous avons écrit, tous combinés ensemble dans un seul fichier.
Maintenant, c'est ainsi que vous pouvez faire le déploiement de vos pages Web.
Et au lieu d'avoir plusieurs fichiers de ce type là, une façon dont le
déploiement est fait est de les combiner en un seul fichier afin qu'un seul téléchargement
vous obtienne tout le code JavaScript nécessaire pour rendre votre page Web.
Un seul téléchargement vous obtenez tout le code CSS nécessaire pour
rendre votre page web.
Et puis, bien sûr, le fichier HTML lui-même va être téléchargé.
Pour que ces tâches soient terminées, nous devons utiliser
un certain ensemble de modules NPM pour accomplir cela.
Maintenant, ce que nous allons faire est de construire un dossier
dans notre fichier de projets, puis nous appelons ce dossier comme dist, D-I-S-T.
Je nomme juste au hasard ça comme un dossier dist.
Dans mon cas, ce que je veux dire par le dossier dist est un dossier de distribution.
À la fin de l'ensemble des étapes que nous allons faire, ce dossier contiendra tous
les fichiers qui peuvent être simplement copiés sur le serveur Web qui héberge notre site Web.
Pour commencer, ce que nous allons faire est de mettre en place
ici un ensemble de scripts qui nous aideront à automatiser ce processus.
Donc, d'abord, nous pourrions
préparer le dossier de distribution une fois, puis peut-être nous pouvons faire quelques modifications
à nos fichiers source, puis nous pouvons avoir besoin de recompiler notre dossier de distribution.
Première étape, nous mettrons en place le script pour nettoyer ce dossier de distribution
signifiant essentiellement, supprimer le dossier de distribution.
Donc, pour ce faire, je vais prendre l'aide d'un module NPM appelé rimfraf.
Donc, je vais installer npm —save-dev rimfraf.
Ce module nous aide à nettoyer complètement un dossier.
Donc, une fois que j'ai installé ceci, je vais configurer un script
dans mon fichier package.json pour nettoyer tous les fichiers.
Aller au fichier package.json, je vais ajouter, alors
rappelez-vous toujours que le coma est très, très important dans ces scripts.
Parfois, vous rencontrerez des problèmes juste parce que vous avez oublié la virgule.
Assurez-vous donc de mettre ces virgules si nécessaire.
La prochaine description que je vais ajouter est, propre,
évidemment comme son nom l'indique, cela va nettoyer mon dossier.
Donc, je vais dire Rimraf dist.
Ce que cela signifie, c'est que cela, lorsqu'il est exécuté,
va nettoyer le dossier de distribution.
Donc, je vais ajouter cela dans, et
puis je vais mettre cette virgule là parce que je vais ajouter plus de scripts ci-dessous.
Donc, laissez-moi enregistrer les modifications, l'étape suivante que je vais
faire est d'installer un module npm appelé fichiers de copie qui sont utilisés pour copier
certains fichiers de polices de mon dossier de modules de noeud dans mon dossier de distribution.
Ainsi, lorsqu'il est déployé, les fichiers de polices sont également déployés.
Aller au terminal, le prochain paquet que je vais installer est
npm -g, rappelez-vous que cela signifie qu'il devrait être installé globalement.
Puisque je fais cela sur un Mac,
je devrais dire sudo npm -g, si vous le faites sur Windows, vous n'avez pas besoin du sudo.
sudo npm -g installer les fichiers de copie.
Et puis une fois qu'il est installé, ce module NPM m'aidera à copier
des fichiers d'un dossier vers un autre dossier.
Maintenant, laissez-moi vous présenter un autre script NPM ici.
Aller à mon fichier package.json,
je vais créer un nouveau scrip ici copyfonts nom.
Ce script va me permettre de copier tous les fichiers de polices de mon
dossier Font Awesome dans mon dossier de distribution.
Pour que lorsque mon site Web est rendu,
tous ces fichiers de polices peuvent également être envoyés, de sorte que
mes pages Web sont correctement rendues avec les polices Font Awesome en place.
Donc, pour ce faire, je dirai, copier les fichiers -f,
-f signifie simplement qu'il copie les fichiers sans le plein de hiérarchie et
copie simplement les fichiers d'un emplacement à un autre emplacement.
Donc, je vais dire copier les fichiers -f
node_modules/font_awesome/fonts/star
Et dist/fonts,
Et puis enregistrer les changements.
Permettez-moi maintenant d'illustrer comment ces deux scripts npm fonctionnent ensemble.
Aller à ma fenêtre de commande, je vais taper
npm run copyfonts.
Lorsque cela s'exécute, il va créer un dossier
nommé dist dans ma hiérarchie de dossiers de projet.
Et puis à l'intérieur du dist,
il y aura un sous-dossier nommé polices, qui contiendra les fichiers de polices.
Donc, en exécutant ceci,
vous remarquerez immédiatement que le dossier de distribution est créé ici.
Et à l'intérieur du dossier de distribution,
vous pouvez voir qu'il y a un sous-dossier nommé polices.
Et à l'intérieur, tous les fichiers fontawesome ont été copiés.
C' est ainsi que fonctionne le script copyfonts.
Maintenant, je vais vous montrer comment fonctionne le script propre.
Donc, si je tape npm run clean, cela va supprimer ce dossier de distribution.
Donc, quand je l'exécute, alors vous remarqueriez que
le dossier de distribution est supprimé de ma hiérarchie de dossiers de projets.
C' est ainsi que le nettoyage fonctionne.
Maintenant que nous avons ces deux scripts configurés,
nous devons maintenant être en mesure de construire les fichiers de distribution restants.
Dans l'étape suivante, nous allons installer un module de nœud appelé imagemin-cli,
qui est l'interface de ligne de commande du module imagemin.
Le module imaginemin prend une section de fichiers image puis les compresse.
Donc, il empilé la taille de ces fichiers sont minimisés autant que possible,
mais toujours être rendus correctement lorsque notre site Web est rendu.
Ainsi, nous réduirons la quantité de données qui
doivent être téléchargées par le navigateur lorsqu'il a besoin de rendre notre page Web.
Donc, si vous incluez des images dans votre page Web, alors la tâche imagemin est
quelque chose que vous devriez apprendre afin de réduire la taille de vos fichiers image.
Donc, pour ce faire, je vais installer ce module de nœud imagemin en tant que module global.
Donc, je tape sudo, puisque j'utilise un Mac,
npm -g installe imagemin-cli,
puis installe ce module de nœud.
Parfois, sur un Mac, certains des plugins imagemin ne sont pas installés correctement.
C' est pourquoi je donne ces drapeaux supplémentaires à la commande,
ils disent —unsafe-perm=true et —allow-root.
Une fois cette installation terminée,
permettez-moi de mettre en place un script afin de faire ce grossissement de mes images.
Aller à package.json à nouveau, je vais mettre en place le prochain script ici.
Donc, je dirais imagemin est le nom du script que je vais faire,
et je dirais imagemin.
Et puis puisque toutes mes images sont dans le dossier img, je dirais img/*,
puis de nombreux fichiers vont être copiés dans l'image dist.
Ainsi, les fichiers image originaux du dossier image que j'ai seront copiés
dans le dossier de distribution et dans le sous-dossier image là.
Donc cela complète mon imagemin.
Permettez-moi d'aller de l'avant avec la configuration restante, et
ensuite nous verrons comment nous utiliserons les scripts que nous avons déjà mis en place là-bas.
Maintenant que j'ai le dossier de test là-dedans, que je pourrais créer,
je ne veux pas archiver le dossier dist dans mon dépôt Git.
C' est pourquoi dans mon fichier .gitignore, je vais également ajouter dans le dossier dist.
Donc, le dossier dist sera ignoré lorsque je vérifierai dans le dépôt Git.
Donc, sauvegardons les changements, revenant à package.json.
Maintenant, ce que je vais faire est d'installer trois
modules de nœuds différents, qui me permettent de faire les modifications
à mon fichier index.html et les fichiers HTML restants là-bas.
À l'invite de commandes, tapez npm install —save dev.
Je vais installer un module appelé usemin-cli.
Cet usemin-cli est celui qui me permet de faire la transformation à partir de mon
fichier HTML.
Ensuite, concaténez et combinez tous les
fichiers CSS dans un seul fichier CSS, puis mettez-le dans le dossier de distribution.
De même, tous les fichiers JS seront concaténés et placés dans un seul dossier.
Donc, cet usemin-cli est utile.
Mais cet usemin-cli prend l'aide
de trois autres modules de noeud appelés cssmin,
puis uglifyjs, et htmlmin.
J' ai donc besoin d'installer ces trois modules de nœuds en plus d'usemin-cli.
Et je vais installer ceci localement dans mon projet,
c'est pourquoi npm install —save-def.
Donc, de cette façon, ils se souviendront dans mon fichier package.json.
Alors allons de l'avant et terminons l'installation.
Maintenant que j'ai installé l'usemin et
les modules de noeud associés, j'ai besoin de faire une transformation
vers mon fichier index.html et les fichiers HTML restants.
De telle sorte que l'usemin node_module reconnaisse que ce groupe est
un tas de fichiers CSS qui doivent être compressés, calculés et vérifiés.
De même, il s'agit du groupe de fichiers JavaScript qui doivent être uglyfiés
, combinés et concaténés ensemble.
Donc, pour aider le paquet usemin fonctionne,
j'ai besoin d'ajouter un peu de code dans mon fichier index.html.
Alors juste avant le premier lien là-bas,
je vais ajouter une marque ici,
qui dit ! — build:css.
Maintenant, ça ! —, comme vous le reconnaîtrez,
est un commentaire du point de vue html.
Donc, à l'intérieur de ce commentaire, je vais inclure que cette ligne particulière
va être utilisée par le menu d'utilisation afin de reconnaître le bloc de
code qui spécifie tous les fichiers CSS qui doivent être transférés.
Donc, je dis build.css, puis je vais spécifier
le nom de fichier comme css/main.css.
Il s'agit de la syntaxe de spécification.
Ce que cela signifie, c'est que ces blocs de fichiers CSS seront tous combinés ensemble,
puis concaténés, minifiés, puis mis dans ce fichier appelé main.css.
Et puis ce bloc sera identifié de l'autre côté en disant,
Tiret —, ok, désolé.
J' ai oublié d'inclure un double tiret à la fin.
C' est la raison pour laquelle cela ne tournait pas les couleurs.
Donc, parfois, vous êtes heureux que votre
éditeur signale ces erreurs potentielles que vous pourriez commettre.
Donc, juste là, je dirais endbuild et
puis — crochet droit là.
Maintenant, peu importe ce qui se trouve entre
cette construction et endbuild, ce groupe sera traité comme une unité pour
être combiné par notre module npm usemin.
Regardez la syntaxe utilisée par le module usemin.
J' ai besoin de faire la même transformation en contactus.html et aboutus.html aussi.
Donc je vais copier celui-ci
ici le paresseux que je suis.
Je vais simplement copier et
coller dans contactus.html
, puis aussi aboutus.html là.
De même, en revenant au index.html,
je vais copier cette inbuild, puis aussi le copier dans les
données contactus.html et aboutus.html.
Ok, sauvegardons les modifications dans tous les fichiers.
Ensuite, revenez à index.html.
Je vais répéter la même chose en bas pour mes
scripts JavaScript que j'y ai inclus.
Donc, aller en bas ici,
ce que je dois faire ici,
est de spécifier < ! — construire js,
et je dirai js/main.js.
Double trait d'union, barre oblique.
Donc c'est le début du bloc et ensuite la fin est spécifiée par,
Build, ok ?
Donc, avec ces changements, maintenant, mon fichier index.html est prêt,
et je dois faire la même transformation en contactus.html en bas.
Et aboutus.html aussi en bas.
De même, cette enbuild copiée dans. Dans
contactus.html et aboutus.html, puis enregistrez tous les fichiers.
Et cela prépare nos fichiers HTML pour
être transformés pour préparer le dossier de distribution.
Ces fichiers resteront en tant que tels, mais les fichiers transformés seront placés dans
le dossier de distribution créé à partir de ces fichiers.
Maintenant, une fois que nous avons terminé cela, mettons en place quelques scripts.
Aller à package.json, je vais configurer mon prochain script appelé usemin.
Et puis cela dit usemin,
contactus.html -d dist, c'est la syntaxe pour
spécifier -d dist, ce qui signifie que la destination de
ce dossier dist de distribution.
Et puis je dirais htmlmin, cela va aussi minimiser le fichier HTML.
Donc, il va supprimer tous les espaces et commentaires superflus du fichier HTML.
Mais ils le compriment pour
qu'il contienne le nombre minimum de caractères là-bas.
Nous allons examiner le résultat après avoir terminé et faire la transformation là-bas.
Donc, et puis, non seulement cela,
puis htmlmin, puis dire
-o dist/contactus.html et
&&, cela signifie qu'il y a
plus à venir après cela.
Ensuite, je dirai usemin
puis aboutus.html
-d dist —htmlmin
-o dist/aboutus.html.
Donc, c'est le deuxième pour transformer le fichier aboutus.html.
Et puis &&, c'est un long script,
usemin index.html,
nous devons transformer tous les fichiers.
C' est pourquoi j'ai besoin de spécifier chacun explicitement là.
usemin ne prend pas de jokers, donc
c'est la raison pour laquelle je dois spécifier la tenue comme [INAUDIBLE].
Et donc utilisedans index.html
-d dist —htmlmin
-o dist/index.html.
Et puis après cela, j'ai mis une virgule parce que je vais introduire le script suivant,
qui est, appelé build.
Donc, ce script de construction va créer mon dossier de distribution.
Donc, pour créer mon dossier de distribution,
la première chose que je vais faire est npm run clean.
Et puis npm exécutez copyfonts.
Vous avez déjà vu ces deux en action plus tôt,
alors je dirai npm exécuter imagemin pour créer les images minimisées,
puis je dirais npm run usemin.
Et ce script particulier va construire mon dossier
de distribution, dont le contenu peut ensuite être copié sur mon serveur web pour résoudre mon pitch.
Enregistrez les modifications.
Voyons maintenant comment nous construisons le site Web.
À ce stade, pour construire notre site Web et
l'invite de commande est simplement taper npm run build, puis juste exécuter.
Ce script, qui à son tour exécutera un ensemble
de deux scripts, qui à son tour complétera l'ensemble
des tâches qui doivent être exécutées pour préparer mon dossier de distribution.
Alors, allons de l'avant et exécutons cette chose
, puis cela fonctionnera à travers tous les différents scripts là-bas.
Cela prend quelques minutes pour terminer, et une fois terminé
, votre dossier de distribution sera maintenant prêt pour le déploiement sur votre serveur Web.
En allant dans notre éditeur,
vous voyez maintenant que le dossier de distribution est maintenant prêt.
Dans le dossier de distribution, vous verrez les trois fichiers d'index,
et dans le dossier CSS, vous verrez le fichier unique appelé m ain.css,
qui contient tous les CSS Bootstraps, le CSS Bootstraps
et le code CSS que vous avez créé.
Et le dossier JS contiendra le main.js,
qui contient le Bootstrap, le jQuery, et
tout le tas de code JavaScript combinés ensemble dans un seul fichier.
L' image contiendra les images optimisées, et les polices, évidemment,
vous avez vu plus tôt, contiennent les fichiers de polices.
Maintenant, jetons un coup d'oeil à index.html qui a été créé ici.
Donc, quand vous regardez le index.html qui a été créé ici,
vous remarquerez que le tout est littéralement illisible,
parce que lorsque vous avez fait HTML min, il a enlevé tous les
commentaires étrangers, il a enlevé tous les espaces,
puis créé tout cet ensemble en cours d'exécution de caractères.
Pour l'ordinateur, cela ne fait aucune différence car il rendra cette
page Web tout aussi bien.
Pour toi et moi, ça fait une différence, parce qu'on ne peut pas lire ça facilement.
C' est donc ce que la minification provoque à votre fichier HTML.
Jetons un coup d'oeil au main.css.
Lorsque vous regardez le main.css, vous voyez que le tout est croqué
en une seule unité, comme vous allez vers le bas.
Si vous êtes assez courageux, descendez vers le bas et puis vous verrez la,
Vous verrez des heures spécifiquement écrites
classes CSS juste en bas ici.
Juste là, vous reconnaissez le bouton de carrousel, et d'autres choses
, Nabber-dark, et d'autres choses là-bas, donc tout est collé dans.
Donc, c'est ce que la minification, et les coûts.
Main.js, même chose.
Code illisible là.
Leur ordinateur, pas de différence.
Donc, avec cela, notre dossier de distribution est maintenant terminé.
Voyons notre dossier de distribution.
Heureusement, notre serveur léger est déjà en cours d'exécution.
Donc, ce que je vais faire est d'aller dans le navigateur,
puis vérifier le fichier CLM prêt pour l'index dans ce dossier de distribution pour
voir s'il est rendu correctement ou non.
Aller au navigateur, dans ma barre d'adresse, je vais
taper, dist index.html, et
remarquer que ce fichier particulier est le
fichier de distribution qui a été créé, et il contient exactement la même chose et
rend exactement de la même manière que notre page Web originale que nous avons créée.
A propos de, de même, notez que ce aboutus.html provient du
dossier de distribution et cela est rendu exactement comme avant,
ainsi que le fichier contactus.html.
Tout fonctionne parfaitement.
Il ne vous reste donc plus qu'à faire pour déployer votre page Web,
ou votre site Web, c'est simplement de copier le contenu du dossier dist,
puis de le télécharger sur votre serveur Web,
puis votre serveur Web est opérationnel, servant votre site Web.
Avec cela, nous complétons cet exercice.
Dans cet exercice, nous avons vu comment nous pouvons utiliser les
scripts NBM pour construire et déployer notre site Web.
Cela peut être un bon moment pour
vous de faire un commentaire avec message NPM Scripts, partie 2.
[ MUSIQUE]