1
00:00:03,510 --> 00:00:06,510
Continuons notre grognement.

2
00:00:06,510 --> 00:00:11,175
Comme nous l'avons fait dans la deuxième partie de l'exercice de scripts NPM,

3
00:00:11,175 --> 00:00:14,660
dans cette deuxième partie de cet exercice de grognement,

4
00:00:14,660 --> 00:00:17,080
nous allons configurer exactement les mêmes tâches.

5
00:00:17,080 --> 00:00:20,475
Nous allons nettoyer le dossier de distribution,

6
00:00:20,475 --> 00:00:23,175
copier les polices dans le dossier de distribution,

7
00:00:23,175 --> 00:00:29,780
puis nous allons également faire la minification de nos images à l'aide d'imagemin,

8
00:00:29,780 --> 00:00:37,530
puis utiliser la tâche usemin pour construire et préparer notre dossier de distribution.

9
00:00:37,530 --> 00:00:40,420
Poursuivant notre exercice,

10
00:00:40,420 --> 00:00:43,590
je vais installer quelques modules de grognement.

11
00:00:43,590 --> 00:00:49,990
Donc, installons NPM, install-grunt-contrib-copy.

12
00:00:51,110 --> 00:01:00,665
Ceci est utilisé pour copier les fichiers, puis grunt-contrib-clean,

13
00:01:00,665 --> 00:01:04,575
et moins save-dev.

14
00:01:04,575 --> 00:01:06,655
Et une fois ces

15
00:01:06,655 --> 00:01:10,595
deux-là installés, nous allons de l'avant et confier les tâches correspondantes.

16
00:01:10,595 --> 00:01:12,800
Pour accéder à votre fichier grunt,

17
00:01:12,800 --> 00:01:19,770
nous ajouterons la configuration à la fois pour la copie et les tâches propres.

18
00:01:19,770 --> 00:01:22,895
Donc, en commençant par la virgule,

19
00:01:22,895 --> 00:01:26,295
rappelez-vous toujours de ne pas oublier la virgule.

20
00:01:26,295 --> 00:01:30,360
Ça reviendra te mordre aux mauvais moments si tu fais ça.

21
00:01:30,360 --> 00:01:32,245
Nous allons donc configurer la tâche de copie.

22
00:01:32,245 --> 00:01:38,180
Pour la copie, usemin s'attend à ce que nous

23
00:01:38,180 --> 00:01:41,110
conservions également nos fichiers HTML copiés dans le dossier de distribution

24
00:01:41,110 --> 00:01:44,760
afin qu'il puisse faire la manipulation sur cela.

25
00:01:44,760 --> 00:01:47,250
Donc, dans ce cas,

26
00:01:47,250 --> 00:01:48,630
nous allons d'abord copier

27
00:01:48,630 --> 00:01:53,440
les fichiers HTML de notre dossier de projet dans le dossier de distribution.

28
00:01:53,440 --> 00:01:55,330
Donc, pour faire la copie,

29
00:01:55,330 --> 00:02:01,535
je vais configurer la partie HTML de celui-ci.

30
00:02:01,535 --> 00:02:04,740
Donc, c'est là que nous allons utiliser une partie de

31
00:02:04,740 --> 00:02:09,920
la syntaxe grognement pour spécifier les fichiers qui doivent être copiés.

32
00:02:09,920 --> 00:02:19,880
Donc, je dis des fichiers et spécifie également les

33
00:02:19,880 --> 00:02:23,560
accolades droite, gauche et droite là donc dans ce,

34
00:02:23,560 --> 00:02:27,855
j'ai besoin de spécifier maintenant une certaine configuration.

35
00:02:27,855 --> 00:02:37,600
Donc, je dirais, développez true et dot true, puis CWD,

36
00:02:37,600 --> 00:02:42,015
le répertoire de travail actuel est dot slash

37
00:02:42,015 --> 00:02:44,440
, et puis après cela,

38
00:02:44,440 --> 00:02:51,730
nous allons configurer le suivant qui est SRC, les fichiers

39
00:02:51,730 --> 00:02:56,690
source, puis les fichiers source sont star.html,

40
00:02:56,690 --> 00:02:59,325
tous les fichiers HTML,

41
00:02:59,325 --> 00:03:05,850
et puis nous allons les copier dans le dossier dist.

42
00:03:05,850 --> 00:03:10,135
C' est pourquoi la destination est définie sur le dossier de distribution ici.

43
00:03:10,135 --> 00:03:12,385
Donc, avec cette configuration,

44
00:03:12,385 --> 00:03:18,880
ma tâche de copie copiera tous les fichiers HTML dans le dossier de distribution.

45
00:03:18,880 --> 00:03:22,285
Maintenant, avec cela, nous devons également copier les polices.

46
00:03:22,285 --> 00:03:26,200
Donc, je vais mettre en place le second pour les polices.

47
00:03:26,200 --> 00:03:31,090
Donc, je spécifie des polices, puis ici aussi j'ai besoin de spécifier

48
00:03:31,090 --> 00:03:37,500
les fichiers qui doivent être copiés et donc nous disons les fichiers,

49
00:03:37,500 --> 00:03:41,780
puis ce sont

50
00:03:41,780 --> 00:03:47,465
quelques paramètres de configuration que vous devez configurer pour la tâche de copie.

