1
00:00:03,510 --> 00:00:06,510
Continuiamo il nostro grugnito.

2
00:00:06,510 --> 00:00:11,175
Come abbiamo fatto nella seconda parte dell'esercizio degli script NPM,

3
00:00:11,175 --> 00:00:14,660
in questa seconda parte di quell'esercizio grugnito,

4
00:00:14,660 --> 00:00:17,080
stiamo andando a configurare esattamente le stesse attività.

5
00:00:17,080 --> 00:00:20,475
Stiamo andando a pulire la cartella di distribuzione,

6
00:00:20,475 --> 00:00:23,175
copiare i font nella cartella di distribuzione,

7
00:00:23,175 --> 00:00:29,780
poi faremo anche la minificazione delle nostre immagini usando imagemin,

8
00:00:29,780 --> 00:00:37,530
e poi finalmente utilizzare il compito usemin per costruire e preparare la nostra cartella di distribuzione.

9
00:00:37,530 --> 00:00:40,420
Continuando con il nostro esercizio,

10
00:00:40,420 --> 00:00:43,590
installerò un paio di moduli grugniti.

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

12
00:00:51,110 --> 00:01:00,665
Questo è usato per copiare i file e poi grunt-contrib-clean,

13
00:01:00,665 --> 00:01:04,575
e meno save-dev.

14
00:01:04,575 --> 00:01:06,655
E una volta installati questi due,

15
00:01:06,655 --> 00:01:10,595
allora andremo avanti e configureremo le attività corrispondenti.

16
00:01:10,595 --> 00:01:12,800
Andando al tuo file grunt,

17
00:01:12,800 --> 00:01:19,770
aggiungeremo la configurazione sia per la copia che per le attività pulite.

18
00:01:19,770 --> 00:01:22,895
Quindi, a partire dalla virgola,

19
00:01:22,895 --> 00:01:26,295
ricorda sempre di non dimenticare la virgola.

20
00:01:26,295 --> 00:01:30,360
Tornerà a morderti nei momenti sbagliati, se lo fai.

21
00:01:30,360 --> 00:01:32,245
Quindi impostiamo l'attività di copia.

22
00:01:32,245 --> 00:01:38,180
Per la copia, usemin si aspetta che manteniamo anche i

23
00:01:38,180 --> 00:01:41,110
nostri file HTML copiati nella cartella di distribuzione

24
00:01:41,110 --> 00:01:44,760
in modo che possa fare la manipolazione su questo.

25
00:01:44,760 --> 00:01:47,250
Quindi, in questo caso,

26
00:01:47,250 --> 00:01:48,630
abbiamo intenzione di copiare prima

27
00:01:48,630 --> 00:01:53,440
i file HTML dalla nostra cartella di progetto alla cartella di distribuzione.

28
00:01:53,440 --> 00:01:55,330
Quindi, per fare la copia,

29
00:01:55,330 --> 00:02:01,535
ho intenzione di impostare la parte HTML di esso.

30
00:02:01,535 --> 00:02:04,740
Quindi, questo è dove useremo alcuni

31
00:02:04,740 --> 00:02:09,920
della sintassi grunt per specificare i file che devono essere copiati.

32
00:02:09,920 --> 00:02:19,880
Quindi, dico file e specifico anche le

33
00:02:19,880 --> 00:02:23,560
parentesi destra, sinistra e destra lì così all'interno di questo,

34
00:02:23,560 --> 00:02:27,855
ho bisogno di specificare ora certa configurazione.

35
00:02:27,855 --> 00:02:37,600
Quindi, direi, espandere true e dot true, quindi CWD,

36
00:02:37,600 --> 00:02:42,015
la directory di lavoro corrente è dot slash,

37
00:02:42,015 --> 00:02:44,440
e poi,

38
00:02:44,440 --> 00:02:51,730
configureremo il prossimo che è SRC, i file sorgente,

39
00:02:51,730 --> 00:02:56,690
e poi i file sorgente sono star.html,

40
00:02:56,690 --> 00:02:59,325
tutti i file HTML,

41
00:02:59,325 --> 00:03:05,850
e poi li copieremo in la cartella dist.

42
00:03:05,850 --> 00:03:10,135
Ecco perché la destinazione è impostata sulla cartella di distribuzione qui.

43
00:03:10,135 --> 00:03:12,385
Quindi, con questo set up,

44
00:03:12,385 --> 00:03:18,880
la mia attività di copia copierà tutti i file HTML nella cartella di distribuzione.

45
00:03:18,880 --> 00:03:22,285
Ora insieme a questo, abbiamo anche bisogno di copiare i font.

46
00:03:22,285 --> 00:03:26,200
Quindi, imposterò il secondo per i font.

47
00:03:26,200 --> 00:03:31,090
Quindi, specifico i font e poi anche qui ho bisogno di specificare

48
00:03:31,090 --> 00:03:37,500
i file che devono essere copiati e quindi diciamo file,

49
00:03:37,500 --> 00:03:41,780
e quindi questi sono

50
00:03:41,780 --> 00:03:47,465
alcuni parametri di configurazione che è necessario impostare per l'attività di copia.

