1
00:00:03,510 --> 00:00:06,510
Vamos continuar com nossos grunhidos.

2
00:00:06,510 --> 00:00:11,175
Como fizemos na segunda parte do exercício de scripts NPM,

3
00:00:11,175 --> 00:00:14,660
nesta segunda parte desse exercício grunhido,

4
00:00:14,660 --> 00:00:17,080
vamos configurar exatamente as mesmas tarefas.

5
00:00:17,080 --> 00:00:20,475
Nós vamos fazer a limpeza da pasta de distribuição,

6
00:00:20,475 --> 00:00:23,175
copiando as fontes para a pasta de distribuição,

7
00:00:23,175 --> 00:00:29,780
então nós também vamos fazer a minificação de nossas imagens usando imagemin,

8
00:00:29,780 --> 00:00:37,530
e, finalmente, usar a tarefa usemin para construir e preparar nossa pasta de distribuição.

9
00:00:37,530 --> 00:00:40,420
Continuando com nosso exercício,

10
00:00:40,420 --> 00:00:43,590
vou instalar um par de módulos grunhidos.

11
00:00:43,590 --> 00:00:49,990
Então, vamos instalar o NPM, install-grunt-contrib-copy.

12
00:00:51,110 --> 00:01:00,665
Isso é usado para copiar os arquivos e, em seguida, grunt-contrib-clean,

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

14
00:01:04,575 --> 00:01:06,655
E uma vez que esses dois são instalados,

15
00:01:06,655 --> 00:01:10,595
então vamos em frente e configurar as tarefas correspondentes.

16
00:01:10,595 --> 00:01:12,800
Indo para o seu arquivo grunhido,

17
00:01:12,800 --> 00:01:19,770
adicionaremos a configuração para a cópia e as tarefas limpas.

18
00:01:19,770 --> 00:01:22,895
Então, começando com a vírgula,

19
00:01:22,895 --> 00:01:26,295
lembre-se sempre de não esquecer a vírgula.

20
00:01:26,295 --> 00:01:30,360
Vai voltar a morder-te nos momentos errados se fizeres isso.

21
00:01:30,360 --> 00:01:32,245
Então vamos configurar a tarefa de cópia.

22
00:01:32,245 --> 00:01:38,180
Para a cópia, usemin espera que também

23
00:01:38,180 --> 00:01:41,110
mantenhamos nossos arquivos HTML copiados para a pasta de distribuição para

24
00:01:41,110 --> 00:01:44,760
que ele possa fazer a manipulação sobre isso.

25
00:01:44,760 --> 00:01:47,250
Então, neste caso,

26
00:01:47,250 --> 00:01:48,630
vamos primeiro copiar

27
00:01:48,630 --> 00:01:53,440
os arquivos HTML da nossa pasta do projeto para a pasta de distribuição.

28
00:01:53,440 --> 00:01:55,330
Então, para fazer a cópia,

29
00:01:55,330 --> 00:02:01,535
eu vou configurar a parte HTML dele.

30
00:02:01,535 --> 00:02:04,740
Então, este é o lugar onde vamos usar alguns

31
00:02:04,740 --> 00:02:09,920
da sintaxe grunhido para especificar os arquivos que precisam ser copiados.

32
00:02:09,920 --> 00:02:19,880
Então, eu digo arquivos e também especificar as

33
00:02:19,880 --> 00:02:23,560
chaves direita, esquerda e direita lá para dentro disso,

34
00:02:23,560 --> 00:02:27,855
eu preciso especificar agora determinada configuração.

35
00:02:27,855 --> 00:02:37,600
Então, eu diria, expanda true e dot true, então CWD,

36
00:02:37,600 --> 00:02:42,015
o diretório de trabalho atual é dot slash,

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

38
00:02:44,440 --> 00:02:51,730
vamos configurar o próximo que é SRC, os arquivos fonte,

39
00:02:51,730 --> 00:02:56,690
e então os arquivos fonte são star.html,

40
00:02:56,690 --> 00:02:59,325
todos os arquivos HTML,

41
00:02:59,325 --> 00:03:05,850
e então nós vamos copiá-los para a pasta dist.

42
00:03:05,850 --> 00:03:10,135
Então é por isso que o destino está definido para a pasta de distribuição aqui.

43
00:03:10,135 --> 00:03:12,385
Então, com esta configuração,

44
00:03:12,385 --> 00:03:18,880
minha tarefa de cópia irá copiar todos os arquivos HTML para a pasta de distribuição.

45
00:03:18,880 --> 00:03:22,285
Agora, junto com isso, também precisamos copiar as fontes.

46
00:03:22,285 --> 00:03:26,200
Então, vou configurar o segundo para as fontes.

47
00:03:26,200 --> 00:03:31,090
Então, eu especificar fontes e, em seguida, aqui também eu preciso especificar

48
00:03:31,090 --> 00:03:37,500
os arquivos que precisam ser copiados e assim dizemos arquivos,

49
00:03:37,500 --> 00:03:41,780
e então esses são

50
00:03:41,780 --> 00:03:47,465
alguns parâmetros de configuração que você precisa configurar para a tarefa de cópia.