51
00:03:47,465 --> 00:03:49,225
Maintenant, si vous avez besoin de comprendre,

52
00:03:49,225 --> 00:03:54,510
alors en lisant la documentation pour le plugin Grunt correspondant,

53
00:03:54,510 --> 00:03:57,650
vous serez en mesure de comprendre cela et ainsi ou vous pouvez

54
00:03:57,650 --> 00:04:00,960
simplement suivre l'exemple que je donne ici.

55
00:04:00,960 --> 00:04:05,350
Donc, point vrai, puis CWD,

56
00:04:05,350 --> 00:04:14,780
le répertoire de travail actuel est des modules de noeud et la police génial.

57
00:04:14,780 --> 00:04:18,295
C' est donc là que je vais copier les fichiers,

58
00:04:18,295 --> 00:04:27,180
puis la source des fichiers est le fontsstar.star, ce

59
00:04:27,180 --> 00:04:30,310
sont les fichiers que j'ai besoin de copier,

60
00:04:30,310 --> 00:04:38,370
et la destination est le dossier de distribution.

61
00:04:38,370 --> 00:04:42,050
Donc, avec cela, j'ai configuré ma tâche de copie pour copier à

62
00:04:42,050 --> 00:04:47,490
la fois les fichiers HTML et les fichiers de polices dans mon dossier de distribution.

63
00:04:47,490 --> 00:04:52,370
Maintenant, la tâche suivante que je vais mettre en place est la tâche propre.

64
00:04:52,370 --> 00:04:56,290
Donc, laissez-moi configurer la tâche propre.

65
00:04:56,540 --> 00:05:05,825
Pour la tâche propre, je vais configurer la construction,

66
00:05:05,825 --> 00:05:13,460
puis je dirai que la source est le dossier de distribution.

67
00:05:13,460 --> 00:05:19,660
Donc, en spécifiant essentiellement que le dossier de distribution doit être nettoyé.

68
00:05:19,830 --> 00:05:27,835
Donc, maintenant, nous avons configuré la copie et les tâches propres alors sauvegardons les modifications.

69
00:05:27,835 --> 00:05:31,530
La tâche suivante que je vais configurer est la tâche imagemin.

70
00:05:31,530 --> 00:05:40,030
C' est ce que nous allons utiliser pour compresser et copier les images dans le dossier de distribution.

71
00:05:40,030 --> 00:05:44,200
Pour commencer avec la tâche imagemin, la première étape,

72
00:05:44,200 --> 00:05:49,910
installez le plugin grunt correspondant.

73
00:05:49,910 --> 00:06:00,520
Donc, grunt-contrib-imagemin, moins save.dev.

74
00:06:00,520 --> 00:06:03,470
Et une fois que cela est installé,

75
00:06:03,470 --> 00:06:07,330
nous allons de l'avant et configurer la tâche imagemin correspondante.

76
00:06:07,330 --> 00:06:12,015
Aller à notre fichier grunt après la configuration de la tâche propre,

77
00:06:12,015 --> 00:06:15,620
je vais configurer la tâche imagemin.

78
00:06:15,620 --> 00:06:18,050
Donc, je vais dire imagemin,

79
00:06:19,460 --> 00:06:22,055
puis juste là,

80
00:06:22,055 --> 00:06:26,225
je vais spécifier dynamique,

81
00:06:26,225 --> 00:06:30,950
et à l'intérieur je vais spécifier les fichiers afin que vous puissiez

82
00:06:30,950 --> 00:06:36,010
voir que la spécification du fichier serait similaire.

83
00:06:36,010 --> 00:06:39,130
Je dirais, développez true,

84
00:06:39,130 --> 00:06:46,830
alors CWD est le répertoire actuel.

85
00:06:49,680 --> 00:06:58,350
Ensuite, la source des fichiers est imagestar.

86
00:07:00,840 --> 00:07:05,405
puis entre parenthèses, entre accolades,

87
00:07:05,405 --> 00:07:12,910
je spécifie PNG, GIF et JPG.

88
00:07:12,910 --> 00:07:17,000
Donc, essentiellement, vous pouvez voir le modèle global de fichier ici.

89
00:07:17,000 --> 00:07:18,640
Donc, il dit tous les

90
00:07:18,640 --> 00:07:21,610
fichiers PNG, GIF ou JPG qui correspond à ce modèle, puis

91
00:07:21,610 --> 00:07:25,755
commencer point signifiant tous les fichiers de ce modèle,

92
00:07:25,755 --> 00:07:29,280
et la source, et la destination, que

93
00:07:29,280 --> 00:07:34,310
j'ai défini comme le dossier de distribution.

94
00:07:34,310 --> 00:07:37,790
Donc, avec cela, nous avons configuré notre

95
00:07:37,790 --> 00:07:39,425
tâche de copie, nettoyage et imagemin.

96
00:07:39,425 --> 00:07:46,670
Configurez une tâche ici appelée build.

97
00:07:46,670 --> 00:07:49,365
Donc, je dirais, enregistrer la tâche,

98
00:07:49,365 --> 00:07:55,700
grossir la tâche de registre et ensuite je nommerai la tâche en tant que construction,

99
00:07:55,700 --> 00:07:57,695
et puis à l'intérieur de cela,

