1
00:00:00,000 --> 00:00:04,535
[MUSIC]

2
00:00:04,535 --> 00:00:10,479
Nous allons maintenant poursuivre notre parcours avec les scripts NPM dans ce prochain exercice.

3
00:00:10,479 --> 00:00:15,182
Ici, nous allons apprendre comment construire

4
00:00:15,182 --> 00:00:20,335
un dossier de distribution qui contient tous les fichiers de

5
00:00:20,335 --> 00:00:27,970
notre projet que nous pouvons simplement déployer sur un serveur Web qui héberge notre site Web.

6
00:00:27,970 --> 00:00:33,050
Donc, compte tenu des fichiers HTML, CSS et JavaScript que

7
00:00:33,050 --> 00:00:39,010
nous avons déjà préparés dans notre dossier de projet, nous allons, à partir de

8
00:00:39,010 --> 00:00:44,895
ceux-ci, les traiter en utilisant les différentes tâches dont nous avons parlé.

9
00:00:44,895 --> 00:00:49,246
Cela fait une modification CSS,

10
00:00:49,246 --> 00:00:54,740
concaténation et uglification JavaScript, minification

11
00:00:54,740 --> 00:00:59,230
et minification HTML,

12
00:00:59,230 --> 00:01:04,895
puis générer un dossier de distribution avec tous les fichiers.

13
00:01:04,895 --> 00:01:09,520
Mais forme essentiellement l'ensemble des fichiers qui peuvent être

14
00:01:09,520 --> 00:01:13,200
déployés sur notre serveur Web qui héberge notre site Web.

15
00:01:15,165 --> 00:01:21,005
Pour vous aider à comprendre ce que nous allons faire dans cet exercice particulier,

16
00:01:22,085 --> 00:01:29,102
comme nous le notons sur notre page index.html, nous avons un ensemble de

17
00:01:29,102 --> 00:01:34,352
fichiers CSS que vous avez inclus ici en utilisant cette balise de lien ici.

18
00:01:34,352 --> 00:01:38,742
De même, vous avez un ensemble de scripts que vous avez inclus en

19
00:01:38,742 --> 00:01:42,847
bas de cette page à l'aide de la balise de script.

20
00:01:42,847 --> 00:01:46,152
Nous avons inclus un ensemble de code JavaScript.

21
00:01:46,152 --> 00:01:51,150
Maintenant, ce que nous allons faire dans cet exercice est de combiner tous ces

22
00:01:51,150 --> 00:01:56,760
fichiers dans un seul fichier JavaScript qui sera livré

23
00:01:56,760 --> 00:02:03,710
de notre serveur Web à un navigateur qui tente de consulter notre site Web.

24
00:02:03,710 --> 00:02:08,480
De cette façon, nous minimisons le nombre de téléchargements que le navigateur doit faire

25
00:02:08,480 --> 00:02:10,930
pour rendre notre site Web.

26
00:02:10,930 --> 00:02:16,960
De même, nous allons combiner tout le code CSS en un seul fichier CSS,

27
00:02:16,960 --> 00:02:18,325
afin qu'il puisse être livré.

28
00:02:18,325 --> 00:02:24,353
Donc, le fichier CSS combiné contiendra tout le code pour

29
00:02:24,353 --> 00:02:31,751
Bootstrap plus Bootstrap social, ainsi que la Font Awesome et

30
00:02:31,751 --> 00:02:36,697
aussi le code CSS que nous avons écrit nous-mêmes.

31
00:02:36,697 --> 00:02:40,351
De même, il y aura un seul fichier JavaScript qui

32
00:02:40,351 --> 00:02:45,297
contiendra le tether jQuery, Bootstrap et le code JavaScript que nous,

33
00:02:45,297 --> 00:02:49,790
nous avons écrit, tous combinés ensemble dans un seul fichier.

34
00:02:49,790 --> 00:02:53,610
Maintenant, c'est ainsi que vous pouvez faire le déploiement de vos pages Web.

35
00:02:53,610 --> 00:02:58,190
Et au lieu d'avoir plusieurs fichiers de ce type là, une façon dont le

36
00:02:59,560 --> 00:03:03,750
déploiement est fait est de les combiner en un seul fichier afin qu'un seul téléchargement

37
00:03:03,750 --> 00:03:08,840
vous obtienne tout le code JavaScript nécessaire pour rendre votre page Web.

38
00:03:08,840 --> 00:03:11,810
Un seul téléchargement vous obtenez tout le code CSS nécessaire pour

39
00:03:11,810 --> 00:03:13,200
rendre votre page web.

40
00:03:13,200 --> 00:03:16,590
Et puis, bien sûr, le fichier HTML lui-même va être téléchargé.

41
00:03:18,530 --> 00:03:23,390
Pour que ces tâches soient terminées, nous devons utiliser