51
00:03:47,465 --> 00:03:49,225
Agora, se você precisa entender,

52
00:03:49,225 --> 00:03:54,510
então, lendo a documentação para o plugin grunhido correspondente,

53
00:03:54,510 --> 00:03:57,650
você será capaz de descobrir isso e assim ou você pode

54
00:03:57,650 --> 00:04:00,960
simplesmente seguir o exemplo que eu estou dando aqui.

55
00:04:00,960 --> 00:04:05,350
Então, dot true e, em seguida, CWD,

56
00:04:05,350 --> 00:04:14,780
o diretório de trabalho atual é módulos de nó e fonte impressionante.

57
00:04:14,780 --> 00:04:18,295
Então é daí que eu vou copiar os arquivos,

58
00:04:18,295 --> 00:04:27,180
e então a fonte dos arquivos é o fontsstar.star,

59
00:04:27,180 --> 00:04:30,310
esses são os arquivos que eu preciso copiar,

60
00:04:30,310 --> 00:04:38,370
e o destino é a pasta de distribuição.

61
00:04:38,370 --> 00:04:42,050
Então, com isso, eu configurei minha tarefa de cópia para copiar

62
00:04:42,050 --> 00:04:47,490
os arquivos HTML e os arquivos de fontes na minha pasta de distribuição.

63
00:04:47,490 --> 00:04:52,370
Agora, a próxima tarefa que vou configurar é a tarefa limpa.

64
00:04:52,370 --> 00:04:56,290
Então, deixe-me configurar a tarefa limpa.

65
00:04:56,540 --> 00:05:05,825
Para a tarefa limpa, configurarei a compilação

66
00:05:05,825 --> 00:05:13,460
e, em seguida, direi que a fonte é a pasta de distribuição.

67
00:05:13,460 --> 00:05:19,660
Então, essencialmente especificando que a pasta de distribuição deve ser limpa.

68
00:05:19,830 --> 00:05:27,835
Então, agora nós configuramos a cópia e as tarefas limpas então vamos salvar as alterações.

69
00:05:27,835 --> 00:05:31,530
A próxima tarefa que vou configurar é a tarefa imagemin.

70
00:05:31,530 --> 00:05:40,030
Isto é o que vamos usar para comprimir e copiar as imagens para a pasta de distribuição.

71
00:05:40,030 --> 00:05:44,200
Para começar com a tarefa imagemin, o primeiro passo,

72
00:05:44,200 --> 00:05:49,910
instale o plugin grunhido correspondente.

73
00:05:49,910 --> 00:06:00,520
Então, grunt-contrib-imagemin, menos save.dev.

74
00:06:00,520 --> 00:06:03,470
E uma vez que está instalado,

75
00:06:03,470 --> 00:06:07,330
então vamos em frente e configurar a tarefa imagemin correspondente.

76
00:06:07,330 --> 00:06:12,015
Indo para o nosso arquivo grunhido após a configuração para a tarefa limpa,

77
00:06:12,015 --> 00:06:15,620
eu vou configurar a tarefa imagemin.

78
00:06:15,620 --> 00:06:18,050
Então, eu vou dizer imagemin,

79
00:06:19,460 --> 00:06:22,055
e então bem ali,

80
00:06:22,055 --> 00:06:26,225
eu vou especificar dinâmico,

81
00:06:26,225 --> 00:06:30,950
e lá dentro eu vou especificar os arquivos para que você possa

82
00:06:30,950 --> 00:06:36,010
ver que a especificação do arquivo seria semelhante.

83
00:06:36,010 --> 00:06:39,130
Eu diria, expandir verdadeiro,

84
00:06:39,130 --> 00:06:46,830
então CWD é o diretório atual.

85
00:06:49,680 --> 00:06:58,350
Em seguida, a fonte dos arquivos é imagestar.

86
00:07:00,840 --> 00:07:05,405
e, em seguida, entre colchetes, dentro de chaves,

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

88
00:07:12,910 --> 00:07:17,000
Então, essencialmente, você pode ver o padrão global do arquivo aqui.

89
00:07:17,000 --> 00:07:18,640
Então ele diz qualquer

90
00:07:18,640 --> 00:07:21,610
arquivo PNG, GIF ou JPG que corresponde a este padrão e, em seguida,

91
00:07:21,610 --> 00:07:25,755
iniciar ponto significando todos os arquivos desse padrão,

92
00:07:25,755 --> 00:07:29,280
e fonte, e o destino,

93
00:07:29,280 --> 00:07:34,310
eu defini como a pasta de distribuição.

94
00:07:34,310 --> 00:07:37,790
Então, com isso, configuramos nossa

95
00:07:37,790 --> 00:07:39,425
tarefa de cópia, limpeza e imagemin.

96
00:07:39,425 --> 00:07:46,670
Vamos configurar uma tarefa aqui chamada compilação.

97
00:07:46,670 --> 00:07:49,365
Então, eu diria, registrar tarefa, tarefa de registro

98
00:07:49,365 --> 00:07:55,700
grunhido e, em seguida, eu vou nomear a tarefa como compilação,