100
00:07:57,695 --> 00:08:03,160
nous allons spécifier les étapes de mise en place à faire par la tâche de construction.

101
00:08:03,160 --> 00:08:09,105
Donc, juste là, point-virgule, puis là,

102
00:08:09,105 --> 00:08:13,685
je vais spécifier les trois tâches dans l'ordre où elles doivent être effectuées.

103
00:08:13,685 --> 00:08:16,650
D' abord, je dirai, propre.

104
00:08:16,650 --> 00:08:19,420
Donc, nous allons nettoyer le dossier de distribution

105
00:08:19,420 --> 00:08:22,340
, puis commencer à reconstruire le dossier de distribution.

106
00:08:22,340 --> 00:08:27,320
Nettoyer, alors la tâche suivante serait

107
00:08:27,320 --> 00:08:36,980
copier et ensuite je ferais, imagemin.

108
00:08:37,380 --> 00:08:41,340
Donc, ces trois tâches à configurer ici.

109
00:08:41,340 --> 00:08:43,910
Donc, avec cela, laissez-moi enregistrer les changements.

110
00:08:43,910 --> 00:08:46,590
Voyons comment ça marche.

111
00:08:46,590 --> 00:08:50,280
Maintenant, en allant à l'invite si je tape,

112
00:08:50,280 --> 00:08:57,955
grogne et construit, vous verrez qu'il va d'abord faire le nettoyage,

113
00:08:57,955 --> 00:09:01,550
puis faire la copie et faire la tâche imagemin.

114
00:09:01,550 --> 00:09:05,600
Donc, il fait tous ces trois et alors vous verrez immédiatement que

115
00:09:05,600 --> 00:09:11,810
le dossier de distribution est construit dans mon dossier de projet ici.

116
00:09:11,810 --> 00:09:15,200
Et dans le dossier de distribution, vous pouvez voir que les polices ont été copiées,

117
00:09:15,200 --> 00:09:16,590
les images ont été copiées et

118
00:09:16,590 --> 00:09:20,665
les trois fichiers HTML ont été copiés dans le dossier de distribution.

119
00:09:20,665 --> 00:09:22,350
Tu n'es qu'à mi-chemin.

120
00:09:22,350 --> 00:09:29,370
Maintenant, nous devons être en mesure de traiter ces fichiers en utilisant le plugin usemin.

121
00:09:29,370 --> 00:09:31,675
Alors, allons-y ensuite.

122
00:09:31,675 --> 00:09:35,140
Maintenant, je vais installer quelques modules NPM

123
00:09:35,140 --> 00:09:38,555
qui sont utiles pour construire le dossier de distribution.

124
00:09:38,555 --> 00:09:42,225
Donc, pour ce faire, je dirais installer NPM.

125
00:09:42,225 --> 00:09:47,120
Je peux spécifier un ensemble de modules ici donc,

126
00:09:47,120 --> 00:09:52,300
je dirais, grunt-contrib-concat.

127
00:09:52,300 --> 00:10:01,000
Donc, ceci est utilisé pour concaténer des fichiers, puis grunt-contrib-cssmin,

128
00:10:01,000 --> 00:10:13,512
grunt-contrib-htmlmin, puis dire, grunt-contrib-uglify.

129
00:10:13,512 --> 00:10:18,240
Puis grunt-filerev.

130
00:10:18,240 --> 00:10:21,910
Vous verrez la raison de l'utilisation de filerev dans un court laps de temps,

131
00:10:21,910 --> 00:10:32,925
puis grunt-usemin, et enregistrez def, puis,

132
00:10:35,475 --> 00:10:40,050
installez tous ces modules grunt.

133
00:10:40,050 --> 00:10:42,205
Une fois que tous ont été installés,

134
00:10:42,205 --> 00:10:44,305
l'étape suivante consiste à aller et configurer,

135
00:10:44,305 --> 00:10:47,625
usemin tâche qui utilise également

136
00:10:47,625 --> 00:10:55,090
les tâches cssmin Uglify Concat pour accomplir la construction du dossier de distribution.

137
00:10:55,090 --> 00:10:59,140
Maintenant, continuons à configurer la tâche usemin.

138
00:10:59,140 --> 00:11:03,750
Donc, revenant au fichier grognement après imagemin,

139
00:11:03,750 --> 00:11:10,950
je vais ajouter à la tâche suivante pour usemin pour travailler avec le grognement.

140
00:11:10,950 --> 00:11:17,165
La première tâche que j'ai besoin de configurer est appelée UseMinPrepare.

141
00:11:19,145 --> 00:11:25,175
Cette tâche UseMinPrepare prépare les fichiers, puis configure également

142
00:11:25,175 --> 00:11:32,655
les plugins ConCache CSS min et Uglify et fichier ref,

143
00:11:32,655 --> 00:11:35,070
afin qu'ils puissent faire leur travail correctement.

144
00:11:35,070 --> 00:11:36,915
Donc, c'est la raison de l'UseMinPrepare.

145
00:11:36,915 --> 00:11:42,220
Donc, c'est ainsi que le plugin d'utilisation de subvention a été conçu.

146
00:11:42,220 --> 00:11:48,340
Un peu différent de la façon dont l'usemin que nous avons utilisé avec les scripts de fin de jeu se réveille.