42
00:03:23,390 --> 00:03:29,070
un certain ensemble de modules NPM pour accomplir cela.

43
00:03:29,070 --> 00:03:33,810
Maintenant, ce que nous allons faire est de construire un dossier

44
00:03:33,810 --> 00:03:38,760
dans notre fichier de projets, puis nous appelons ce dossier comme dist, D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
Je nomme juste au hasard ça comme un dossier dist.

46
00:03:42,580 --> 00:03:47,100
Dans mon cas, ce que je veux dire par le dossier dist est un dossier de distribution.

47
00:03:47,100 --> 00:03:51,270
À la fin de l'ensemble des étapes que nous allons faire, ce dossier contiendra tous

48
00:03:51,270 --> 00:03:59,510
les fichiers qui peuvent être simplement copiés sur le serveur Web qui héberge notre site Web.

49
00:03:59,510 --> 00:04:03,930
Pour commencer, ce que nous allons faire est de mettre en place

50
00:04:05,140 --> 00:04:10,960
ici un ensemble de scripts qui nous aideront à automatiser ce processus.

51
00:04:10,960 --> 00:04:13,930
Donc, d'abord, nous pourrions

52
00:04:13,930 --> 00:04:18,850
préparer le dossier de distribution une fois, puis peut-être nous pouvons faire quelques modifications

53
00:04:18,850 --> 00:04:23,310
à nos fichiers source, puis nous pouvons avoir besoin de recompiler notre dossier de distribution.

54
00:04:24,420 --> 00:04:29,370
Première étape, nous mettrons en place le script pour nettoyer ce dossier de distribution

55
00:04:29,370 --> 00:04:33,050
signifiant essentiellement, supprimer le dossier de distribution.

56
00:04:33,050 --> 00:04:37,950
Donc, pour ce faire, je vais prendre l'aide d'un module NPM appelé rimfraf.

57
00:04:37,950 --> 00:04:47,760
Donc, je vais installer npm —save-dev rimfraf.

58
00:04:47,760 --> 00:04:51,920
Ce module nous aide à nettoyer complètement un dossier.

59
00:04:51,920 --> 00:04:56,370
Donc, une fois que j'ai installé ceci, je vais configurer un script

60
00:04:56,370 --> 00:05:01,550
dans mon fichier package.json pour nettoyer tous les fichiers.

61
00:05:01,550 --> 00:05:05,360
Aller au fichier package.json, je vais ajouter, alors

62
00:05:05,360 --> 00:05:11,380
rappelez-vous toujours que le coma est très, très important dans ces scripts.

63
00:05:11,380 --> 00:05:15,200
Parfois, vous rencontrerez des problèmes juste parce que vous avez oublié la virgule.

64
00:05:15,200 --> 00:05:18,230
Assurez-vous donc de mettre ces virgules si nécessaire.

65
00:05:18,230 --> 00:05:21,800
La prochaine description que je vais ajouter est, propre,

66
00:05:23,410 --> 00:05:29,000
évidemment comme son nom l'indique, cela va nettoyer mon dossier.

67
00:05:29,000 --> 00:05:32,510
Donc, je vais dire Rimraf dist.

68
00:05:32,510 --> 00:05:35,610
Ce que cela signifie, c'est que cela, lorsqu'il est exécuté,

69
00:05:35,610 --> 00:05:39,860
va nettoyer le dossier de distribution.

70
00:05:39,860 --> 00:05:42,215
Donc, je vais ajouter cela dans, et

71
00:05:42,215 --> 00:05:46,780
puis je vais mettre cette virgule là parce que je vais ajouter plus de scripts ci-dessous.

72
00:05:46,780 --> 00:05:51,814
Donc, laissez-moi enregistrer les modifications, l'étape suivante que je vais

73
00:05:51,814 --> 00:05:57,048
faire est d'installer un module npm appelé fichiers de copie qui sont utilisés pour copier

74
00:05:57,048 --> 00:06:03,206
certains fichiers de polices de mon dossier de modules de noeud dans mon dossier de distribution.

75
00:06:03,206 --> 00:06:07,430
Ainsi, lorsqu'il est déployé, les fichiers de polices sont également déployés.

76
00:06:07,430 --> 00:06:12,840
Aller au terminal, le prochain paquet que je vais installer est

77
00:06:12,840 --> 00:06:19,860
npm -g, rappelez-vous que cela signifie qu'il devrait être installé globalement.

78
00:06:19,860 --> 00:06:23,900
Puisque je fais cela sur un Mac,

79
00:06:23,900 --> 00:06:30,670
je devrais dire sudo npm -g, si vous le faites sur Windows, vous n'avez pas besoin du sudo.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g installer les fichiers de copie.

81
00:06:42,837 --> 00:06:47,493
Et puis une fois qu'il est installé, ce module NPM m'aidera à copier