99
00:07:55,700 --> 00:07:57,695
e, em seguida, dentro disso,

100
00:07:57,695 --> 00:08:03,160
vamos especificar as etapas de configuração a serem feitas pela tarefa de construção.

101
00:08:03,160 --> 00:08:09,105
Então, bem ali, ponto-e-vírgula e aí dentro,

102
00:08:09,105 --> 00:08:13,685
especificarei as três tarefas na sequência que devem ser executadas.

103
00:08:13,685 --> 00:08:16,650
Primeiro, vou dizer, limpo.

104
00:08:16,650 --> 00:08:19,420
Então, vamos limpar a pasta de distribuição

105
00:08:19,420 --> 00:08:22,340
e, em seguida, começar a reconstruir a pasta de distribuição.

106
00:08:22,340 --> 00:08:27,320
Limpo, então a próxima tarefa seria

107
00:08:27,320 --> 00:08:36,980
copiar e depois disso eu faria, imagemin.

108
00:08:37,380 --> 00:08:41,340
Então essas três tarefas a serem configuradas aqui.

109
00:08:41,340 --> 00:08:43,910
Então, com isso, deixe-me salvar as alterações.

110
00:08:43,910 --> 00:08:46,590
Vamos ver como essa coisa funciona.

111
00:08:46,590 --> 00:08:50,280
Agora, indo para o prompt se eu digitar,

112
00:08:50,280 --> 00:08:57,955
grunhir e construir, você verá que ele vai primeiro fazer a limpeza, em

113
00:08:57,955 --> 00:09:01,550
seguida, fazer a cópia e fazer a tarefa imagemin.

114
00:09:01,550 --> 00:09:05,600
Então, ele faz todos esses três e, em seguida, você veria imediatamente que

115
00:09:05,600 --> 00:09:11,810
a pasta de distribuição é construída na minha pasta de projeto aqui.

116
00:09:11,810 --> 00:09:15,200
E dentro da pasta de distribuição você pode ver que as fontes foram copiadas,

117
00:09:15,200 --> 00:09:16,590
as imagens foram copiadas e

118
00:09:16,590 --> 00:09:20,665
os três arquivos HTML foram copiados para a pasta de distribuição.

119
00:09:20,665 --> 00:09:22,350
Você só está na metade do caminho.

120
00:09:22,350 --> 00:09:29,370
Agora, precisamos ser capazes de processar esses arquivos usando o plugin usemin.

121
00:09:29,370 --> 00:09:31,675
Então, vamos a isso em seguida.

122
00:09:31,675 --> 00:09:35,140
Agora, vou instalar alguns módulos NPM

123
00:09:35,140 --> 00:09:38,555
que são úteis para construir a pasta de distribuição.

124
00:09:38,555 --> 00:09:42,225
Então, para fazer isso, eu diria instalar NPM.

125
00:09:42,225 --> 00:09:47,120
Eu posso especificar um conjunto de módulos aqui para,

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

127
00:09:52,300 --> 00:10:01,000
Então, este é usado para concatenar arquivos, depois grunt-contrib-cssmin,

128
00:10:01,000 --> 00:10:13,512
grunt-contrib-htmlmin, então digamos, grunt-contrib-uglify.

129
00:10:13,512 --> 00:10:18,240
Então grunt-filerev.

130
00:10:18,240 --> 00:10:21,910
Você verá a razão para usar filerev em um curto espaço de tempo,

131
00:10:21,910 --> 00:10:32,925
e, em seguida, grunt-usemin, e salvar def e, em seguida,

132
00:10:35,475 --> 00:10:40,050
instalar todos esses módulos grunhidos.

133
00:10:40,050 --> 00:10:42,205
Uma vez que todos eles foram instalados,

134
00:10:42,205 --> 00:10:44,305
o próximo passo é ir e configurar,

135
00:10:44,305 --> 00:10:47,625
usemin tarefa que também usa

136
00:10:47,625 --> 00:10:55,090
as tarefas cssmin Uglify Concat para realizar a construção da pasta de distribuição.

137
00:10:55,090 --> 00:10:59,140
Agora, vamos prosseguir configurando a tarefa usemin.

138
00:10:59,140 --> 00:11:03,750
Então, voltando para o arquivo grunhido após imagemin,

139
00:11:03,750 --> 00:11:10,950
eu vou adicionar na próxima tarefa para usemin trabalhar com o grunhido.

140
00:11:10,950 --> 00:11:17,165
A primeira tarefa que eu preciso configurar é chamada UseMinPrepare.

141
00:11:19,145 --> 00:11:25,175
Esta tarefa UseMinPrepare irá preparar os arquivos e, em seguida, também configurar

142
00:11:25,175 --> 00:11:32,655
o ConCache CSS min e Uglify e arquivo ref plugins,

143
00:11:32,655 --> 00:11:35,070
para que eles possam fazer o seu trabalho corretamente.

144
00:11:35,070 --> 00:11:36,915
Então, essa é a razão para o UseMinPrepare.

145
00:11:36,915 --> 00:11:42,220
Então, é assim que o plugin de concessão usemin foi projetado.