51
00:03:47,465 --> 00:03:49,225
Ora, se hai bisogno di capire,

52
00:03:49,225 --> 00:03:54,510
quindi leggendo la documentazione per il plugin grunt corrispondente,

53
00:03:54,510 --> 00:03:57,650
sarai in grado di capirlo e così o puoi

54
00:03:57,650 --> 00:04:00,960
semplicemente seguire l'esempio che sto dando qui.

55
00:04:00,960 --> 00:04:05,350
Quindi, punto true, e poi CWD,

56
00:04:05,350 --> 00:04:14,780
la directory di lavoro corrente è moduli nodo e font impressionante.

57
00:04:14,780 --> 00:04:18,295
Quindi è lì che ho intenzione di copiare i file da,

58
00:04:18,295 --> 00:04:27,180
e quindi la fonte dei file è fontsstar.star,

59
00:04:27,180 --> 00:04:30,310
questi sono i file che ho bisogno di copiare,

60
00:04:30,310 --> 00:04:38,370
e la destinazione è la cartella di distribuzione.

61
00:04:38,370 --> 00:04:42,050
Quindi con questo, ho impostato il mio compito di copia per copiare

62
00:04:42,050 --> 00:04:47,490
sia i file HTML che i file dei caratteri nella mia cartella di distribuzione.

63
00:04:47,490 --> 00:04:52,370
Ora, il prossimo compito che ho intenzione di impostare è il compito pulito.

64
00:04:52,370 --> 00:04:56,290
Quindi, lasciami configurare l'attività pulita.

65
00:04:56,540 --> 00:05:05,825
Per l'attività pulita, configurerò la build,

66
00:05:05,825 --> 00:05:13,460
quindi dirò che la fonte è la cartella di distribuzione.

67
00:05:13,460 --> 00:05:19,660
Quindi, specificando essenzialmente che la cartella di distribuzione deve essere pulita.

68
00:05:19,830 --> 00:05:27,835
Quindi, ora abbiamo impostato la copia e le attività pulite in modo da salvare le modifiche.

69
00:05:27,835 --> 00:05:31,530
Il prossimo compito che ho intenzione di impostare è l'attività imagemin.

70
00:05:31,530 --> 00:05:40,030
Questo è ciò che useremo per comprimere e copiare le immagini nella cartella di distribuzione.

71
00:05:40,030 --> 00:05:44,200
Per iniziare con l'attività imagemin, il primo passo,

72
00:05:44,200 --> 00:05:49,910
installa il plugin grunt corrispondente.

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

74
00:06:00,520 --> 00:06:03,470
E una volta installato,

75
00:06:03,470 --> 00:06:07,330
allora andremo avanti e configureremo l'attività imagemin corrispondente.

76
00:06:07,330 --> 00:06:12,015
Andando al nostro file grunt dopo la configurazione per l'attività pulita,

77
00:06:12,015 --> 00:06:15,620
ho intenzione di configurare l'attività imagemin.

78
00:06:15,620 --> 00:06:18,050
Quindi, dirò imagemin,

79
00:06:19,460 --> 00:06:22,055
e poi proprio lì,

80
00:06:22,055 --> 00:06:26,225
specificherò dinamica,

81
00:06:26,225 --> 00:06:30,950
e dentro lì specificherò i file in modo da poter

82
00:06:30,950 --> 00:06:36,010
vedere che la specifica del file sarebbe simile.

83
00:06:36,010 --> 00:06:39,130
Direi, espandi true,

84
00:06:39,130 --> 00:06:46,830
quindi CWD è la directory corrente.

85
00:06:49,680 --> 00:06:58,350
Quindi la fonte dei file è imagestar.

86
00:07:00,840 --> 00:07:05,405
e poi tra parentesi, tra parentesi graffe,

87
00:07:05,405 --> 00:07:12,910
specifico PNG, GIF e JPG.

88
00:07:12,910 --> 00:07:17,000
Quindi, essenzialmente, puoi vedere il modello globale del file qui.

89
00:07:17,000 --> 00:07:18,640
Quindi dice qualsiasi

90
00:07:18,640 --> 00:07:21,610
file PNG, GIF o JPG che corrisponde a questo modello e quindi

91
00:07:21,610 --> 00:07:25,755
inizia punto che significa tutti i file di quel modello,

92
00:07:25,755 --> 00:07:29,280
e la fonte, e la destinazione, che

93
00:07:29,280 --> 00:07:34,310
ho impostato come cartella di distribuzione.

94
00:07:34,310 --> 00:07:37,790
Quindi, con questo, abbiamo configurato il nostro

95
00:07:37,790 --> 00:07:39,425
compito di copia, pulizia e imagemin.

96
00:07:39,425 --> 00:07:46,670
Configuriamo un compito qui chiamato build.

97
00:07:46,670 --> 00:07:49,365
Quindi, direi, registrare attività,

98
00:07:49,365 --> 00:07:55,700
grunt registro attività e poi nominerò l'attività come build,

99
00:07:55,700 --> 00:07:57,695
e poi all'interno di questo,