147
00:11:48,340 --> 00:11:50,295
Donc, dans UseMinPrepare,

148
00:11:50,295 --> 00:11:59,590
juste un nom aléatoire que je vais utiliser, puis dire destination est dist.

149
00:11:59,590 --> 00:12:08,730
Et puis je spécifierais la source comme tous les fichiers html ici.

150
00:12:08,730 --> 00:12:13,605
Donc, je dirais contactus.html

151
00:12:14,875 --> 00:12:23,550
, aboutus.html et index.html.

152
00:12:23,550 --> 00:12:26,915
Donc, tous ces trois fichiers doivent être traités.

153
00:12:26,915 --> 00:12:30,765
La partie suivante de cette configuration d'usemin, la configuration

154
00:12:30,765 --> 00:12:37,735
UseMinPrepare est l'endroit où je spécifie les options.

155
00:12:38,115 --> 00:12:43,245
C' est quelque chose que j'ai compris par essai et erreur.

156
00:12:44,995 --> 00:12:47,395
Il suffit de suivre les étapes.

157
00:12:47,395 --> 00:12:48,845
J' ai donc besoin de configurer

158
00:12:48,845 --> 00:12:54,125
quelques choses ici à l'intérieur où j'ai besoin de configurer quelque chose appelé Flow.

159
00:12:54,125 --> 00:13:00,695
Et puis à l'intérieur, j'ai besoin de configurer une autre partie appelée Steps,

160
00:13:00,695 --> 00:13:07,875
et puis ici je spécifie les étapes ici, puis dis cssmin,

161
00:13:07,915 --> 00:13:14,645
et puis je dirai que js est uglify.

162
00:13:14,645 --> 00:13:21,515
Donc, c'est quelque chose que je dois spécifier ici et puis après cela, je dis post,

163
00:13:24,405 --> 00:13:29,695
et ici je peux permettre à cela de fournir

164
00:13:29,695 --> 00:13:36,475
quelques options pour leurs tâches spécifiques que j'ai configurées.

165
00:13:36,475 --> 00:13:40,175
Donc, je fournit quelques options supplémentaires pour css.

166
00:13:40,175 --> 00:13:44,540
Donc, qui est fourni à l'intérieur du post ici.

167
00:13:44,540 --> 00:13:49,485
Maintenant encore une fois, c'est ainsi que la configuration doit être faite.

168
00:13:49,485 --> 00:13:52,695
Donc, nous venons de l'apprendre en regardant la documentation là-bas.

169
00:13:52,695 --> 00:13:55,390
Donc, ici à l'intérieur du post css,

170
00:13:55,390 --> 00:13:59,275
je spécifierais un nom comme cssmin.

171
00:13:59,275 --> 00:14:01,450
Jusqu' à présent, c'est ici la tâche de cssmin.

172
00:14:01,450 --> 00:14:07,974
Je dirais CreateConfig :

173
00:14:08,775 --> 00:14:17,005
bloc de contexte de fonction, puis à l'intérieur de ces fonctions,

174
00:14:17,005 --> 00:14:19,955
je dois fournir certains paramètres.

175
00:14:19,955 --> 00:14:22,175
Donc, je dirais que var

176
00:14:22,175 --> 00:14:31,835
généré générateur d'options de contexte.

177
00:14:31,835 --> 00:14:34,685
Donc, c'est une variable JavaScript que j'ai besoin de

178
00:14:34,685 --> 00:14:38,705
spécifier là, objet JavaScript essentiellement.

179
00:14:38,705 --> 00:14:44,185
Donc, cet objet contient cette propriété appelée options,

180
00:14:44,185 --> 00:14:48,005
où je peux spécifier quelques options qui sont passées

181
00:14:48,005 --> 00:14:51,485
dans le CSS min demandé par la tâche de préparation usemin.

182
00:14:51,485 --> 00:14:56,310
Donc, là-dedans, gardez

183
00:14:56,310 --> 00:15:02,105
des commentaires spéciaux et puis,

184
00:15:05,655 --> 00:15:08,635
rebaser est faux.

185
00:15:08,635 --> 00:15:16,025
Apparemment, j'ai besoin de fournir ceci pour que ma tâche cssmin gère actuellement

186
00:15:16,025 --> 00:15:23,855
la modification et l'inclusion impressionnantes de la police dans le fichier concaténé.

187
00:15:23,855 --> 00:15:25,390
Si je ne fais pas cela,

188
00:15:25,390 --> 00:15:29,380
il semble briser la police génial et c'est quelque chose que j'ai compris, en

189
00:15:29,380 --> 00:15:31,890
faisant un peu de

190
00:15:31,890 --> 00:15:37,285
recherche sur le débordement de pile et certains de ces endroits et j'ai compris

191
00:15:37,285 --> 00:15:42,505
que leur problème qui est causé avec la police génial peut être

192
00:15:42,505 --> 00:15:48,619
corrigé en incluant ceci dans ma configuration grognement.

193
00:15:48,619 --> 00:15:51,445
Donc, encore une fois, je viens de chercher

194
00:15:51,445 --> 00:15:55,810
les suggestions de certaines personnes qui ont essayé et de résoudre le problème.