146
00:11:42,220 --> 00:11:48,340
Um pouco diferente da forma como o usemin que usamos com os scripts do jogo final wooks.

147
00:11:48,340 --> 00:11:50,295
Então, no UseMinPrepare,

148
00:11:50,295 --> 00:11:59,590
apenas algum nome aleatório que eu vou usar e, em seguida, dizer destino é dist.

149
00:11:59,590 --> 00:12:08,730
E então eu especificaria a fonte como todos os arquivos html aqui.

150
00:12:08,730 --> 00:12:13,605
Então eu diria 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
Então, todos esses três arquivos precisam ser processados.

153
00:12:26,915 --> 00:12:30,765
A próxima parte desta configuração usemin, configuração

154
00:12:30,765 --> 00:12:37,735
UseMinPrepare é onde eu especificar as opções.

155
00:12:38,115 --> 00:12:43,245
Isso é algo que eu descobri por tentativa e erro.

156
00:12:44,995 --> 00:12:47,395
Basta seguir ao longo dos degraus.

157
00:12:47,395 --> 00:12:48,845
Então eu preciso configurar

158
00:12:48,845 --> 00:12:54,125
algumas coisas aqui dentro onde eu preciso configurar algo chamado Flow.

159
00:12:54,125 --> 00:13:00,695
E, em seguida, dentro lá eu preciso configurar outra parte chamada Passos,

160
00:13:00,695 --> 00:13:07,875
e então aqui eu especificar os passos aqui e, em seguida, dizer cssmin,

161
00:13:07,915 --> 00:13:14,645
e depois disso eu vou dizer js é feio.

162
00:13:14,645 --> 00:13:21,515
Então, isso é algo que eu preciso especificar aqui e depois disso eu digo post,

163
00:13:24,405 --> 00:13:29,695
e aqui eu posso permitir que isso forneça

164
00:13:29,695 --> 00:13:36,475
algumas opções para suas tarefas específicas que eu configurei.

165
00:13:36,475 --> 00:13:40,175
Então, eu estou fornecendo algumas opções adicionais para css.

166
00:13:40,175 --> 00:13:44,540
Então, isso é fornecido dentro do post aqui.

167
00:13:44,540 --> 00:13:49,485
Agora, novamente, é assim que a configuração tem que ser feita.

168
00:13:49,485 --> 00:13:52,695
Então, nós apenas aprendemos olhando para a documentação lá.

169
00:13:52,695 --> 00:13:55,390
Então, aqui dentro do post css,

170
00:13:55,390 --> 00:13:59,275
eu especificaria um nome como cssmin.

171
00:13:59,275 --> 00:14:01,450
Até agora isso aqui é tarefa cssmin.

172
00:14:01,450 --> 00:14:07,974
Eu diria CreateConfig:

173
00:14:08,775 --> 00:14:17,005
bloco de contexto de função, e, em seguida, dentro dessas funções

174
00:14:17,005 --> 00:14:19,955
eu tenho que fornecer certos parâmetros.

175
00:14:19,955 --> 00:14:22,175
Então, eu diria var

176
00:14:22,175 --> 00:14:31,835
gerado gerador de opções de contexto.

177
00:14:31,835 --> 00:14:34,685
Então esta é alguma variável JavaScript que eu preciso

178
00:14:34,685 --> 00:14:38,705
especificar lá, JavaScript objeto essencialmente.

179
00:14:38,705 --> 00:14:44,185
Então, este objeto contém essa propriedade chamada options,

180
00:14:44,185 --> 00:14:48,005
onde eu posso especificar algumas opções que são passadas

181
00:14:48,005 --> 00:14:51,485
para o CSS min encarregado pela tarefa de preparar usemin.

182
00:14:51,485 --> 00:14:56,310
Então, lá dentro, mantenha

183
00:14:56,310 --> 00:15:02,105
comentários especiais e, em seguida,

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

185
00:15:08,635 --> 00:15:16,025
Aparentemente eu preciso fornecer isso para que minha tarefa cssmin manipule atualmente

186
00:15:16,025 --> 00:15:23,855
a modificação incrível fonte e inclusão no arquivo concatenado.

187
00:15:23,855 --> 00:15:25,390
Se eu não fizer

188
00:15:25,390 --> 00:15:29,380
isso, parece quebrar a fonte incrível e isso é algo que eu descobri,

189
00:15:29,380 --> 00:15:31,890
fazendo um pouco de

190
00:15:31,890 --> 00:15:37,285
pesquisa sobre estouro de pilha e alguns desses lugares e descobri

191
00:15:37,285 --> 00:15:42,505
que seu problema que está sendo causado com fonte impressionante pode ser

192
00:15:42,505 --> 00:15:48,619
corrigido, incluindo isso em Minha configuração grunhida.

193
00:15:48,619 --> 00:15:51,445
Então, novamente eu acabei de olhar para cima

194
00:15:51,445 --> 00:15:55,810
as sugestões de algumas pessoas que tentaram e para corrigir o problema.

195
00:15:55,810 --> 00:15:58,465
Então, se você encontrar problemas como este,