100
00:07:57,695 --> 00:08:03,160
specificheremo i passaggi di impostazione da fare dal task di compilazione.

101
00:08:03,160 --> 00:08:09,105
Quindi, proprio lì, punto e virgola e poi lì dentro,

102
00:08:09,105 --> 00:08:13,685
specificerò i tre compiti nella sequenza che dovrebbero essere eseguiti.

103
00:08:13,685 --> 00:08:16,650
Per prima cosa, dirò, pulito.

104
00:08:16,650 --> 00:08:19,420
Quindi, puliremo la cartella di distribuzione

105
00:08:19,420 --> 00:08:22,340
e quindi inizieremo a ricostruire la cartella di distribuzione.

106
00:08:22,340 --> 00:08:27,320
Pulito, quindi il prossimo compito sarebbe

107
00:08:27,320 --> 00:08:36,980
copia e poi dopo che lo farei, imagemin.

108
00:08:37,380 --> 00:08:41,340
Quindi questi tre compiti da configurare qui.

109
00:08:41,340 --> 00:08:43,910
Quindi con questo, lasciami salvare le modifiche.

110
00:08:43,910 --> 00:08:46,590
Vediamo come funziona questa cosa.

111
00:08:46,590 --> 00:08:50,280
Ora, andando al prompt se digito,

112
00:08:50,280 --> 00:08:57,955
grugnito e costruisco, vedrai che prima farà la pulizia,

113
00:08:57,955 --> 00:09:01,550
poi per fare la copia e fare l'attività imagemin.

114
00:09:01,550 --> 00:09:05,600
Quindi, fa tutti questi tre e poi vedresti immediatamente che

115
00:09:05,600 --> 00:09:11,810
la cartella di distribuzione è costruita nella mia cartella di progetto qui.

116
00:09:11,810 --> 00:09:15,200
E all'interno della cartella di distribuzione si può vedere che i font sono stati copiati,

117
00:09:15,200 --> 00:09:16,590
le immagini sono state copiate e

118
00:09:16,590 --> 00:09:20,665
i tre file HTML sono stati copiati nella cartella di distribuzione.

119
00:09:20,665 --> 00:09:22,350
Sei solo a meta' strada.

120
00:09:22,350 --> 00:09:29,370
Ora, dobbiamo essere in grado di elaborare questi file usando il plugin usemin.

121
00:09:29,370 --> 00:09:31,675
Quindi, passiamo a quello successivo.

122
00:09:31,675 --> 00:09:35,140
Ora, ho intenzione di installare alcuni moduli NPM

123
00:09:35,140 --> 00:09:38,555
che sono utili per costruire la cartella di distribuzione.

124
00:09:38,555 --> 00:09:42,225
Quindi, per farlo, direi installazione NPM.

125
00:09:42,225 --> 00:09:47,120
Posso specificare un insieme di moduli qui quindi,

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

127
00:09:52,300 --> 00:10:01,000
Quindi, questo è usato per concatenare file, quindi grunt-contrib-cssmin,

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

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

130
00:10:18,240 --> 00:10:21,910
Vedrai il motivo per usare filerev in breve tempo,

131
00:10:21,910 --> 00:10:32,925
e poi grunt-usemin, e salva def e quindi

132
00:10:35,475 --> 00:10:40,050
installa tutti questi moduli grunt.

133
00:10:40,050 --> 00:10:42,205
Una volta che tutti sono stati installati,

134
00:10:42,205 --> 00:10:44,305
il passo successivo è quello di andare a configurare,

135
00:10:44,305 --> 00:10:47,625
compito usemin che utilizza anche

136
00:10:47,625 --> 00:10:55,090
le attività cssmin Uglify Concat per realizzare la costruzione della cartella di distribuzione.

137
00:10:55,090 --> 00:10:59,140
Ora, procediamo avanti la configurazione dell'attività usemin.

138
00:10:59,140 --> 00:11:03,750
Quindi, tornando al file grunt dopo imagemin,

139
00:11:03,750 --> 00:11:10,950
aggiungerò il prossimo compito affinché usemin funzioni con il grugnito.

140
00:11:10,950 --> 00:11:17,165
La prima attività che ho bisogno di configurare si chiama UseminPrepare.

141
00:11:19,145 --> 00:11:25,175
Questa attività UseMinPrepare preparerà i file e quindi configurerà anche

142
00:11:25,175 --> 00:11:32,655
i plugin ConCache CSS min e Uglify e file ref,

143
00:11:32,655 --> 00:11:35,070
in modo che possano fare il loro lavoro correttamente.

144
00:11:35,070 --> 00:11:36,915
Quindi, questo è il motivo per UseminPrepare.

145
00:11:36,915 --> 00:11:42,220
Quindi, questo è il modo in cui è stato progettato il plugin usemin di concessione.

146
00:11:42,220 --> 00:11:48,340
Un po 'diverso dal modo in cui l'usemin che abbiamo usato con gli script del gioco finale si sveglia.

147
00:11:48,340 --> 00:11:50,295
Quindi, in UseminPrepare,