195
00:15:55,810 --> 00:15:58,465
Donc, si vous rencontrez des problèmes comme celui-ci,

196
00:15:58,465 --> 00:16:02,675
c'est une façon de résoudre les problèmes qui peuvent survenir lorsque vous

197
00:16:02,675 --> 00:16:07,525
travaillez avec ces différents outils.

198
00:16:07,525 --> 00:16:14,710
Permettez-moi d'ajouter la tâche suivante pour Concat.

199
00:16:14,710 --> 00:16:21,180
Je vais spécifier quelques choses ici et des options.

200
00:16:21,180 --> 00:16:28,135
Je spécifie ce point-virgule,

201
00:16:28,135 --> 00:16:31,215
donc c'est quelque chose que je dois spécifier pour le Concat,

202
00:16:31,215 --> 00:16:37,725
puis aussi après les

203
00:16:37,725 --> 00:16:43,180
options, je spécifie dist comme vide.

204
00:16:43,180 --> 00:16:48,385
Maintenant, ces options Concat seront configurées par UseMinPrepare qui s'exécute plus tôt.

205
00:16:48,385 --> 00:16:50,435
Donc, nous pouvons laisser la plupart des choses vides là,

206
00:16:50,435 --> 00:16:54,005
et puis cela serait reconfiguré par UseMinPrepare.

207
00:16:54,005 --> 00:16:57,005
Le suivant est uglify.

208
00:16:57,665 --> 00:17:06,055
À l'intérieur uglify aussi j'ai juste besoin de spécifier ce dist comme vide.

209
00:17:06,055 --> 00:17:08,255
Si je ne les spécifie pas

210
00:17:08,255 --> 00:17:12,890
, la tâche usemin ne fonctionne pas correctement.

211
00:17:12,890 --> 00:17:16,785
Donc, c'est pourquoi je dois spécifier toutes ces choses explicitement.

212
00:17:16,785 --> 00:17:21,905
Donc, pour cssmin aussi je dirais dist vide.

213
00:17:21,905 --> 00:17:29,005
Et puis, la tâche suivante que je vais configurer est appelée filerev.

214
00:17:29,625 --> 00:17:36,725
Donc, vous m'avez vu installer le plugin filerev pour Grunt.

215
00:17:36,725 --> 00:17:38,480
Que fait ce filerev ?

216
00:17:38,480 --> 00:17:44,640
Ce que fait le filerev, c'est quand usemin prépare les fichiers main.css et main.js,

217
00:17:44,640 --> 00:17:53,170
ce que filerev fait c'est qu'il ajoute une extension supplémentaire à ce nom principal, de

218
00:17:53,170 --> 00:18:02,070
sorte que lorsque vous préparez une nouvelle version de votre site Web et que vous le téléchargez sur la page Web,

219
00:18:02,070 --> 00:18:05,895
au cas où quelqu'un aurait vu votre site Web plus tôt,

220
00:18:05,895 --> 00:18:12,030
alors leur navigateur a peut-être encaissé les fichiers main.css et main.js.

221
00:18:12,030 --> 00:18:15,675
Si vous ne joignez pas ce filerev ce qui se passe est que,

222
00:18:15,675 --> 00:18:21,480
le navigateur ci-dessous télécharge la nouvelle version de votre page Web.

223
00:18:21,480 --> 00:18:24,605
Il peut ne pas télécharger le fichier main.js et main.css

224
00:18:24,605 --> 00:18:28,515
car il les trouve déjà dans son cache local.

225
00:18:28,515 --> 00:18:31,820
Par conséquent, votre page Web peut ne pas être rendue correctement.

226
00:18:31,820 --> 00:18:33,725
Donc, pour faire face au problème,

227
00:18:33,725 --> 00:18:37,535
ce que nous faisons est chaque fois que nous préparons un nouveau dossier de distribution,

228
00:18:37,535 --> 00:18:41,235
nous allons ajouter une révision de fichier.

229
00:18:41,235 --> 00:18:43,045
C' est ce que signifie filerev,

230
00:18:43,045 --> 00:18:44,985
le numéro de révision de fichier,

231
00:18:44,985 --> 00:18:54,100
comme une extension supplémentaire au nom de ces fichiers css et js.

232
00:18:54,100 --> 00:18:56,950
Les fichiers principaux .ss et main.js fichiers le pré-préparé.

233
00:18:56,950 --> 00:18:58,820
C' est ce que fait le filerev.

234
00:18:58,820 --> 00:19:02,440
Maintenant, comment ce filerev peut-il calculer cette valeur ?

235
00:19:02,440 --> 00:19:07,685
Il prend le contenu de ces fichiers, puis effectue un traitement et génère ensuite

236
00:19:07,685 --> 00:19:14,655
un md5 compressé 20 caractères nombre qui sera attaché au fichier principal.

237
00:19:14,655 --> 00:19:17,440
Donc, je vais configurer cette partie ici.

238
00:19:17,440 --> 00:19:20,245
Donc, dans les options,

239
00:19:20,245 --> 00:19:30,990
je spécifie ici en disant comment il est censé calculer ce nombre là.

240
00:19:30,990 --> 00:19:33,740
Donc, je dis encodage utf8,

241
00:19:33,740 --> 00:19:40,150
et puis je dis algorithme qu'il a utilisé pour calculer ce hachage,