196
00:15:58,465 --> 00:16:02,675
esta é uma maneira de resolver problemas que podem surgir quando você está

197
00:16:02,675 --> 00:16:07,525
trabalhando com essas várias ferramentas.

198
00:16:07,525 --> 00:16:14,710
Deixe-me adicionar a próxima tarefa para Concat.

199
00:16:14,710 --> 00:16:21,180
Vou especificar algumas coisas aqui e opções.

200
00:16:21,180 --> 00:16:28,135
Eu especifico este ponto e vírgula,

201
00:16:28,135 --> 00:16:31,215
então isso é algo que eu preciso especificar para o Concat,

202
00:16:31,215 --> 00:16:37,725
e então também depois de

203
00:16:37,725 --> 00:16:43,180
opções eu especificar dist como vazio.

204
00:16:43,180 --> 00:16:48,385
Agora, essas opções Concat serão configuradas pelo UseMinPrepare que é executado anteriormente.

205
00:16:48,385 --> 00:16:50,435
Então, podemos deixar a maior parte dele em branco lá,

206
00:16:50,435 --> 00:16:54,005
e então isso seria reconfigurado pelo UseMinPrepare.

207
00:16:54,005 --> 00:16:57,005
O próximo é feio.

208
00:16:57,665 --> 00:17:06,055
Dentro uglify também eu só preciso especificar este dist como vazio.

209
00:17:06,055 --> 00:17:08,255
Se eu não especificar estes,

210
00:17:08,255 --> 00:17:12,890
a tarefa usemin não funcionará corretamente.

211
00:17:12,890 --> 00:17:16,785
Então, é por isso que eu preciso especificar todas essas coisas explicitamente.

212
00:17:16,785 --> 00:17:21,905
Então, para cssmin também eu diria dist vazio.

213
00:17:21,905 --> 00:17:29,005
E então, a próxima tarefa que vou configurar é chamada filerev.

214
00:17:29,625 --> 00:17:36,725
Então, você me viu instalando o plugin filerev para Grunt.

215
00:17:36,725 --> 00:17:38,480
O que esse filerev faz?

216
00:17:38,480 --> 00:17:44,640
O que o filerev faz é quando usemin prepara o arquivo main.css e main.js,

217
00:17:44,640 --> 00:17:53,170
o que filerev faz é adicionar uma extensão adicional a esse nome principal, de

218
00:17:53,170 --> 00:18:02,070
modo que quando você preparar uma nova versão do seu site e carregá-lo para a página da web,

219
00:18:02,070 --> 00:18:05,895
no caso de alguém ter visto seu site mais cedo,

220
00:18:05,895 --> 00:18:12,030
então seu navegador pode ter descontado os arquivos main.css e main.js.

221
00:18:12,030 --> 00:18:15,675
Se você não anexar este filerev o que acontece é que,

222
00:18:15,675 --> 00:18:21,480
o navegador abaixo baixa a nova versão da sua página web.

223
00:18:21,480 --> 00:18:24,605
Pode não baixar o arquivo main.js e main.css

224
00:18:24,605 --> 00:18:28,515
porque os encontra já no cache local.

225
00:18:28,515 --> 00:18:31,820
Então, sua página da Web pode não ser renderizada corretamente.

226
00:18:31,820 --> 00:18:33,725
Então, para lidar com o problema,

227
00:18:33,725 --> 00:18:37,535
o que fazemos é toda vez que preparamos uma nova pasta de distribuição,

228
00:18:37,535 --> 00:18:41,235
vamos adicionar uma revisão de arquivo.

229
00:18:41,235 --> 00:18:43,045
Isso é o que o filerev significa,

230
00:18:43,045 --> 00:18:44,985
o número de revisão do arquivo,

231
00:18:44,985 --> 00:18:54,100
como uma extensão adicional para o nome desses arquivos css e js.

232
00:18:54,100 --> 00:18:56,950
Os arquivos main.ss e main.js o pré-preparado.

233
00:18:56,950 --> 00:18:58,820
Então é isso que o filerev faz.

234
00:18:58,820 --> 00:19:02,440
Agora, como esse filerev pode calcular esse valor?

235
00:19:02,440 --> 00:19:07,685
Ele leva o conteúdo desses arquivos e, em seguida, faz algum processamento e, em seguida, gera

236
00:19:07,685 --> 00:19:14,655
um md5 comprimido 20 caracteres número que será anexado ao arquivo principal.

237
00:19:14,655 --> 00:19:17,440
Então, eu vou configurar essa parte aqui.

238
00:19:17,440 --> 00:19:20,245
Então, nas opções,

239
00:19:20,245 --> 00:19:30,990
eu especifico aqui dizendo como é suposto calcular esse número lá.

240
00:19:30,990 --> 00:19:33,740
Então, eu digo codificação utf8,

241
00:19:33,740 --> 00:19:40,150
e então eu digo algoritmo que ele usou para calcular esse hash,

242
00:19:40,150 --> 00:19:43,544
o que chamamos como hash é md5.

243
00:19:43,544 --> 00:19:47,060
Agora, ele vai ficar mais claro quando nós realmente executar