148
00:11:50,295 --> 00:11:59,590
solo un nome casuale che userò e quindi dirò che la destinazione è dist.

149
00:11:59,590 --> 00:12:08,730
E poi specificherei la fonte come tutti i file html qui.

150
00:12:08,730 --> 00:12:13,605
Quindi direi contactus.html

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

152
00:12:23,550 --> 00:12:26,915
Quindi, tutti e tre i file devono essere elaborati.

153
00:12:26,915 --> 00:12:30,765
La parte successiva di questa configurazione usemin, la configurazione

154
00:12:30,765 --> 00:12:37,735
UseminPrepare è dove specifico le opzioni.

155
00:12:38,115 --> 00:12:43,245
Questo è qualcosa che ho capito per tentativi ed errori.

156
00:12:44,995 --> 00:12:47,395
Segui i gradini.

157
00:12:47,395 --> 00:12:48,845
Quindi ho bisogno di configurare

158
00:12:48,845 --> 00:12:54,125
alcune cose qui dentro in cui ho bisogno di configurare qualcosa chiamato Flow.

159
00:12:54,125 --> 00:13:00,695
E poi dentro ho bisogno di configurare un'altra parte chiamata Steps,

160
00:13:00,695 --> 00:13:07,875
e poi qui specifico i passaggi qui e poi dico cssmin,

161
00:13:07,915 --> 00:13:14,645
e poi dirò js è uglify.

162
00:13:14,645 --> 00:13:21,515
Quindi, questo è qualcosa che devo specificare qui e poi dopo questo dico post,

163
00:13:24,405 --> 00:13:29,695
e qui posso consentire a questo di fornire

164
00:13:29,695 --> 00:13:36,475
alcune opzioni per i loro compiti specifici che ho configurato.

165
00:13:36,475 --> 00:13:40,175
Quindi, sto fornendo alcune opzioni aggiuntive per css.

166
00:13:40,175 --> 00:13:44,540
Quindi, che è fornito all'interno del post qui.

167
00:13:44,540 --> 00:13:49,485
Ora di nuovo, questo è il modo in cui la configurazione deve essere fatta.

168
00:13:49,485 --> 00:13:52,695
Quindi, l'abbiamo appena imparato guardando la documentazione lì.

169
00:13:52,695 --> 00:13:55,390
Quindi, qui all'interno del post css,

170
00:13:55,390 --> 00:13:59,275
specificherei un nome come cssmin.

171
00:13:59,275 --> 00:14:01,450
Finora questo qui è compito cssmin.

172
00:14:01,450 --> 00:14:07,974
Direi createConfig:

173
00:14:08,775 --> 00:14:17,005
blocco di contesto della funzione, e quindi all'interno di quelle funzioni

174
00:14:17,005 --> 00:14:19,955
devo fornire determinati parametri.

175
00:14:19,955 --> 00:14:22,175
Quindi, direi che il

176
00:14:22,175 --> 00:14:31,835
generatore di opzioni di contesto generato da var.

177
00:14:31,835 --> 00:14:34,685
Quindi questa è una variabile JavaScript che ho bisogno di

178
00:14:34,685 --> 00:14:38,705
specificare lì, essenzialmente l'oggetto JavaScript.

179
00:14:38,705 --> 00:14:44,185
Quindi, questo oggetto contiene questa proprietà chiamata opzioni,

180
00:14:44,185 --> 00:14:48,005
dove posso specificare alcune opzioni che vengono passate

181
00:14:48,005 --> 00:14:51,485
nel CSS min incaricato dall'attività di preparazione usemin.

182
00:14:51,485 --> 00:14:56,310
Quindi, lì dentro, mantieni

183
00:14:56,310 --> 00:15:02,105
commenti speciali e poi,

184
00:15:05,655 --> 00:15:08,635
rebase è falso.

185
00:15:08,635 --> 00:15:16,025
Apparentemente ho bisogno di fornire questo per consentire al mio compito cssmin di gestire attualmente

186
00:15:16,025 --> 00:15:23,855
la modifica e l'inclusione impressionante del font nel file concatenato.

187
00:15:23,855 --> 00:15:25,390
Se non lo faccio,

188
00:15:25,390 --> 00:15:29,380
sembra rompere il font fantastico e questo è qualcosa che ho capito,

189
00:15:29,380 --> 00:15:31,890
facendo un po 'di

190
00:15:31,890 --> 00:15:37,285
ricerca su stack overflow e alcuni di questi luoghi e ho capito

191
00:15:37,285 --> 00:15:42,505
che il loro problema causato con font awesome può essere

192
00:15:42,505 --> 00:15:48,619
risolto includendo questo in la mia configurazione grugnito.

193
00:15:48,619 --> 00:15:51,445
Quindi, ancora una volta ho appena cercato

194
00:15:51,445 --> 00:15:55,810
i suggerimenti di alcune persone che hanno provato e per risolvere il problema.

195
00:15:55,810 --> 00:15:58,465
Quindi, se si incontrano problemi come questo,

196
00:15:58,465 --> 00:16:02,675
questo è un modo per risolvere i problemi che potrebbero sorgere quando si