82
00:06:47,493 --> 00:06:50,360
des fichiers d'un dossier vers un autre dossier.

83
00:06:51,390 --> 00:06:54,650
Maintenant, laissez-moi vous présenter un autre script NPM ici.

84
00:06:56,110 --> 00:06:59,534
Aller à mon fichier package.json,

85
00:06:59,534 --> 00:07:05,046
je vais créer un nouveau scrip ici copyfonts nom.

86
00:07:05,046 --> 00:07:09,666
Ce script va me permettre de copier tous les fichiers de polices de mon

87
00:07:09,666 --> 00:07:13,650
dossier Font Awesome dans mon dossier de distribution.

88
00:07:13,650 --> 00:07:17,510
Pour que lorsque mon site Web est rendu,

89
00:07:17,510 --> 00:07:21,500
tous ces fichiers de polices peuvent également être envoyés, de sorte que

90
00:07:21,500 --> 00:07:26,110
mes pages Web sont correctement rendues avec les polices Font Awesome en place.

91
00:07:26,110 --> 00:07:30,949
Donc, pour ce faire, je dirai, copier les fichiers -f,

92
00:07:30,949 --> 00:07:36,530
-f signifie simplement qu'il copie les fichiers sans le plein de hiérarchie et

93
00:07:36,530 --> 00:07:40,550
copie simplement les fichiers d'un emplacement à un autre emplacement.

94
00:07:40,550 --> 00:07:43,594
Donc, je vais dire copier les fichiers -f

95
00:07:43,594 --> 00:07:53,594
node_modules/font_awesome/fonts/star

96
00:08:03,367 --> 00:08:09,416
Et dist/fonts,

97
00:08:12,386 --> 00:08:14,970
Et puis enregistrer les changements.

98
00:08:14,970 --> 00:08:20,620
Permettez-moi maintenant d'illustrer comment ces deux scripts npm fonctionnent ensemble.

99
00:08:20,620 --> 00:08:25,605
Aller à ma fenêtre de commande, je vais taper

100
00:08:25,605 --> 00:08:30,300
npm run copyfonts.

101
00:08:30,300 --> 00:08:34,650
Lorsque cela s'exécute, il va créer un dossier

102
00:08:34,650 --> 00:08:38,640
nommé dist dans ma hiérarchie de dossiers de projet.

103
00:08:38,640 --> 00:08:39,880
Et puis à l'intérieur du dist,

104
00:08:39,880 --> 00:08:44,730
il y aura un sous-dossier nommé polices, qui contiendra les fichiers de polices.

105
00:08:44,730 --> 00:08:46,310
Donc, en exécutant ceci,

106
00:08:46,310 --> 00:08:50,480
vous remarquerez immédiatement que le dossier de distribution est créé ici.

107
00:08:50,480 --> 00:08:52,190
Et à l'intérieur du dossier de distribution,

108
00:08:52,190 --> 00:08:55,000
vous pouvez voir qu'il y a un sous-dossier nommé polices.

109
00:08:55,000 --> 00:08:58,760
Et à l'intérieur, tous les fichiers fontawesome ont été copiés.

110
00:09:00,070 --> 00:09:03,700
C' est ainsi que fonctionne le script copyfonts.

111
00:09:04,790 --> 00:09:08,720
Maintenant, je vais vous montrer comment fonctionne le script propre.

112
00:09:08,720 --> 00:09:15,275
Donc, si je tape npm run clean, cela va supprimer ce dossier de distribution.

113
00:09:15,275 --> 00:09:17,805
Donc, quand je l'exécute, alors vous remarqueriez que

114
00:09:17,805 --> 00:09:22,435
le dossier de distribution est supprimé de ma hiérarchie de dossiers de projets.

115
00:09:22,435 --> 00:09:25,055
C' est ainsi que le nettoyage fonctionne.

116
00:09:25,055 --> 00:09:28,075
Maintenant que nous avons ces deux scripts configurés,

117
00:09:28,075 --> 00:09:32,735
nous devons maintenant être en mesure de construire les fichiers de distribution restants.

118
00:09:33,745 --> 00:09:39,034
Dans l'étape suivante, nous allons installer un module de nœud appelé imagemin-cli,

119
00:09:39,034 --> 00:09:43,182
qui est l'interface de ligne de commande du module imagemin.

120
00:09:43,182 --> 00:09:51,032
Le module imaginemin prend une section de fichiers image puis les compresse.

121
00:09:51,032 --> 00:09:57,550
Donc, il empilé la taille de ces fichiers sont minimisés autant que possible,

122
00:09:57,550 --> 00:10:01,650
mais toujours être rendus correctement lorsque notre site Web est rendu.

123
00:10:01,650 --> 00:10:05,060
Ainsi, nous réduirons la quantité de données qui