244
00:19:47,060 --> 00:19:53,020
a tarefa Usemin e então ver o que ele faz, comprimento 20.

245
00:19:53,020 --> 00:19:55,475
Então, eu vou voltar e explicar o que essa coisa

246
00:19:55,475 --> 00:19:59,460
faz quando nós realmente executar a tarefa usemin.

247
00:19:59,460 --> 00:20:06,790
Então, deixe-me terminar as opções aqui e então eu diria liberar.

248
00:20:06,790 --> 00:20:10,855
Então, eu preciso configurar mais algumas coisas aqui e, em seguida, liberar,

249
00:20:10,855 --> 00:20:18,150
e então eu preciso especificar os arquivos para os quais meu filerev deve agir.

250
00:20:18,150 --> 00:20:20,625
Então, eu diria arquivos filerev.

251
00:20:20,625 --> 00:20:22,005
Então, dentro do arquivo.

252
00:20:22,005 --> 00:20:26,645
Então, você está começando a ver um padrão na maneira como as coisas são especificadas aqui.

253
00:20:26,645 --> 00:20:28,640
Então, quando você especificar os arquivos aqui,

254
00:20:28,640 --> 00:20:30,775
você vai dizer a fonte,

255
00:20:30,775 --> 00:20:37,815
e então lá você vai especificar dist CSS

256
00:20:37,815 --> 00:20:41,025
e, em seguida, estrela dot CSS,

257
00:20:41,025 --> 00:20:47,295
e, em seguida, o próximo dist js*.js.

258
00:20:47,295 --> 00:20:51,225
Então, com isso, você configurou o filerev.

259
00:20:51,225 --> 00:20:53,625
Então, a parte filerev está configurada.

260
00:20:53,625 --> 00:20:58,820
E, finalmente, precisamos configurar a tarefa usemin.

261
00:20:58,820 --> 00:21:00,795
Então, para configurar a tarefa usemin,

262
00:21:00,795 --> 00:21:04,125
eu descer aqui e dizer usemin,

263
00:21:04,125 --> 00:21:09,100
e aqui deixe-me especificar algumas opções para a tarefa usemin.

264
00:21:09,100 --> 00:21:12,470
Então, aqui eu especifico html.

265
00:21:12,470 --> 00:21:21,205
Então, aqui estou especificando para ele quais arquivos ele precisa mudar,

266
00:21:22,255 --> 00:21:25,455
ele precisa atualizar.

267
00:21:25,455 --> 00:21:32,465
Então, os arquivos que foram copiados para a pasta de distribuição.

268
00:21:33,290 --> 00:21:41,975
E o último é “dist/index.html”.

269
00:21:41,975 --> 00:21:50,300
Então estes são os três arquivos que ele deve processar,

270
00:21:50,510 --> 00:21:55,095
e então algumas opções para isso aqui.

271
00:21:55,095 --> 00:22:04,970
Então, as opções que especificarei “AssetsDirs.”

272
00:22:04,970 --> 00:22:10,520
Então, é aqui que todos os ativos que estou usando existem.

273
00:22:10,520 --> 00:22:14,355
Então, os arquivos CSS e JavaScript existem.

274
00:22:14,355 --> 00:22:21,715
Então, vou especificar “dist/css” e “dist/js”.

275
00:22:21,715 --> 00:22:27,020
Com isso, você concluiu a configuração da tarefa “usemin”.

276
00:22:27,020 --> 00:22:30,930
Em seguida, configuramos a tarefa “htmlmin”.

277
00:22:30,930 --> 00:22:32,870
Para a tarefa “htmlmin”,

278
00:22:32,870 --> 00:22:37,160
especificamos o destino que é “dist”, a pasta de distribuição

279
00:22:37,160 --> 00:22:40,140
e o “htmlmin” a ser executado em

280
00:22:40,140 --> 00:22:44,690
todos os arquivos HTML que estão nessa pasta de distribuição.

281
00:22:44,690 --> 00:22:49,560
As opções que especificamos para este estado que, vamos dizer,

282
00:22:49,560 --> 00:22:53,945
“CollapsedWhiteSpace: True” significa que

283
00:22:53,945 --> 00:22:58,715
todo o espaço em branco nos arquivos HTML seria recolhido, de

284
00:22:58,715 --> 00:23:04,670
modo que o [inaudível] contenha apenas o código HTML mínimo lá.

285
00:23:04,670 --> 00:23:08,095
A modificação remove essencialmente

286
00:23:08,095 --> 00:23:12,390
todos os caracteres estranhos dos arquivos “htmlmin”.

287
00:23:12,390 --> 00:23:16,570
Agora, também especificamos esse dicionário de arquivos,

288
00:23:16,570 --> 00:23:18,880
aqueles arquivos que precisam ser configurados.

289
00:23:18,880 --> 00:23:22,910
Isso é especificado como destino, dois-pontos, origem.

290
00:23:22,910 --> 00:23:28,835
Então, especificamos “dist/index.html”: “dist/index.html”,

291
00:23:28,835 --> 00:23:32,335
o que significa que o “index.html” na pasta de distribuição