197
00:16:02,675 --> 00:16:07,525
lavora con questi vari strumenti.

198
00:16:07,525 --> 00:16:14,710
Permettetemi di aggiungere il prossimo compito per Concat.

199
00:16:14,710 --> 00:16:21,180
Specificherò alcune cose qui e opzioni.

200
00:16:21,180 --> 00:16:28,135
Specifico questo punto e virgola,

201
00:16:28,135 --> 00:16:31,215
quindi questo è qualcosa che devo specificare per Concat,

202
00:16:31,215 --> 00:16:37,725
e poi anche dopo

203
00:16:37,725 --> 00:16:43,180
le opzioni specifico dist come vuoto.

204
00:16:43,180 --> 00:16:48,385
Ora queste opzioni Concat saranno configurate da UseMinPrepare che viene eseguito in precedenza.

205
00:16:48,385 --> 00:16:50,435
Quindi possiamo lasciare la maggior parte di esso vuoto lì,

206
00:16:50,435 --> 00:16:54,005
e poi che sarebbe stato riconfigurato da UseminPrepare.

207
00:16:54,005 --> 00:16:57,005
Il prossimo è brutto.

208
00:16:57,665 --> 00:17:06,055
All' interno uglify ho solo bisogno di specificare questa dist come vuota.

209
00:17:06,055 --> 00:17:08,255
Se non li specifico,

210
00:17:08,255 --> 00:17:12,890
l'attività usemin non funziona correttamente.

211
00:17:12,890 --> 00:17:16,785
Quindi, è per questo che ho bisogno di specificare tutte queste cose esplicitamente.

212
00:17:16,785 --> 00:17:21,905
Quindi anche per cssmin direi dist vuoto.

213
00:17:21,905 --> 00:17:29,005
E poi, il prossimo compito che ho intenzione di configurare si chiama filerev.

214
00:17:29,625 --> 00:17:36,725
Quindi, mi hai visto installare il plugin filerev per Grunt.

215
00:17:36,725 --> 00:17:38,480
Cosa fa questo filerev?

216
00:17:38,480 --> 00:17:44,640
Quello che fa il filerev è quando usemin prepara il file main.css e main.js,

217
00:17:44,640 --> 00:17:53,170
quello che fa filerev è aggiunge un'estensione aggiuntiva a quel nome principale, in

218
00:17:53,170 --> 00:18:02,070
modo che quando prepari una nuova versione del tuo sito web e lo carichi sulla pagina web,

219
00:18:02,070 --> 00:18:05,895
nel caso in cui qualcuno abbia visto il tuo sito web prima,

220
00:18:05,895 --> 00:18:12,030
allora il loro browser potrebbe aver incassato i file main.css e main.js.

221
00:18:12,030 --> 00:18:15,675
Se non si allega questo filerev quello che succede è che,

222
00:18:15,675 --> 00:18:21,480
il browser sotto scarica la nuova versione della pagina web.

223
00:18:21,480 --> 00:18:24,605
Potrebbe non scaricare il file main.js e main.css

224
00:18:24,605 --> 00:18:28,515
perché li trova già nella sua cache locale.

225
00:18:28,515 --> 00:18:31,820
Quindi, la tua pagina web potrebbe non essere renderizzata correttamente.

226
00:18:31,820 --> 00:18:33,725
Quindi, per affrontare il problema,

227
00:18:33,725 --> 00:18:37,535
quello che facciamo è ogni volta che prepariamo una nuova cartella di distribuzione,

228
00:18:37,535 --> 00:18:41,235
aggiungeremo una revisione del file.

229
00:18:41,235 --> 00:18:43,045
Questo è ciò che il filerev sta per,

230
00:18:43,045 --> 00:18:44,985
il numero di revisione del file,

231
00:18:44,985 --> 00:18:54,100
come estensione aggiuntiva al nome di quei file css e js.

232
00:18:54,100 --> 00:18:56,950
Il main.ss e main.js file il pre-preparato.

233
00:18:56,950 --> 00:18:58,820
Quindi questo è ciò che fa il filerev.

234
00:18:58,820 --> 00:19:02,440
Ora come fa questo filerev a calcolare questo valore?

235
00:19:02,440 --> 00:19:07,685
Prende il contenuto di questi file e poi fa un po 'di elaborazione e quindi genera

236
00:19:07,685 --> 00:19:14,655
un md5 compresso 20 caratteri numero che verrà allegato al file principale.

237
00:19:14,655 --> 00:19:17,440
Quindi, ho intenzione di configurare quella parte qui.

238
00:19:17,440 --> 00:19:20,245
Quindi, nelle opzioni,

239
00:19:20,245 --> 00:19:30,990
specifico qui dicendo come dovrebbe calcolare questo numero lì.

240
00:19:30,990 --> 00:19:33,740
Quindi, dico codifica utf8,

241
00:19:33,740 --> 00:19:40,150
e poi dico algoritmo che ha usato per calcolare questo hash,

242
00:19:40,150 --> 00:19:43,544
quello che chiamiamo come hash è md5.