242
00:19:40,150 --> 00:19:43,544
ce que nous appelons comme le hachage est md5.

243
00:19:43,544 --> 00:19:47,060
Maintenant, cela deviendra plus clair lorsque nous exécutons réellement

244
00:19:47,060 --> 00:19:53,020
la tâche usemin et que nous verrons ce qu'elle fait, longueur 20.

245
00:19:53,020 --> 00:19:55,475
Donc, je reviendrai et expliquerai ce que

246
00:19:55,475 --> 00:19:59,460
fait cette chose quand nous exécutons réellement la tâche usemin.

247
00:19:59,460 --> 00:20:06,790
Donc, laissez-moi finir les options ici et puis je dirais libération.

248
00:20:06,790 --> 00:20:10,855
Donc, j'ai besoin de mettre en place quelques autres choses ici, puis de libérer,

249
00:20:10,855 --> 00:20:18,150
et puis je dois spécifier les fichiers pour lesquels mon filerev devrait agir.

250
00:20:18,150 --> 00:20:20,625
Donc, je dirais fichiers filerev.

251
00:20:20,625 --> 00:20:22,005
Donc, à l'intérieur du dossier.

252
00:20:22,005 --> 00:20:26,645
Donc, vous commencez à voir un modèle dans la façon dont les choses sont spécifiées ici.

253
00:20:26,645 --> 00:20:28,640
Donc, lorsque vous spécifiez les fichiers ici,

254
00:20:28,640 --> 00:20:30,775
vous direz la source,

255
00:20:30,775 --> 00:20:37,815
puis là vous spécifierez dist CSS,

256
00:20:37,815 --> 00:20:41,025
puis point d'étoile CSS,

257
00:20:41,025 --> 00:20:47,295
puis le prochain dist js*.js.

258
00:20:47,295 --> 00:20:51,225
Donc, avec cela, vous avez configuré le filerev.

259
00:20:51,225 --> 00:20:53,625
Ainsi, la partie filerev est configurée.

260
00:20:53,625 --> 00:20:58,820
Et enfin, nous devons configurer la tâche usemin.

261
00:20:58,820 --> 00:21:00,795
Donc, pour configurer la tâche usemin,

262
00:21:00,795 --> 00:21:04,125
je vais ici et dis usemin,

263
00:21:04,125 --> 00:21:09,100
et ici laissez-moi spécifier quelques options pour la tâche usemin.

264
00:21:09,100 --> 00:21:12,470
Donc, ici, je spécifie html.

265
00:21:12,470 --> 00:21:21,205
Donc, ici, je lui spécifie quels fichiers il doit changer,

266
00:21:22,255 --> 00:21:25,455
il doit mettre à jour.

267
00:21:25,455 --> 00:21:32,465
Ainsi, les fichiers qui ont été copiés dans le dossier de distribution.

268
00:21:33,290 --> 00:21:41,975
Et le dernier est « dist/index.html ».

269
00:21:41,975 --> 00:21:50,300
Donc ce sont les trois fichiers qu'il est censé traiter,

270
00:21:50,510 --> 00:21:55,095
puis quelques options pour cela ici.

271
00:21:55,095 --> 00:22:04,970
Donc, les options que je vais spécifier « AssetsDirs. »

272
00:22:04,970 --> 00:22:10,520
Donc, c'est là que tous les actifs que j'utilise existent.

273
00:22:10,520 --> 00:22:14,355
Ainsi, les fichiers CSS et JavaScript existent.

274
00:22:14,355 --> 00:22:21,715
Donc, je vais spécifier « dist/css » et « dist/js ».

275
00:22:21,715 --> 00:22:27,020
Avec cela, vous avez terminé la configuration de la tâche « usemin ».

276
00:22:27,020 --> 00:22:30,930
Ensuite, nous configurons la tâche « htmlmin ».

277
00:22:30,930 --> 00:22:32,870
Pour la tâche « htmlmin »,

278
00:22:32,870 --> 00:22:37,160
nous avons spécifié la cible qui est « dist », le dossier de distribution

279
00:22:37,160 --> 00:22:40,140
et le « htmlmin » à effectuer sur

280
00:22:40,140 --> 00:22:44,690
tous les fichiers HTML qui se trouvent dans ce dossier de distribution.

281
00:22:44,690 --> 00:22:49,560
Les options que nous spécifions pour cet état que, nous dirons,

282
00:22:49,560 --> 00:22:53,945
« CollapsedWhitespace : True » signifie que

283
00:22:53,945 --> 00:22:58,715
tout l'espace blanc dans les fichiers HTML serait réduit, de

284
00:22:58,715 --> 00:23:04,670
sorte que le [inaudible] ne contient que le code HTML minimum.

285
00:23:04,670 --> 00:23:08,095
La modification supprime essentiellement

286
00:23:08,095 --> 00:23:12,390
tous les caractères étrangers des fichiers « htmlmin ».

287
00:23:12,390 --> 00:23:16,570
Maintenant, nous spécifions également ce dictionnaire de fichiers,

288
00:23:16,570 --> 00:23:18,880
ces fichiers qui doivent être configurés.

289
00:23:18,880 --> 00:23:22,910
Ceci est spécifié comme destination, deux-points, source.