292
00:23:32,335 --> 00:23:36,900
será [inaudível] e, em seguida, colocado de volta no arquivo “index.html”,

293
00:23:36,900 --> 00:23:39,025
também na pasta de distribuição.

294
00:23:39,025 --> 00:23:45,290
Da mesma forma, o “contactus.html” especificado lá e, em seguida, o

295
00:23:45,290 --> 00:23:51,965
“aboutus.html” também especificado como mostrado na lista de arquivos.

296
00:23:51,965 --> 00:23:56,760
A razão pela qual executamos “htmlmin” depois de terminarmos “usemin”

297
00:23:56,760 --> 00:24:01,985
é porque “usemin” substituirá todos os scripts

298
00:24:01,985 --> 00:24:06,925
com o arquivo “.js” principal e também todo esse

299
00:24:06,925 --> 00:24:12,535
código CSS concatenado e combinado e substituído pelo arquivo “.css” principal.

300
00:24:12,535 --> 00:24:15,490
Assim, o “htmlmin” será executado nos

301
00:24:15,490 --> 00:24:20,840
arquivos HTML resultantes após o “usemin” ter concluído seu trabalho.

302
00:24:20,840 --> 00:24:24,605
É assim que funciona em Grunt.

303
00:24:24,605 --> 00:24:31,060
Assim, o Grunt “htmlmin” tem que ser aplicado após o “usemin” ter concluído seu trabalho.

304
00:24:31,060 --> 00:24:34,080
Então, uma vez que todos estes são configurados,

305
00:24:34,080 --> 00:24:40,185
então um pequeno passo que eu preciso fazer é voltar aqui,

306
00:24:40,185 --> 00:24:45,285
e então onde nós especificamos para o “jit-grunhido”,

307
00:24:45,285 --> 00:24:50,005
nós precisamos especificar que este “jit-grunt”,

308
00:24:50,005 --> 00:24:53,290
você lembra que nós introduzimos algo chamado de

309
00:24:53,290 --> 00:24:57,500
“UseMinPrepare” [inaudível] então você precisa informar o “jit-grunhido”

310
00:24:57,500 --> 00:25:01,900
dizendo que a configuração “UseMinPrepare” que introduzimos vai ser

311
00:25:01,900 --> 00:25:06,430
tratada pelo próprio plugin “grunt-usemin”.

312
00:25:06,430 --> 00:25:08,575
Então eu preciso especificar explicitamente,

313
00:25:08,575 --> 00:25:14,260
caso contrário “jit-grunt” vai olhar ao redor para um plugin Grunt “UseMinPrepare”.

314
00:25:14,260 --> 00:25:16,480
Então, para especificar a isso,

315
00:25:16,480 --> 00:25:26,450
eu diria “UseMinPrepare” e dizer “grunt-usemin”,

316
00:25:26,450 --> 00:25:30,950
essencialmente informando “jit-grunhido” dizendo que o “UseMinPrepare” vai ser

317
00:25:30,950 --> 00:25:35,960
tratado pelo plugin “grunt-usemin” lá.

318
00:25:35,960 --> 00:25:41,490
Finalmente, vamos reconfigurar a tarefa “build” na parte inferior.

319
00:25:41,490 --> 00:25:46,520
Descendo para aquela tarefa de “construir” depois de “imagemin”.

320
00:25:46,520 --> 00:25:49,530
Então fizemos “clean”, “copy”, “imagemin”,

321
00:25:49,530 --> 00:25:55,920
então a próxima tarefa que eu deveria executar é “UseMinPrepare” e depois de

322
00:25:55,920 --> 00:26:08,820
“UseMinPrepare” executar “contact”, então eu executo “cssmin”,

323
00:26:08,820 --> 00:26:15,305
então eu executo “uglify”.

324
00:26:15,305 --> 00:26:20,285
Então você vê que nós temos que fazê-los em um determinado conjunto de passos.

325
00:26:20,285 --> 00:26:22,395
Uma vez que o “cssmin” e o “uglify” sejam executados,

326
00:26:22,395 --> 00:26:26,110
então os principais arquivos “.css” e os principais “.js” seriam criados.

327
00:26:26,110 --> 00:26:28,610
Então, neste ponto, eu vou executar o

328
00:26:28,610 --> 00:26:37,290
“filerev” e, finalmente, eu executar a tarefa “usemin”.

329
00:26:37,290 --> 00:26:40,475
Então você vê os segredos: “limpar”, “copiar”,

330
00:26:40,475 --> 00:26:43,690
“imagemin”, “UseMinPrepare”, “concat”, “cssmin”, “feio”.

331
00:26:43,690 --> 00:26:47,210
Neste ponto, os arquivos “.css” e “.js”,

332
00:26:47,210 --> 00:26:49,815
os principais arquivos “.css” e “.js” principais estão prontos.

333
00:26:49,815 --> 00:26:54,190
Posso fazer o “filerev” neles e, finalmente, executar o “usemin”.

334
00:26:54,190 --> 00:26:58,790
Mas isso, vamos salvar as alterações e, em seguida, ir e