243
00:19:43,544 --> 00:19:47,060
Ora, diventerà più chiaro quando eseguiamo effettivamente

244
00:19:47,060 --> 00:19:53,020
l'attività usemin e poi vediamo cosa fa, lunghezza 20.

245
00:19:53,020 --> 00:19:55,475
Quindi, tornerò e spiegherò cosa

246
00:19:55,475 --> 00:19:59,460
fa questa cosa quando eseguiamo effettivamente l'attività usemin.

247
00:19:59,460 --> 00:20:06,790
Quindi, lasciami finire le opzioni qui e poi direi rilascio.

248
00:20:06,790 --> 00:20:10,855
Quindi, ho bisogno di impostare alcune altre cose qui e poi rilasciare,

249
00:20:10,855 --> 00:20:18,150
e poi ho bisogno di specificare i file per i quali il mio filerev dovrebbe agire.

250
00:20:18,150 --> 00:20:20,625
Quindi, direi file filerev.

251
00:20:20,625 --> 00:20:22,005
Quindi, qui dentro il file.

252
00:20:22,005 --> 00:20:26,645
Quindi, stai iniziando a vedere uno schema nel modo in cui le cose sono specificate qui.

253
00:20:26,645 --> 00:20:28,640
Quindi, quando specifichi i file qui,

254
00:20:28,640 --> 00:20:30,775
dirai la fonte,

255
00:20:30,775 --> 00:20:37,815
e poi dentro specificherai il CSS dist

256
00:20:37,815 --> 00:20:41,025
e poi il CSS del punto stella,

257
00:20:41,025 --> 00:20:47,295
e poi il prossimo dist js*.js.

258
00:20:47,295 --> 00:20:51,225
Quindi, con questo, hai configurato il filerev.

259
00:20:51,225 --> 00:20:53,625
Quindi, la parte filerev è configurata.

260
00:20:53,625 --> 00:20:58,820
E infine, abbiamo bisogno di configurare l'attività usemin.

261
00:20:58,820 --> 00:21:00,795
Quindi, per configurare l'attività usemin,

262
00:21:00,795 --> 00:21:04,125
vado qui e dico usemin,

263
00:21:04,125 --> 00:21:09,100
e qui mi permetta di specificare alcune opzioni per l'attività usemin.

264
00:21:09,100 --> 00:21:12,470
Quindi, qui specifico html.

265
00:21:12,470 --> 00:21:21,205
Quindi, qui sto specificando quali file deve cambiare,

266
00:21:22,255 --> 00:21:25,455
deve essere aggiornato.

267
00:21:25,455 --> 00:21:32,465
Quindi, i file che sono stati copiati nella cartella di distribuzione.

268
00:21:33,290 --> 00:21:41,975
E l'ultimo è «dist/index.html».

269
00:21:41,975 --> 00:21:50,300
Quindi questi sono i tre file che dovrebbe elaborare,

270
00:21:50,510 --> 00:21:55,095
e poi alcune opzioni per questo qui.

271
00:21:55,095 --> 00:22:04,970
Quindi, le opzioni che specificherò «AssetsDirs».

272
00:22:04,970 --> 00:22:10,520
Quindi, qui è dove esistono tutte le risorse che sto usando.

273
00:22:10,520 --> 00:22:14,355
Quindi, esistono i file CSS e JavaScript.

274
00:22:14,355 --> 00:22:21,715
Quindi, specificherò «dist/css» e «dist/js».

275
00:22:21,715 --> 00:22:27,020
Con questo, hai completato la configurazione dell'attività «usemin».

276
00:22:27,020 --> 00:22:30,930
Successivamente, configuriamo l'attività «htmlmin».

277
00:22:30,930 --> 00:22:32,870
Per l'attività «htmlmin»,

278
00:22:32,870 --> 00:22:37,160
abbiamo specificato la destinazione che è «dist», la cartella di distribuzione

279
00:22:37,160 --> 00:22:40,140
e il «htmlmin» da eseguire su

280
00:22:40,140 --> 00:22:44,690
tutti i file HTML che si trovano in quella cartella di distribuzione.

281
00:22:44,690 --> 00:22:49,560
Le opzioni che specifichiamo per questo stato che, diremo,

282
00:22:49,560 --> 00:22:53,945
«CollapsedWhitespace: True» significa che

283
00:22:53,945 --> 00:22:58,715
tutto lo spazio bianco nei file HTML verrebbe compresso, in

284
00:22:58,715 --> 00:23:04,670
modo che [inudibile] contenga solo il codice HTML minimo lì.

285
00:23:04,670 --> 00:23:08,095
La modifica rimuove essenzialmente

286
00:23:08,095 --> 00:23:12,390
tutti i caratteri estranei dai file «htmlmin».

287
00:23:12,390 --> 00:23:16,570
Ora, specifichiamo anche quel dizionario di file,

288
00:23:16,570 --> 00:23:18,880
quei file che devono essere configurati.

289
00:23:18,880 --> 00:23:22,910
Questo è specificato come destinazione, due punti, origine.

290
00:23:22,910 --> 00:23:28,835
Quindi, specifichiamo «dist/index.html»: «dist/index.html»,