124
00:10:05,060 --> 00:10:09,870
doivent être téléchargées par le navigateur lorsqu'il a besoin de rendre notre page Web.

125
00:10:09,870 --> 00:10:16,250
Donc, si vous incluez des images dans votre page Web, alors la tâche imagemin est

126
00:10:16,250 --> 00:10:21,950
quelque chose que vous devriez apprendre afin de réduire la taille de vos fichiers image.

127
00:10:21,950 --> 00:10:29,740
Donc, pour ce faire, je vais installer ce module de nœud imagemin en tant que module global.

128
00:10:29,740 --> 00:10:36,145
Donc, je tape sudo, puisque j'utilise un Mac,

129
00:10:36,145 --> 00:10:41,270
npm -g installe imagemin-cli,

130
00:10:41,270 --> 00:10:46,770
puis installe ce module de nœud.

131
00:10:50,730 --> 00:10:56,670
Parfois, sur un Mac, certains des plugins imagemin ne sont pas installés correctement.

132
00:10:56,670 --> 00:11:02,979
C' est pourquoi je donne ces drapeaux supplémentaires à la commande,

133
00:11:02,979 --> 00:11:09,310
ils disent —unsafe-perm=true et —allow-root.

134
00:11:09,310 --> 00:11:12,497
Une fois cette installation terminée,

135
00:11:12,497 --> 00:11:18,183
permettez-moi de mettre en place un script afin de faire ce grossissement de mes images.

136
00:11:18,183 --> 00:11:23,650
Aller à package.json à nouveau, je vais mettre en place le prochain script ici.

137
00:11:23,650 --> 00:11:32,350
Donc, je dirais imagemin est le nom du script que je vais faire,

138
00:11:32,350 --> 00:11:36,610
et je dirais imagemin.