335
00:26:58,790 --> 00:27:03,960
ver como a tarefa “build” realmente prepara a distribuição.

336
00:27:03,960 --> 00:27:06,855
[ inaudível] Indo para o nosso terminal,

337
00:27:06,855 --> 00:27:13,605
no prompt eu digite “build grunhido” e, em seguida, esperar que todas as tarefas sejam executadas.

338
00:27:13,605 --> 00:27:16,870
Então você veria que ele vai correr através de todo o conjunto de tarefas,

339
00:27:16,870 --> 00:27:19,320
e então, finalmente, quando ele é feito,

340
00:27:19,320 --> 00:27:24,950
ele vai simplesmente especificar que todas as tarefas são feitas.

341
00:27:24,950 --> 00:27:29,345
Então, se você quiser voltar e olhar para a sequência das tarefas que foram concluídas,

342
00:27:29,345 --> 00:27:31,760
você pode simplesmente rolar para trás e ver o que ele faz.

343
00:27:31,760 --> 00:27:33,885
Primeiro limpa,

344
00:27:33,885 --> 00:27:36,765
depois copia os arquivos HTML,

345
00:27:36,765 --> 00:27:38,400
depois copia os arquivos de fonte,

346
00:27:38,400 --> 00:27:40,455
depois faz a tarefa “imagemin”,

347
00:27:40,455 --> 00:27:42,550
depois faz o “UseMinPrepare”,

348
00:27:42,550 --> 00:27:45,810
depois faz o “concat”,

349
00:27:45,830 --> 00:27:49,645
depois faz o “cssmin”,

350
00:27:49,645 --> 00:27:52,010
tanto a distribuição quanto o gerado,

351
00:27:52,010 --> 00:27:54,130
e depois faz o” uglify”,

352
00:27:54,130 --> 00:28:01,060
depois “uglify” tarefa, então ele executa o “filerev” e, finalmente, a tarefa “usemin”.

353
00:28:01,060 --> 00:28:03,920
E então nossa pasta de distribuição deve estar pronta.

354
00:28:03,920 --> 00:28:07,775
Indo ao nosso editor,

355
00:28:07,775 --> 00:28:11,070
agora você vê que a pasta de distribuição foi preparada.

356
00:28:11,070 --> 00:28:19,415
Vejamos especificamente os principais arquivos “.css” e “.js” principais.

357
00:28:19,415 --> 00:28:22,060
Observe os nomes desses arquivos.

358
00:28:22,060 --> 00:28:23,590
Observe que após main,

359
00:28:23,590 --> 00:28:25,080
há um ponto e, em seguida, há

360
00:28:25,080 --> 00:28:30,500
um hash de 20 caracteres que foi adicionado por “filerev” aqui.

361
00:28:30,500 --> 00:28:34,605
Então, o que acontece é que se eu preparar uma nova pasta de distribuição,

362
00:28:34,605 --> 00:28:41,130
toda vez que eu preparar a nova pasta de distribuição, esse hash muda, o

363
00:28:41,130 --> 00:28:47,515
que significa que toda vez que eu imploro uma nova versão do meu site,

364
00:28:47,515 --> 00:28:54,130
se algum navegador tiver visualizado anteriormente meu site, então suas entradas de cache,

365
00:28:54,130 --> 00:28:57,210
onde eles pode ter armazenado em cache o principal “.css” e o principal “.js” tornou-se

366
00:28:57,210 --> 00:29:02,195
invalidado porque temos uma nova versão do principal “.css” e principal “.js”.

367
00:29:02,195 --> 00:29:06,805
Então, o navegador irá baixar novamente essas coisas.

368
00:29:06,805 --> 00:29:10,455
Eu não mostrei o “filerev” com os scripts NPM,

369
00:29:10,455 --> 00:29:15,940
mas eu acabei de adicioná-lo aqui apenas para mostrar como é feito com o Grunt.

370
00:29:15,940 --> 00:29:19,650
Então, com isso, completamos este exercício.

371
00:29:19,650 --> 00:29:26,035
Vamos dar uma olhada rápida no site em nosso navegador.

372
00:29:26,035 --> 00:29:27,795
Indo para o seu navegador,

373
00:29:27,795 --> 00:29:32,035
você pode ver que agora estou carregando em “dist/index.html”.

374
00:29:32,035 --> 00:29:34,200
Então isso é da pasta de distribuição,

375
00:29:34,200 --> 00:29:39,260
então eu estou checando e parece muito bem.

376
00:29:39,260 --> 00:29:44,440
O “aboutus.html” também parece muito bem, assim como antes.

377
00:29:44,440 --> 00:29:51,060
E a página de contato também parece bem preparada para implantação.

378
00:29:51,060 --> 00:29:54,970
Então, com isso, completamos este exercício.

379
00:29:54,970 --> 00:29:57,365
Depois de todos os grunhidos,

380
00:29:57,365 --> 00:30:00,560
tenho certeza que precisa recuperar o fôlego.

381
00:30:00,560 --> 00:30:09,400
Antes de fazer isso, certifique-se de fazer um bom comentário com a mensagem “Grunt Parte Dois”.