291
00:23:28,835 --> 00:23:32,335
il che significa che il «index.html» nella cartella di distribuzione

292
00:23:32,335 --> 00:23:36,900
sarà [inudibile] e quindi rimesso nel file «index.html»,

293
00:23:36,900 --> 00:23:39,025
anche nella cartella di distribuzione.

294
00:23:39,025 --> 00:23:45,290
Allo stesso modo, il «contactus.html» specificato lì e poi il

295
00:23:45,290 --> 00:23:51,965
«aboutus.html» anche specificato come mostrato in quell'elenco di file.

296
00:23:51,965 --> 00:23:56,760
Il motivo per cui eseguiamo «htmlmin» dopo aver terminato «usemin»

297
00:23:56,760 --> 00:24:01,985
è perché «usemin» sostituirà tutti gli script

298
00:24:01,985 --> 00:24:06,925
con il file principale «.js» e anche tutto quel

299
00:24:06,925 --> 00:24:12,535
codice CSS concatenato e combinato e sostituito con il file principale «.css».

300
00:24:12,535 --> 00:24:15,490
Quindi il «htmlmin» verrà eseguito sui

301
00:24:15,490 --> 00:24:20,840
file HTML risultanti dopo che «usemin» ha completato il suo lavoro.

302
00:24:20,840 --> 00:24:24,605
Questo è come funziona in Grunt.

303
00:24:24,605 --> 00:24:31,060
Quindi il Grunt «htmlmin» deve essere applicato dopo che il «usemin» ha completato il suo lavoro.

304
00:24:31,060 --> 00:24:34,080
Quindi, una volta che tutti questi sono configurati,

305
00:24:34,080 --> 00:24:40,185
allora un piccolo passo che devo fare è tornare qui,

306
00:24:40,185 --> 00:24:45,285
e poi dove specifichiamo per il «jit-grunt»,

307
00:24:45,285 --> 00:24:50,005
dobbiamo specificare che questo «jit-grunt»,

308
00:24:50,005 --> 00:24:53,290
si ricorda che abbiamo introdotto qualcosa chiamato

309
00:24:53,290 --> 00:24:57,500
«useminPrepare» [inudibile] quindi è necessario informare il «jit-grunt»

310
00:24:57,500 --> 00:25:01,900
dicendo che la configurazione «UseminPrepare» che abbiamo introdotto sarà

311
00:25:01,900 --> 00:25:06,430
gestita da quel plugin «grunt-usemin» stesso.

312
00:25:06,430 --> 00:25:08,575
Quindi ho bisogno di specificare esplicitamente,

313
00:25:08,575 --> 00:25:14,260
altrimenti «jit-grunt» si cercherà un plugin Grunt «UseminPrepare».

314
00:25:14,260 --> 00:25:16,480
Quindi, per specificarlo,

315
00:25:16,480 --> 00:25:26,450
direi «useminPrepare» e dire «grunt-usemin»,

316
00:25:26,450 --> 00:25:30,950
essenzialmente informando «jit-grunt» dicendo che «useminPrepare» verrà

317
00:25:30,950 --> 00:25:35,960
gestito dal plugin «grunt-usemin» lì.

318
00:25:35,960 --> 00:25:41,490
Infine, riconfiguriamo l'attività «build» nella parte inferiore.

319
00:25:41,490 --> 00:25:46,520
Scendendo a quell'attività di «build» dopo «imagemin».

320
00:25:46,520 --> 00:25:49,530
Quindi abbiamo fatto «clean», «copy», «imagemin»,

321
00:25:49,530 --> 00:25:55,920
quindi il prossimo compito che dovrei eseguire è «useminPrepare» e poi dopo

322
00:25:55,920 --> 00:26:08,820
«useminPrepare» eseguo «contact», quindi eseguo «cssmin»,

323
00:26:08,820 --> 00:26:15,305
quindi eseguo «uglify».

324
00:26:15,305 --> 00:26:20,285
Quindi vedete che dobbiamo farli in una certa serie di passi.

325
00:26:20,285 --> 00:26:22,395
Una volta eseguiti «cssmin» e «uglify»,

326
00:26:22,395 --> 00:26:26,110
verranno creati i principali file «.css» e «.js» principali.

327
00:26:26,110 --> 00:26:28,610
Quindi, a questo punto, eseguirò il

328
00:26:28,610 --> 00:26:37,290
«filerev» e poi finalmente eseguo l'attività «usemin».

329
00:26:37,290 --> 00:26:40,475
Quindi vedi i segreti: «pulito», «copia»,

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

331
00:26:43,690 --> 00:26:47,210
A questo punto, i file «.css» e «.js»,

332
00:26:47,210 --> 00:26:49,815
i principali file «.css» e «.js» sono pronti.

333
00:26:49,815 --> 00:26:54,190
Posso fare il «filerev» su di loro e poi finalmente eseguire il «usemin».

334
00:26:54,190 --> 00:26:58,790
Ma questo, salviamo le modifiche e poi andiamo a

335
00:26:58,790 --> 00:27:03,960
vedere come l'attività «build» prepara effettivamente la distribuzione.