139
00:11:36,610 --> 00:11:43,930
Et puis puisque toutes mes images sont dans le dossier img, je dirais img/*,

140
00:11:43,930 --> 00:11:49,913
puis de nombreux fichiers vont être copiés dans l'image dist.

141
00:11:49,913 --> 00:11:54,997
Ainsi, les fichiers image originaux du dossier image que j'ai seront copiés

142
00:11:54,997 --> 00:12:00,300
dans le dossier de distribution et dans le sous-dossier image là.

143
00:12:00,300 --> 00:12:03,616
Donc cela complète mon imagemin.

144
00:12:03,616 --> 00:12:07,460
Permettez-moi d'aller de l'avant avec la configuration restante, et

145
00:12:07,460 --> 00:12:13,070
ensuite nous verrons comment nous utiliserons les scripts que nous avons déjà mis en place là-bas.

146
00:12:14,260 --> 00:12:19,270
Maintenant que j'ai le dossier de test là-dedans, que je pourrais créer,

147
00:12:19,270 --> 00:12:26,450
je ne veux pas archiver le dossier dist dans mon dépôt Git.

148
00:12:26,450 --> 00:12:31,640
C' est pourquoi dans mon fichier .gitignore, je vais également ajouter dans le dossier dist.

149
00:12:31,640 --> 00:12:37,060
Donc, le dossier dist sera ignoré lorsque je vérifierai dans le dépôt Git.

150
00:12:37,060 --> 00:12:43,342
Donc, sauvegardons les changements, revenant à package.json.

151
00:12:43,342 --> 00:12:49,710
Maintenant, ce que je vais faire est d'installer trois

152
00:12:50,870 --> 00:12:56,080
modules de nœuds différents, qui me permettent de faire les modifications

153
00:12:56,080 --> 00:13:02,550
à mon fichier index.html et les fichiers HTML restants là-bas.

154
00:13:02,550 --> 00:13:09,280
À l'invite de commandes, tapez npm install —save dev.

155
00:13:09,280 --> 00:13:16,498
Je vais installer un module appelé usemin-cli.

156
00:13:16,498 --> 00:13:21,166
Cet usemin-cli est celui qui me permet de faire la transformation à partir de mon

157
00:13:21,166 --> 00:13:22,230
fichier HTML.

158
00:13:22,230 --> 00:13:26,870
Ensuite, concaténez et combinez tous les

159
00:13:26,870 --> 00:13:30,650
fichiers CSS dans un seul fichier CSS, puis mettez-le dans le dossier de distribution.

160
00:13:30,650 --> 00:13:36,700
De même, tous les fichiers JS seront concaténés et placés dans un seul dossier.

161
00:13:36,700 --> 00:13:38,720
Donc, cet usemin-cli est utile.

162
00:13:38,720 --> 00:13:44,005
Mais cet usemin-cli prend l'aide

163
00:13:44,005 --> 00:13:51,051
de trois autres modules de noeud appelés cssmin,

164
00:13:51,051 --> 00:13:56,350
puis uglifyjs, et htmlmin.

165
00:13:56,350 --> 00:14:01,600
J' ai donc besoin d'installer ces trois modules de nœuds en plus d'usemin-cli.

166
00:14:01,600 --> 00:14:04,610
Et je vais installer ceci localement dans mon projet,

167
00:14:04,610 --> 00:14:08,330
c'est pourquoi npm install —save-def.

168
00:14:08,330 --> 00:14:13,910
Donc, de cette façon, ils se souviendront dans mon fichier package.json.

169
00:14:13,910 --> 00:14:15,890
Alors allons de l'avant et terminons l'installation.

170
00:14:17,230 --> 00:14:21,270
Maintenant que j'ai installé l'usemin et

171
00:14:21,270 --> 00:14:26,440
les modules de noeud associés, j'ai besoin de faire une transformation

172
00:14:26,440 --> 00:14:30,695
vers mon fichier index.html et les fichiers HTML restants.

173
00:14:30,695 --> 00:14:35,750
De telle sorte que l'usemin node_module reconnaisse que ce groupe est

174
00:14:35,750 --> 00:14:42,330
un tas de fichiers CSS qui doivent être compressés, calculés et vérifiés.

175
00:14:42,330 --> 00:14:47,730
De même, il s'agit du groupe de fichiers JavaScript qui doivent être uglyfiés

176
00:14:47,730 --> 00:14:51,130
, combinés et concaténés ensemble.

177
00:14:51,130 --> 00:14:54,480
Donc, pour aider le paquet usemin fonctionne,

178
00:14:54,480 --> 00:15:00,430
j'ai besoin d'ajouter un peu de code dans mon fichier index.html.

179
00:15:00,430 --> 00:15:07,942
Alors juste avant le premier lien là-bas,

180
00:15:07,942 --> 00:15:14,747
je vais ajouter une marque ici,

181
00:15:14,747 --> 00:15:21,100
qui dit ! — build:css.

182
00:15:21,100 --> 00:15:25,621
Maintenant, ça ! —, comme vous le reconnaîtrez,

183
00:15:25,621 --> 00:15:29,640
est un commentaire du point de vue html.

184
00:15:29,640 --> 00:15:33,405
Donc, à l'intérieur de ce commentaire, je vais inclure que cette ligne particulière

185
00:15:33,405 --> 00:15:38,480
va être utilisée par le menu d'utilisation afin de reconnaître le bloc de

186
00:15:38,480 --> 00:15:43,370
code qui spécifie tous les fichiers CSS qui doivent être transférés.

187
00:15:43,370 --> 00:15:49,743
Donc, je dis build.css, puis je vais spécifier

188
00:15:49,743 --> 00:15:54,770
le nom de fichier comme css/main.css.

189
00:15:54,770 --> 00:15:57,160
Il s'agit de la syntaxe de spécification.

190
00:15:57,160 --> 00:16:04,080
Ce que cela signifie, c'est que ces blocs de fichiers CSS seront tous combinés ensemble,

191
00:16:04,080 --> 00:16:10,510
puis concaténés, minifiés, puis mis dans ce fichier appelé main.css.

192
00:16:10,510 --> 00:16:15,723
Et puis ce bloc sera identifié de l'autre côté en disant,

193
00:16:21,873 --> 00:16:27,090
Tiret —, ok, désolé.

194
00:16:27,090 --> 00:16:34,210
J' ai oublié d'inclure un double tiret à la fin.

195
00:16:34,210 --> 00:16:37,050
C' est la raison pour laquelle cela ne tournait pas les couleurs.

196
00:16:37,050 --> 00:16:41,780
Donc, parfois, vous êtes heureux que votre

197
00:16:41,780 --> 00:16:46,540
éditeur signale ces erreurs potentielles que vous pourriez commettre.

198
00:16:46,540 --> 00:16:51,779
Donc, juste là, je dirais endbuild et

199
00:16:51,779 --> 00:16:56,206
puis — crochet droit là.

200
00:16:56,206 --> 00:17:00,904
Maintenant, peu importe ce qui se trouve entre

201
00:17:00,904 --> 00:17:06,708
cette construction et endbuild, ce groupe sera traité comme une unité pour

202
00:17:06,708 --> 00:17:12,252
être combiné par notre module npm usemin.

203
00:17:12,252 --> 00:17:14,890
Regardez la syntaxe utilisée par le module usemin.

204
00:17:16,230 --> 00:17:22,020
J' ai besoin de faire la même transformation en contactus.html et aboutus.html aussi.

205
00:17:22,020 --> 00:17:26,759
Donc je vais copier celui-ci

206
00:17:26,759 --> 00:17:31,306
ici le paresseux que je suis.

207
00:17:31,306 --> 00:17:35,149
Je vais simplement copier et

208
00:17:35,149 --> 00:17:39,866
coller dans contactus.html

209
00:17:39,866 --> 00:17:44,770
, puis aussi aboutus.html là.

210
00:17:44,770 --> 00:17:50,263
De même, en revenant au index.html,

211
00:17:50,263 --> 00:17:56,477
je vais copier cette inbuild, puis aussi le copier dans les

212
00:17:56,477 --> 00:18:01,840
données contactus.html et aboutus.html.

213
00:18:03,530 --> 00:18:08,990
Ok, sauvegardons les modifications dans tous les fichiers.

214
00:18:08,990 --> 00:18:12,190
Ensuite, revenez à index.html.

215
00:18:12,190 --> 00:18:16,670
Je vais répéter la même chose en bas pour mes

216
00:18:16,670 --> 00:18:22,220
scripts JavaScript que j'y ai inclus.

217
00:18:22,220 --> 00:18:26,730
Donc, aller en bas ici,

218
00:18:26,730 --> 00:18:30,026
ce que je dois faire ici,

219
00:18:30,026 --> 00:18:34,883
est de spécifier < ! — construire js,

220
00:18:34,883 --> 00:18:39,225
et je dirai js/main.js.

221
00:18:41,216 --> 00:18:43,130
Double trait d'union, barre oblique.

222
00:18:43,130 --> 00:18:47,781
Donc c'est le début du bloc et ensuite la fin est spécifiée par,

223
00:18:51,540 --> 00:18:55,034
Build, ok ?

224
00:18:55,034 --> 00:19:00,782
Donc, avec ces changements, maintenant, mon fichier index.html est prêt,

225
00:19:00,782 --> 00:19:07,899
et je dois faire la même transformation en contactus.html en bas.

226
00:19:14,090 --> 00:19:18,715
Et aboutus.html aussi en bas.

227
00:19:25,340 --> 00:19:29,505
De même, cette enbuild copiée dans. Dans

228
00:19:32,892 --> 00:19:38,649
contactus.html et aboutus.html, puis enregistrez tous les fichiers.

229
00:19:40,130 --> 00:19:44,550
Et cela prépare nos fichiers HTML pour

230
00:19:44,550 --> 00:19:48,940
être transformés pour préparer le dossier de distribution.

231
00:19:48,940 --> 00:19:53,540
Ces fichiers resteront en tant que tels, mais les fichiers transformés seront placés dans

232
00:19:53,540 --> 00:19:58,380
le dossier de distribution créé à partir de ces fichiers.

233
00:19:58,380 --> 00:20:02,948
Maintenant, une fois que nous avons terminé cela, mettons en place quelques scripts.

234
00:20:02,948 --> 00:20:07,875
Aller à package.json, je vais configurer mon prochain script appelé usemin.

235
00:20:11,930 --> 00:20:15,890
Et puis cela dit usemin,

236
00:20:19,977 --> 00:20:24,671
contactus.html -d dist, c'est la syntaxe pour

237
00:20:24,671 --> 00:20:29,366
spécifier -d dist, ce qui signifie que la destination de

238
00:20:29,366 --> 00:20:32,507
ce dossier dist de distribution.

239
00:20:32,507 --> 00:20:39,110
Et puis je dirais htmlmin, cela va aussi minimiser le fichier HTML.

240
00:20:39,110 --> 00:20:43,300
Donc, il va supprimer tous les espaces et commentaires superflus du fichier HTML.

241
00:20:43,300 --> 00:20:45,110
Mais ils le compriment pour

242
00:20:45,110 --> 00:20:48,350
qu'il contienne le nombre minimum de caractères là-bas.

243
00:20:48,350 --> 00:20:55,165
Nous allons examiner le résultat après avoir terminé et faire la transformation là-bas.

244
00:20:55,165 --> 00:21:00,528
Donc, et puis, non seulement cela,

245
00:21:00,528 --> 00:21:05,509
puis htmlmin, puis dire

246
00:21:05,509 --> 00:21:10,684
-o dist/contactus.html et

247
00:21:10,684 --> 00:21:15,664
&&, cela signifie qu'il y a

248
00:21:15,664 --> 00:21:19,970
plus à venir après cela.

249
00:21:19,970 --> 00:21:25,730
Ensuite, je dirai usemin

250
00:21:25,730 --> 00:21:31,171
puis aboutus.html

251
00:21:31,171 --> 00:21:36,932
-d dist —htmlmin

252
00:21:36,932 --> 00:21:45,560
-o dist/aboutus.html.

253
00:21:45,560 --> 00:21:50,078
Donc, c'est le deuxième pour transformer le fichier aboutus.html.

254
00:21:50,078 --> 00:21:55,135
Et puis &&, c'est un long script,

255
00:21:55,135 --> 00:21:58,139
usemin index.html,

256
00:21:58,139 --> 00:22:02,890
nous devons transformer tous les fichiers.

257
00:22:02,890 --> 00:22:08,150
C' est pourquoi j'ai besoin de spécifier chacun explicitement là.

258
00:22:08,150 --> 00:22:11,910
usemin ne prend pas de jokers, donc

259
00:22:11,910 --> 00:22:16,080
c'est la raison pour laquelle je dois spécifier la tenue comme [INAUDIBLE].

260
00:22:16,080 --> 00:22:21,365
Et donc utilisedans index.html

261
00:22:21,365 --> 00:22:27,426
-d dist —htmlmin

262
00:22:27,426 --> 00:22:34,160
-o dist/index.html.

263
00:22:34,160 --> 00:22:40,656
Et puis après cela, j'ai mis une virgule parce que je vais introduire le script suivant,

264
00:22:40,656 --> 00:22:45,940
qui est, appelé build.

265
00:22:45,940 --> 00:22:50,490
Donc, ce script de construction va créer mon dossier de distribution.

266
00:22:50,490 --> 00:22:54,159
Donc, pour créer mon dossier de distribution,

267
00:22:54,159 --> 00:22:59,328
la première chose que je vais faire est npm run clean.

268
00:22:59,328 --> 00:23:07,090
Et puis npm exécutez copyfonts.

269
00:23:07,090 --> 00:23:12,347
Vous avez déjà vu ces deux en action plus tôt,

270
00:23:12,347 --> 00:23:18,950
alors je dirai npm exécuter imagemin pour créer les images minimisées,

271
00:23:18,950 --> 00:23:23,220
puis je dirais npm run usemin.

272
00:23:23,220 --> 00:23:29,257
Et ce script particulier va construire mon dossier

273
00:23:29,257 --> 00:23:36,171
de distribution, dont le contenu peut ensuite être copié sur mon serveur web pour résoudre mon pitch.

274
00:23:36,171 --> 00:23:39,238
Enregistrez les modifications.

275
00:23:39,238 --> 00:23:45,837
Voyons maintenant comment nous construisons le site Web.

276
00:23:45,837 --> 00:23:49,431
À ce stade, pour construire notre site Web et

277
00:23:49,431 --> 00:23:55,950
l'invite de commande est simplement taper npm run build, puis juste exécuter.

278
00:23:55,950 --> 00:24:00,430
Ce script, qui à son tour exécutera un ensemble

279
00:24:00,430 --> 00:24:05,440
de deux scripts, qui à son tour complétera l'ensemble

280
00:24:05,440 --> 00:24:10,870
des tâches qui doivent être exécutées pour préparer mon dossier de distribution.

281
00:24:10,870 --> 00:24:13,690
Alors, allons de l'avant et exécutons cette chose

282
00:24:13,690 --> 00:24:18,520
, puis cela fonctionnera à travers tous les différents scripts là-bas.

283
00:24:18,520 --> 00:24:23,320
Cela prend quelques minutes pour terminer, et une fois terminé

284
00:24:23,320 --> 00:24:29,838
, votre dossier de distribution sera maintenant prêt pour le déploiement sur votre serveur Web.

285
00:24:29,838 --> 00:24:34,950
En allant dans notre éditeur,

286
00:24:34,950 --> 00:24:38,750
vous voyez maintenant que le dossier de distribution est maintenant prêt.

287
00:24:38,750 --> 00:24:44,020
Dans le dossier de distribution, vous verrez les trois fichiers d'index,

288
00:24:44,020 --> 00:24:48,580
et dans le dossier CSS, vous verrez le fichier unique appelé m ain.css,

289
00:24:48,580 --> 00:24:55,050
qui contient tous les CSS Bootstraps, le CSS Bootstraps

290
00:24:55,050 --> 00:24:57,660
et le code CSS que vous avez créé.

291
00:24:58,690 --> 00:25:01,863
Et le dossier JS contiendra le main.js,

292
00:25:01,863 --> 00:25:05,287
qui contient le Bootstrap, le jQuery, et

293
00:25:05,287 --> 00:25:10,905
tout le tas de code JavaScript combinés ensemble dans un seul fichier.

294
00:25:10,905 --> 00:25:15,638
L' image contiendra les images optimisées, et les polices, évidemment,

295
00:25:15,638 --> 00:25:18,730
vous avez vu plus tôt, contiennent les fichiers de polices.

296
00:25:18,730 --> 00:25:24,030
Maintenant, jetons un coup d'oeil à index.html qui a été créé ici.

297
00:25:24,030 --> 00:25:27,290
Donc, quand vous regardez le index.html qui a été créé ici,

298
00:25:27,290 --> 00:25:31,120
vous remarquerez que le tout est littéralement illisible,

299
00:25:32,530 --> 00:25:37,850
parce que lorsque vous avez fait HTML min, il a enlevé tous les

300
00:25:39,500 --> 00:25:42,800
commentaires étrangers, il a enlevé tous les espaces,

301
00:25:42,800 --> 00:25:48,100
puis créé tout cet ensemble en cours d'exécution de caractères.

302
00:25:49,540 --> 00:25:52,800
Pour l'ordinateur, cela ne fait aucune différence car il rendra cette

303
00:25:52,800 --> 00:25:55,190
page Web tout aussi bien.

304
00:25:55,190 --> 00:25:58,727
Pour toi et moi, ça fait une différence, parce qu'on ne peut pas lire ça facilement.

305
00:26:01,038 --> 00:26:05,620
C' est donc ce que la minification provoque à votre fichier HTML.

306
00:26:05,620 --> 00:26:08,180
Jetons un coup d'oeil au main.css.

307
00:26:08,180 --> 00:26:12,200
Lorsque vous regardez le main.css, vous voyez que le tout est croqué

308
00:26:12,200 --> 00:26:15,090
en une seule unité, comme vous allez vers le bas.

309
00:26:16,300 --> 00:26:20,808
Si vous êtes assez courageux, descendez vers le bas et puis vous verrez la,

310
00:26:24,793 --> 00:26:29,683
Vous verrez des heures spécifiquement écrites

311
00:26:29,683 --> 00:26:34,870
classes CSS juste en bas ici.

312
00:26:37,220 --> 00:26:42,801
Juste là, vous reconnaissez le bouton de carrousel, et d'autres choses

313
00:26:42,801 --> 00:26:49,693
, Nabber-dark, et d'autres choses là-bas, donc tout est collé dans.

314
00:26:49,693 --> 00:26:52,896
Donc, c'est ce que la minification, et les coûts.

315
00:26:52,896 --> 00:26:55,530
Main.js, même chose.

316
00:26:55,530 --> 00:26:56,545
Code illisible là.

317
00:26:56,545 --> 00:26:59,440
Leur ordinateur, pas de différence.

318
00:26:59,440 --> 00:27:03,580
Donc, avec cela, notre dossier de distribution est maintenant terminé.

319
00:27:03,580 --> 00:27:06,250
Voyons notre dossier de distribution.

320
00:27:06,250 --> 00:27:08,669
Heureusement, notre serveur léger est déjà en cours d'exécution.

321
00:27:08,669 --> 00:27:12,014
Donc, ce que je vais faire est d'aller dans le navigateur,

322
00:27:12,014 --> 00:27:16,867
puis vérifier le fichier CLM prêt pour l'index dans ce dossier de distribution pour

323
00:27:16,867 --> 00:27:20,507
voir s'il est rendu correctement ou non.

324
00:27:20,507 --> 00:27:25,870
Aller au navigateur, dans ma barre d'adresse, je vais

325
00:27:25,870 --> 00:27:31,440
taper, dist index.html, et

326
00:27:31,440 --> 00:27:36,920
remarquer que ce fichier particulier est le

327
00:27:36,920 --> 00:27:40,680
fichier de distribution qui a été créé, et il contient exactement la même chose et

328
00:27:40,680 --> 00:27:47,370
rend exactement de la même manière que notre page Web originale que nous avons créée.

329
00:27:47,370 --> 00:27:52,230
A propos de, de même, notez que ce aboutus.html provient du

330
00:27:52,230 --> 00:27:57,490
dossier de distribution et cela est rendu exactement comme avant,

331
00:27:57,490 --> 00:28:01,350
ainsi que le fichier contactus.html.

332
00:28:01,350 --> 00:28:03,360
Tout fonctionne parfaitement.

333
00:28:03,360 --> 00:28:08,970
Il ne vous reste donc plus qu'à faire pour déployer votre page Web,

334
00:28:08,970 --> 00:28:15,530
ou votre site Web, c'est simplement de copier le contenu du dossier dist,

335
00:28:15,530 --> 00:28:19,460
puis de le télécharger sur votre serveur Web,

336
00:28:19,460 --> 00:28:24,830
puis votre serveur Web est opérationnel, servant votre site Web.

337
00:28:26,080 --> 00:28:28,740
Avec cela, nous complétons cet exercice.

338
00:28:28,740 --> 00:28:33,620
Dans cet exercice, nous avons vu comment nous pouvons utiliser les

339
00:28:33,620 --> 00:28:38,636
scripts NBM pour construire et déployer notre site Web.

340
00:28:38,636 --> 00:28:40,610
Cela peut être un bon moment pour

341
00:28:40,610 --> 00:28:45,223
vous de faire un commentaire avec message NPM Scripts, partie 2.

342
00:28:45,223 --> 00:28:50,815
[ MUSIQUE]