290
00:23:22,910 --> 00:23:28,835
Donc, nous spécifions « dist/index.html » : « dist/index.html »,

291
00:23:28,835 --> 00:23:32,335
ce qui signifie que le « index.html » dans le dossier de distribution

292
00:23:32,335 --> 00:23:36,900
sera [inaudible] puis replacé dans le fichier « index.html »,

293
00:23:36,900 --> 00:23:39,025
également dans le dossier de distribution.

294
00:23:39,025 --> 00:23:45,290
De même, le « contactus.html » spécifié là, puis le

295
00:23:45,290 --> 00:23:51,965
« aboutus.html » également spécifié comme indiqué dans cette liste de fichiers.

296
00:23:51,965 --> 00:23:56,760
La raison pour laquelle nous effectuons « htmlmin » après avoir terminé « usemin »

297
00:23:56,760 --> 00:24:01,985
est que « usemin » remplacera tous les scripts par

298
00:24:01,985 --> 00:24:06,925
le fichier principal « .js » et aussi tout ce

299
00:24:06,925 --> 00:24:12,535
code CSS concaténé et combiné et remplacé par le fichier principal « .css ».

300
00:24:12,535 --> 00:24:15,490
Ainsi, le « htmlmin » sera effectué sur

301
00:24:15,490 --> 00:24:20,840
les fichiers HTML résultants après que « usemin » ait terminé son travail.

302
00:24:20,840 --> 00:24:24,605
C' est ainsi que cela fonctionne dans Grunt.

303
00:24:24,605 --> 00:24:31,060
Ainsi, le Grunt « htmlmin » doit être appliqué après que le « usemin » a terminé son travail.

304
00:24:31,060 --> 00:24:34,080
Donc, une fois que tous ceux-ci sont configurés,

305
00:24:34,080 --> 00:24:40,185
alors une petite étape que je dois faire est de revenir ici,

306
00:24:40,185 --> 00:24:45,285
et puis où nous spécifions pour le « jit-grunt »,

307
00:24:45,285 --> 00:24:50,005
nous devons spécifier que ce « jit-grognement »,

308
00:24:50,005 --> 00:24:53,290
vous rappelez que nous avons introduit quelque chose appelé le

309
00:24:53,290 --> 00:24:57,500
« UseMinPrepare » [inaudible] donc vous devez informer le « jit-grunt » en

310
00:24:57,500 --> 00:25:01,900
disant que la configuration « UseMinPrepare » que nous avons introduite va être

311
00:25:01,900 --> 00:25:06,430
gérée par ce plugin « grunt-usemin » lui-même.

312
00:25:06,430 --> 00:25:08,575
J' ai donc besoin de spécifier explicitement,

313
00:25:08,575 --> 00:25:14,260
sinon « jit-grunt » va chercher un plugin Grunt « UseMinPrepare ».

314
00:25:14,260 --> 00:25:16,480
Donc, pour spécifier à cela,

315
00:25:16,480 --> 00:25:26,450
je dirais « UseMinPrepare » et dire « grunt-usemin »,

316
00:25:26,450 --> 00:25:30,950
informant essentiellement « jit-grunt » en disant que « UseMinPrepare » va être

317
00:25:30,950 --> 00:25:35,960
géré par le plugin « grunt-usemin » là.

318
00:25:35,960 --> 00:25:41,490
Enfin, reconfigurons la tâche « build » en bas.

319
00:25:41,490 --> 00:25:46,520
En descendant à cette tâche « build » après « imagemin ».

320
00:25:46,520 --> 00:25:49,530
Donc, nous avons fait « clean », « copy », « imagemin »,

321
00:25:49,530 --> 00:25:55,920
puis la tâche suivante que je devrais exécuter est « UseMinPreparation », puis après

322
00:25:55,920 --> 00:26:08,820
« UseMinPrepare » exécuter « contact », puis j'exécute « cssmin »,

323
00:26:08,820 --> 00:26:15,305
puis j'exécute « uglify ».

324
00:26:15,305 --> 00:26:20,285
Vous voyez donc que nous devons les faire en un certain nombre d'étapes.

325
00:26:20,285 --> 00:26:22,395
Une fois les fichiers « cssmin » et « uglify » exécutés

326
00:26:22,395 --> 00:26:26,110
, les fichiers principaux « .css » et « .js » seraient créés.

327
00:26:26,110 --> 00:26:28,610
Donc, à ce stade, je vais exécuter le

328
00:26:28,610 --> 00:26:37,290
« filerev », puis finalement j'exécute la tâche « usemin ».

329
00:26:37,290 --> 00:26:40,475
Donc, vous voyez les secrets : « clean », « copy »,

330
00:26:40,475 --> 00:26:43,690
« imagemin », « UseMinPrepare », « concat », « cssmin », « uglify. »

331
00:26:43,690 --> 00:26:47,210
À ce stade, les fichiers « .css » et « .js »,

332
00:26:47,210 --> 00:26:49,815
les fichiers principaux « .css » et « .js » sont prêts.

333
00:26:49,815 --> 00:26:54,190
Je peux faire le « filerev » sur eux et ensuite enfin exécuter le « usemin ».

334
00:26:54,190 --> 00:26:58,790
Mais ceci, sauvegardons les modifications, puis allons