336
00:27:03,960 --> 00:27:06,855
[ inaudible] Andando al nostro terminale,

337
00:27:06,855 --> 00:27:13,605
al prompt digito «grunt build» e poi aspetto che tutti i compiti vengano eseguiti.

338
00:27:13,605 --> 00:27:16,870
Quindi vedresti che verrà eseguito attraverso tutto il set di attività,

339
00:27:16,870 --> 00:27:19,320
e poi finalmente quando è fatto,

340
00:27:19,320 --> 00:27:24,950
sta andando semplicemente specificare che tutte le attività sono fatte.

341
00:27:24,950 --> 00:27:29,345
Quindi, se vuoi tornare indietro e guardare la sequenza delle attività che sono state completate,

342
00:27:29,345 --> 00:27:31,760
puoi semplicemente scorrere indietro e vedere cosa fa.

343
00:27:31,760 --> 00:27:33,885
Prima pulisce,

344
00:27:33,885 --> 00:27:36,765
poi copia i file HTML,

345
00:27:36,765 --> 00:27:38,400
poi copia i file dei font,

346
00:27:38,400 --> 00:27:40,455
poi fa l'attività «imagemin»,

347
00:27:40,455 --> 00:27:42,550
poi fa «useminPrepare»,

348
00:27:42,550 --> 00:27:45,810
poi fa il «concat»,

349
00:27:45,830 --> 00:27:49,645
poi fa il «cssmin»,

350
00:27:49,645 --> 00:27:52,010
sia la distribuzione che generata,

351
00:27:52,010 --> 00:27:54,130
e poi fa il» uglify»,

352
00:27:54,130 --> 00:28:01,060
quindi «uglify» compito, quindi esegue il «filerev» e poi infine l'attività «usemin».

353
00:28:01,060 --> 00:28:03,920
E poi la nostra cartella di distribuzione dovrebbe ora essere pronta.

354
00:28:03,920 --> 00:28:07,775
Andando al nostro editor,

355
00:28:07,775 --> 00:28:11,070
ora si vede che la cartella di distribuzione è stata preparata.

356
00:28:11,070 --> 00:28:19,415
Diamo un'occhiata in particolare ai principali file «.css» e «.js».

357
00:28:19,415 --> 00:28:22,060
Prendere nota dei nomi di questi file.

358
00:28:22,060 --> 00:28:23,590
Si noti che dopo main,

359
00:28:23,590 --> 00:28:25,080
c'è un punto e poi c'è

360
00:28:25,080 --> 00:28:30,500
un hash di 20 caratteri che è stato aggiunto da «filerev» qui.

361
00:28:30,500 --> 00:28:34,605
Quindi, quello che succede è se preparo una nuova cartella di distribuzione,

362
00:28:34,605 --> 00:28:41,130
ogni volta che preparo la nuova cartella di distribuzione, questo hash cambia, il

363
00:28:41,130 --> 00:28:47,515
che significa che ogni volta che distribuisco una nuova versione del mio sito web,

364
00:28:47,515 --> 00:28:54,130
se qualche browser ha precedentemente visualizzato il mio sito web allora le loro voci di cache,

365
00:28:54,130 --> 00:28:57,210
dove potrebbe aver memorizzato nella cache il principale «.css» e principale «.js» è diventato

366
00:28:57,210 --> 00:29:02,195
invalidato perché abbiamo una nuova versione del principale «.css» e principale «.js».

367
00:29:02,195 --> 00:29:06,805
Quindi il browser scaricherà nuovamente queste cose.

368
00:29:06,805 --> 00:29:10,455
Non ho mostrato il «filerev» con gli script NPM,

369
00:29:10,455 --> 00:29:15,940
ma l'ho appena aggiunto qui solo per mostrarti come è fatto con Grunt.

370
00:29:15,940 --> 00:29:19,650
Quindi con questo, completiamo questo esercizio.

371
00:29:19,650 --> 00:29:26,035
Diamo una rapida occhiata al sito nel nostro browser.

372
00:29:26,035 --> 00:29:27,795
Andando al tuo browser,

373
00:29:27,795 --> 00:29:32,035
puoi vedere che ora sto caricando in «dist/index.html».

374
00:29:32,035 --> 00:29:34,200
Quindi questo è dalla cartella di distribuzione,

375
00:29:34,200 --> 00:29:39,260
quindi sto controllando e sembra proprio bene.

376
00:29:39,260 --> 00:29:44,440
Anche il «aboutus.html» sembra proprio bene, proprio come prima.

377
00:29:44,440 --> 00:29:51,060
E anche la pagina dei contatti sembra ben preparata per la distribuzione.

378
00:29:51,060 --> 00:29:54,970
Quindi con questo, completiamo questo esercizio.

379
00:29:54,970 --> 00:29:57,365
Dopo tutto il grugnito,

380
00:29:57,365 --> 00:30:00,560
sono sicuro che devi riprendere fiato.

381
00:30:00,560 --> 00:30:09,400
Prima di farlo, assicurati di fare un buon commento con il messaggio «Grunt Parte due».