335
00:26:58,790 --> 00:27:03,960
voir comment la tâche « build » prépare réellement la distribution.

336
00:27:03,960 --> 00:27:06,855
[ inaudible] Aller à notre terminal,

337
00:27:06,855 --> 00:27:13,605
à l'invite, je tape « grunt build », puis j'attends que toutes les tâches soient exécutées.

338
00:27:13,605 --> 00:27:16,870
Donc, vous verrez qu'il va exécuter tous les ensembles de tâches,

339
00:27:16,870 --> 00:27:19,320
puis finalement quand il est fait,

340
00:27:19,320 --> 00:27:24,950
il va simplement spécifier que toutes les tâches sont effectuées.

341
00:27:24,950 --> 00:27:29,345
Donc, si vous voulez revenir en arrière et regarder la séquence des tâches qui ont été terminées,

342
00:27:29,345 --> 00:27:31,760
vous pouvez simplement faire défiler et voir ce qu'il fait.

343
00:27:31,760 --> 00:27:33,885
Il nettoie d'abord,

344
00:27:33,885 --> 00:27:36,765
puis il copie les fichiers HTML,

345
00:27:36,765 --> 00:27:38,400
puis il copie les fichiers de police,

346
00:27:38,400 --> 00:27:40,455
puis il fait la tâche « imagemin »,

347
00:27:40,455 --> 00:27:42,550
puis il fait le « UseMinPreparation »,

348
00:27:42,550 --> 00:27:45,810
puis il fait le « concat »,

349
00:27:45,830 --> 00:27:49,645
puis il fait le « cssmin », à

350
00:27:49,645 --> 00:27:52,010
la fois la distribution et générée,

351
00:27:52,010 --> 00:27:54,130
puis il fait le » uglify »,

352
00:27:54,130 --> 00:28:01,060
puis la tâche « uglify », puis il exécute le « filerev », puis enfin la tâche « usemin ».

353
00:28:01,060 --> 00:28:03,920
Et puis notre dossier de distribution devrait maintenant être prêt.

354
00:28:03,920 --> 00:28:07,775
En allant à notre éditeur,

355
00:28:07,775 --> 00:28:11,070
vous voyez maintenant que le dossier de distribution a été préparé.

356
00:28:11,070 --> 00:28:19,415
Regardons spécifiquement les principaux fichiers « .css » et « .js ».

357
00:28:19,415 --> 00:28:22,060
Notez les noms de ces fichiers.

358
00:28:22,060 --> 00:28:23,590
Notez qu'après main,

359
00:28:23,590 --> 00:28:25,080
il y a un point et puis il y a

360
00:28:25,080 --> 00:28:30,500
un hachage de 20 caractères qui a été ajouté par « filerev » ici.

361
00:28:30,500 --> 00:28:34,605
Donc, ce qui se passe est si je prépare un nouveau dossier de distribution,

362
00:28:34,605 --> 00:28:41,130
chaque fois que je prépare le nouveau dossier de distribution, ce hachage change, ce

363
00:28:41,130 --> 00:28:47,515
qui signifie que chaque fois que je déploie une nouvelle version de mon site Web,

364
00:28:47,515 --> 00:28:54,130
si des navigateurs ont déjà consulté mon site Web, puis leurs entrées de cache,

365
00:28:54,130 --> 00:28:57,210
où ils aurait peut-être mis en cache le principal « .css » et le principal « .js » est devenu

366
00:28:57,210 --> 00:29:02,195
invalidé car nous avons une nouvelle version des principaux « .css » et « .js ».

367
00:29:02,195 --> 00:29:06,805
Donc, le navigateur va re-télécharger ces choses.

368
00:29:06,805 --> 00:29:10,455
Je n'ai pas montré le « filerev » avec les scripts NPM,

369
00:29:10,455 --> 00:29:15,940
mais je viens de l'ajouter ici juste pour vous montrer comment c'est fait avec le Grunt.

370
00:29:15,940 --> 00:29:19,650
Donc, avec cela, nous terminons cet exercice.

371
00:29:19,650 --> 00:29:26,035
Jetons un coup d'oeil sur le site dans notre navigateur.

372
00:29:26,035 --> 00:29:27,795
Aller à votre navigateur,

373
00:29:27,795 --> 00:29:32,035
vous pouvez voir que je suis en train de charger dans « dist/index.html ».

374
00:29:32,035 --> 00:29:34,200
Donc, c'est à partir du dossier de distribution,

375
00:29:34,200 --> 00:29:39,260
donc je suis en train de vérifier et ça semble très bien.

376
00:29:39,260 --> 00:29:44,440
Le « aboutus.html » semble également très bien, comme avant.

377
00:29:44,440 --> 00:29:51,060
Et la page de contact semble également bien préparée pour le déploiement.

378
00:29:51,060 --> 00:29:54,970
Donc, avec cela, nous terminons cet exercice.

379
00:29:54,970 --> 00:29:57,365
Après tout ce grognement,

380
00:29:57,365 --> 00:30:00,560
je suis sûr que vous devez reprendre votre souffle.

381
00:30:00,560 --> 00:30:09,400
Avant de faire cela, assurez-vous de faire un bon commentaire avec le message « Grunt deuxième partie. »