1
00:00:00,000 --> 00:00:04,535
[MÚSICA]

2
00:00:04,535 --> 00:00:10,479
Agora vamos continuar nossa jornada com scripts NPM neste próximo exercício.

3
00:00:10,479 --> 00:00:15,182
Aqui, vamos aprender como construir

4
00:00:15,182 --> 00:00:20,335
uma pasta de distribuição que contém todos os arquivos para o

5
00:00:20,335 --> 00:00:27,970
nosso projeto que podemos simplesmente implantar em um servidor web que hospeda nosso site.

6
00:00:27,970 --> 00:00:33,050
Então, dados os arquivos HTML, CSS e JavaScript que

7
00:00:33,050 --> 00:00:39,010
já preparamos em nossa pasta do projeto, vamos

8
00:00:39,010 --> 00:00:44,895
processá-los usando as várias tarefas que falamos.

9
00:00:44,895 --> 00:00:49,246
Isso é fazer uma modificação CSS,

10
00:00:49,246 --> 00:00:54,740
concatenação e uglification JavaScript, minificação e minificação

11
00:00:54,740 --> 00:00:59,230
HTML e, em

12
00:00:59,230 --> 00:01:04,895
seguida, gerar uma pasta de distribuição com todos os arquivos.

13
00:01:04,895 --> 00:01:09,520
Mas essencialmente forma o conjunto de arquivos que podem ser

14
00:01:09,520 --> 00:01:13,200
implantados em nosso servidor web que hospeda nosso site.

15
00:01:15,165 --> 00:01:21,005
Para ajudá-lo a entender o que vamos fazer neste exercício específico,

16
00:01:22,085 --> 00:01:29,102
como observamos em nossa página index.html, temos um conjunto de

17
00:01:29,102 --> 00:01:34,352
arquivos CSS que você incluiu aqui usando esta tag link aqui.

18
00:01:34,352 --> 00:01:38,742
Da mesma forma, você tem um conjunto de scripts que você incluiu

19
00:01:38,742 --> 00:01:42,847
na parte inferior desta página usando a tag de script.

20
00:01:42,847 --> 00:01:46,152
Incluímos um conjunto de código JavaScript.

21
00:01:46,152 --> 00:01:51,150
Agora, o que vamos fazer neste exercício é combinar todos esses

22
00:01:51,150 --> 00:01:56,760
arquivos em um único arquivo JavaScript que será entregue

23
00:01:56,760 --> 00:02:03,710
do nosso servidor web para um navegador que está tentando visualizar nosso site.

24
00:02:03,710 --> 00:02:08,480
Desta forma, minimizamos o número de downloads que o navegador precisa fazer

25
00:02:08,480 --> 00:02:10,930
para renderizar nosso site.

26
00:02:10,930 --> 00:02:16,960
Da mesma forma, vamos combinar todo o código CSS em um único arquivo CSS,

27
00:02:16,960 --> 00:02:18,325
para que ele possa ser entregue.

28
00:02:18,325 --> 00:02:24,353
Assim, o arquivo CSS combinado conterá todo o código para

29
00:02:24,353 --> 00:02:31,751
Bootstrap mais Bootstrap social, e também o Font Awesome e

30
00:02:31,751 --> 00:02:36,697
também o código CSS que nós mesmos escrevemos.

31
00:02:36,697 --> 00:02:40,351
Da mesma forma, haverá um único arquivo JavaScript que

32
00:02:40,351 --> 00:02:45,297
conterá o jQuery tether, Bootstrap e o código JavaScript que nós

33
00:02:45,297 --> 00:02:49,790
mesmos escrevemos, todos juntos em um único arquivo.

34
00:02:49,790 --> 00:02:53,610
Agora, é assim que você pode fazer a implantação de suas páginas da Web.

35
00:02:53,610 --> 00:02:58,190
E em vez de ter vários desses arquivos lá, uma maneira que a

36
00:02:59,560 --> 00:03:03,750
implantação é feita é combiná-los em um único arquivo para que um único download

37
00:03:03,750 --> 00:03:08,840
você obtenha todo o código JavaScript necessário para renderizar sua página web.

38
00:03:08,840 --> 00:03:11,810
Um único download você obtém todo o código CSS necessário para

39
00:03:11,810 --> 00:03:13,200
renderizar sua página web.

40
00:03:13,200 --> 00:03:16,590
E então, é claro, o arquivo HTML em si será baixado.

41
00:03:18,530 --> 00:03:23,390
Para que essas tarefas sejam concluídas, precisamos usar

42
00:03:23,390 --> 00:03:29,070
um determinado conjunto de módulos NPM para realizar isso.

43
00:03:29,070 --> 00:03:33,810
Agora, o que vamos acabar fazendo é construir uma pasta

44
00:03:33,810 --> 00:03:38,760
em nosso arquivo de projetos, e então chamamos essa pasta como dist, D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
Estou apenas nomeando isso aleatoriamente como uma pasta dist.

46
00:03:42,580 --> 00:03:47,100
No meu caso, o que quero dizer com a pasta dist é uma pasta de distribuição.

47
00:03:47,100 --> 00:03:51,270
No final do conjunto de passos que vamos fazer, esta pasta conterá todos

48
00:03:51,270 --> 00:03:59,510
os arquivos que podem ser simplesmente copiados para o servidor web que hospeda nosso site.

49
00:03:59,510 --> 00:04:03,930
Para começar, o que vamos fazer é configurar um conjunto de

50
00:04:05,140 --> 00:04:10,960
scripts aqui que nos ajudarão a automatizar esse processo.

51
00:04:10,960 --> 00:04:13,930
Então, a primeira coisa, podemos

52
00:04:13,930 --> 00:04:18,850
preparar a pasta de distribuição uma vez, então talvez possamos fazer algumas edições em

53
00:04:18,850 --> 00:04:23,310
nossos arquivos fonte, em seguida, podemos precisar recompilar nossa pasta de distribuição.

54
00:04:24,420 --> 00:04:29,370
Primeiro passo, nós iria configurar o script para limpar essa pasta de distribuição

55
00:04:29,370 --> 00:04:33,050
essencialmente, o que significa, excluir a pasta de distribuição.

56
00:04:33,050 --> 00:04:37,950
Então, para fazer isso, eu vou pegar a ajuda de um módulo NPM chamado como rimfraf.

57
00:04:37,950 --> 00:04:47,760
Então vou instalar o npm —save-dev rimfraf.

58
00:04:47,760 --> 00:04:51,920
Este módulo nos ajuda a limpar completamente uma pasta.

59
00:04:51,920 --> 00:04:56,370
Então, uma vez que eu tenha instalado isso, então eu vou configurar um script

60
00:04:56,370 --> 00:05:01,550
no meu arquivo package.json para limpar todos os arquivos.

61
00:05:01,550 --> 00:05:05,360
Indo para o arquivo package.json, eu vou adicionar, então

62
00:05:05,360 --> 00:05:11,380
lembre-se sempre que coma é muito, muito importante nesses scripts.

63
00:05:11,380 --> 00:05:15,200
Às vezes você vai ter problemas só porque você esqueceu a vírgula.

64
00:05:15,200 --> 00:05:18,230
Então certifique-se de colocar essas vírgulas onde necessário.

65
00:05:18,230 --> 00:05:21,800
A próxima descrição que eu vou adicionar é, limpo,

66
00:05:23,410 --> 00:05:29,000
obviamente como o nome indica, isso vai limpar minha pasta.

67
00:05:29,000 --> 00:05:32,510
Então eu vou dizer rimraf dist.

68
00:05:32,510 --> 00:05:35,610
O que isso significa é que isso, quando executado,

69
00:05:35,610 --> 00:05:39,860
limpará a pasta de distribuição.

70
00:05:39,860 --> 00:05:42,215
Então eu vou adicionar isso em, e

71
00:05:42,215 --> 00:05:46,780
então eu vou colocar essa vírgula lá porque eu vou adicionar mais scripts abaixo disso.

72
00:05:46,780 --> 00:05:51,814
Então deixe-me salvar as alterações, o próximo passo que eu vou fazer é

73
00:05:51,814 --> 00:05:57,048
instalar um módulo npm chamado copy files que são usados para copiar

74
00:05:57,048 --> 00:06:03,206
alguns arquivos de fonte da minha pasta de módulos nó para a minha pasta de distribuição.

75
00:06:03,206 --> 00:06:07,430
Para que, quando ele é implantado, os arquivos de fonte também sejam implantados.

76
00:06:07,430 --> 00:06:12,840
Indo para o terminal, o próximo pacote que vou instalar é

77
00:06:12,840 --> 00:06:19,860
npm -g, lembre-se que isso significa que ele deve ser instalado globalmente.

78
00:06:19,860 --> 00:06:23,900
Como eu estou fazendo isso em um Mac,

79
00:06:23,900 --> 00:06:30,670
eu deveria dizer sudo npm -g, se você está fazendo isso no Windows, você não precisa do sudo.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g instalar arquivos de cópia.

81
00:06:42,837 --> 00:06:47,493
E então uma vez que está instalado, este módulo NPM vai me ajudar a copiar

82
00:06:47,493 --> 00:06:50,360
arquivos de uma pasta para outra pasta.

83
00:06:51,390 --> 00:06:54,650
Agora, deixe-me apresentar outro script NPM aqui.

84
00:06:56,110 --> 00:06:59,534
Indo para o meu arquivo package.json,

85
00:06:59,534 --> 00:07:05,046
vou criar um novo nome de scrip aqui copyfonts.

86
00:07:05,046 --> 00:07:09,666
Este script vai permitir que eu copie todos os arquivos de fontes da minha

87
00:07:09,666 --> 00:07:13,650
pasta Font Awesome para a minha pasta de distribuição.

88
00:07:13,650 --> 00:07:17,510
Assim, quando meu site é renderizado,

89
00:07:17,510 --> 00:07:21,500
todos esses arquivos de fontes também podem ser enviados para fora, de modo que

90
00:07:21,500 --> 00:07:26,110
minhas páginas da Web são renderizadas corretamente com as fontes Font Awesome no lugar.

91
00:07:26,110 --> 00:07:30,949
Então, para fazer isso, eu vou dizer, copiar arquivos -f,

92
00:07:30,949 --> 00:07:36,530
-f significa que simplesmente copia os arquivos sem a hierarquia cheia e

93
00:07:36,530 --> 00:07:40,550
simplesmente copia os arquivos de um local para outro local.

94
00:07:40,550 --> 00:07:43,594
Então eu vou dizer copiar arquivos -f

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

96
00:08:03,367 --> 00:08:09,416
E dist/fontes,

97
00:08:12,386 --> 00:08:14,970
E, em seguida, salvar as alterações.

98
00:08:14,970 --> 00:08:20,620
Deixe-me agora ilustrar como esses dois scripts npm funcionam juntos.

99
00:08:20,620 --> 00:08:25,605
Indo para minha janela de comando, vou digitar

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

101
00:08:30,300 --> 00:08:34,650
Quando isso é executado, ele vai criar uma pasta

102
00:08:34,650 --> 00:08:38,640
chamada dist na minha hierarquia de pastas do projeto.

103
00:08:38,640 --> 00:08:39,880
E, em seguida, dentro do dist,

104
00:08:39,880 --> 00:08:44,730
haverá uma subpasta chamada fontes, que irá conter os arquivos de fonte.

105
00:08:44,730 --> 00:08:46,310
Então, executando isso,

106
00:08:46,310 --> 00:08:50,480
você notará imediatamente que a pasta de distribuição é criada aqui.

107
00:08:50,480 --> 00:08:52,190
E dentro da pasta de distribuição,

108
00:08:52,190 --> 00:08:55,000
você pode ver que há uma subpasta chamada fontes.

109
00:08:55,000 --> 00:08:58,760
E lá dentro, todos os arquivos fontawesome foram copiados.

110
00:09:00,070 --> 00:09:03,700
É assim que funciona o script copyfonts.

111
00:09:04,790 --> 00:09:08,720
Agora, vou mostrar-vos como funciona o guião limpo.

112
00:09:08,720 --> 00:09:15,275
Então, se eu digitar npm run clean, isso vai excluir essa pasta de distribuição.

113
00:09:15,275 --> 00:09:17,805
Então, quando eu executar isso, então você notaria que

114
00:09:17,805 --> 00:09:22,435
a pasta de distribuição é excluída da minha hierarquia de pastas de projetos.

115
00:09:22,435 --> 00:09:25,055
Então é assim que a limpeza funciona.

116
00:09:25,055 --> 00:09:28,075
Agora que temos esses dois scripts configurados,

117
00:09:28,075 --> 00:09:32,735
agora precisamos ser capazes de construir os arquivos de distribuição restantes.

118
00:09:33,745 --> 00:09:39,034
Na próxima etapa, vamos instalar um módulo de nó chamado imagemin-cli,

119
00:09:39,034 --> 00:09:43,182
que é a interface de linha de comando para o módulo imagemin.

120
00:09:43,182 --> 00:09:51,032
O módulo imaginemin vai pegar uma seita de arquivos de imagem e, em seguida, compactá-los para baixo.

121
00:09:51,032 --> 00:09:57,550
Assim, ele empilhado o tamanho desses arquivos são minimizados, tanto quanto possível,

122
00:09:57,550 --> 00:10:01,650
mas ainda ser processado corretamente quando o nosso site é renderizado.

123
00:10:01,650 --> 00:10:05,060
Desta forma, reduzimos a quantidade de dados que

124
00:10:05,060 --> 00:10:09,870
precisam ser baixados pelo navegador quando ele precisa renderizar nossa página web.

125
00:10:09,870 --> 00:10:16,250
Então, se você está incluindo imagens em sua página web, então imagemin tarefa é

126
00:10:16,250 --> 00:10:21,950
algo que você deve aprender, a fim de reduzir o tamanho de seus arquivos de imagem.

127
00:10:21,950 --> 00:10:29,740
Então, para fazer isso, eu vou instalar este módulo de nó imagemin como um módulo global.

128
00:10:29,740 --> 00:10:36,145
Então eu digite sudo, já que estou usando um Mac,

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

130
00:10:41,270 --> 00:10:46,770
e então instalo este módulo de nó.

131
00:10:50,730 --> 00:10:56,670
Às vezes, em um Mac, alguns dos plugins imagemin não são instalados corretamente.

132
00:10:56,670 --> 00:11:02,979
Então é por isso que eu estou dando esses sinalizadores adicionais para o comando,

133
00:11:02,979 --> 00:11:09,310
eles estão dizendo —unsafe-perm=true e —allow-root.

134
00:11:09,310 --> 00:11:12,497
Uma vez que a instalação esteja concluída,

135
00:11:12,497 --> 00:11:18,183
deixe-me configurar um script para fazer essa ampliação de minhas imagens.

136
00:11:18,183 --> 00:11:23,650
Indo para package.json novamente, vou configurar o próximo script aqui.

137
00:11:23,650 --> 00:11:32,350
Então eu diria imagemin é o nome do script que eu vou fazer,

138
00:11:32,350 --> 00:11:36,610
e eu diria imagemin.

139
00:11:36,610 --> 00:11:43,930
E então, uma vez que todas as minhas imagens estão na pasta img, eu diria img/*,

140
00:11:43,930 --> 00:11:49,913
e então muitos arquivos serão copiados para a imagem dist.

141
00:11:49,913 --> 00:11:54,997
Assim, os arquivos de imagem originais da pasta de imagem que eu tenho serão copiados

142
00:11:54,997 --> 00:12:00,300
para a pasta de distribuição e para a subpasta de imagem lá.

143
00:12:00,300 --> 00:12:03,616
Então isso completa minha imagemin.

144
00:12:03,616 --> 00:12:07,460
Deixe-me prosseguir com a configuração restante, e

145
00:12:07,460 --> 00:12:13,070
então veremos como vamos fazer uso dos scripts que já configuramos lá.

146
00:12:14,260 --> 00:12:19,270
Agora que eu tenho a pasta de teste lá, que eu poderia criar,

147
00:12:19,270 --> 00:12:26,450
eu não quero fazer check-in na pasta dist no meu repositório Git.

148
00:12:26,450 --> 00:12:31,640
Então é por isso que no meu arquivo.gitignore, eu vou adicionar na pasta dist também.

149
00:12:31,640 --> 00:12:37,060
Assim, a pasta dist será ignorada quando eu fizer meu check-in no repositório Git.

150
00:12:37,060 --> 00:12:43,342
Então vamos salvar as alterações, voltando para package.json.

151
00:12:43,342 --> 00:12:49,710
Agora, o que eu vou fazer a seguir é instalar três

152
00:12:50,870 --> 00:12:56,080
módulos de nós diferentes, que me permitem fazer as modificações no

153
00:12:56,080 --> 00:13:02,550
meu arquivo index.html e nos arquivos HTML restantes lá.

154
00:13:02,550 --> 00:13:09,280
No prompt de comando, digite npm install —save dev.

155
00:13:09,280 --> 00:13:16,498
Vou instalar um módulo chamado como usemin-cli.

156
00:13:16,498 --> 00:13:21,166
Este usemin-cli é aquele que me permite fazer a transformação do meu

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

158
00:13:22,230 --> 00:13:26,870
E então concatenar e combinar todos os

159
00:13:26,870 --> 00:13:30,650
arquivos CSS em um único arquivo CSS e, em seguida, colocá-lo na pasta de distribuição.

160
00:13:30,650 --> 00:13:36,700
Da mesma forma, todos os arquivos JS serão concatenados e colocados em uma única pasta.

161
00:13:36,700 --> 00:13:38,720
Então este usemin-cli é útil.

162
00:13:38,720 --> 00:13:44,005
Mas este usemin-cli leva a ajuda

163
00:13:44,005 --> 00:13:51,051
de três outros módulos de nó chamados cssmin,

164
00:13:51,051 --> 00:13:56,350
depois uglifyjs e htmlmin.

165
00:13:56,350 --> 00:14:01,600
Então eu preciso instalar esses três módulos de nó, além de usemin-cli.

166
00:14:01,600 --> 00:14:04,610
E eu vou instalar isso localmente no meu projeto, então

167
00:14:04,610 --> 00:14:08,330
é por isso que o npm install —save-def.

168
00:14:08,330 --> 00:14:13,910
Assim, eles serão lembrados no meu arquivo package.json.

169
00:14:13,910 --> 00:14:15,890
Então vamos em frente e completar a instalação.

170
00:14:17,230 --> 00:14:21,270
Agora que instalei o usemin e

171
00:14:21,270 --> 00:14:26,440
os módulos de nó relacionados, preciso fazer alguma transformação no

172
00:14:26,440 --> 00:14:30,695
meu arquivo index.html e nos arquivos HTML restantes. De

173
00:14:30,695 --> 00:14:35,750
modo que o usemin node_module reconhece que esse grupo é

174
00:14:35,750 --> 00:14:42,330
um monte de arquivos CSS que precisam ser compactados, calculados e verificados.

175
00:14:42,330 --> 00:14:47,730
Da mesma forma, este é o grupo de arquivos JavaScript que precisam ser feios

176
00:14:47,730 --> 00:14:51,130
, combinados e concatenados juntos.

177
00:14:51,130 --> 00:14:54,480
Então, para ajudar o trabalho do pacote

178
00:14:54,480 --> 00:15:00,430
usemin, eu preciso adicionar um pouco de código no meu arquivo index.html.

179
00:15:00,430 --> 00:15:07,942
Logo antes do primeiro link lá,

180
00:15:07,942 --> 00:15:14,747
vou adicionar uma marca aqui em cima,

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

182
00:15:21,100 --> 00:15:25,621
Agora, isto! —, como você reconhecerá,

183
00:15:25,621 --> 00:15:29,640
é um comentário da perspectiva html.

184
00:15:29,640 --> 00:15:33,405
Então, dentro desse comentário, eu vou incluir que esta linha

185
00:15:33,405 --> 00:15:38,480
em particular vai ser usada pelo menu de uso, a fim de reconhecer o bloco de

186
00:15:38,480 --> 00:15:43,370
código que especifica todos os arquivos CSS que precisam ser transferidos.

187
00:15:43,370 --> 00:15:49,743
Então eu digo build.css, e então eu especificarei

188
00:15:49,743 --> 00:15:54,770
o nome do arquivo como css/main.css.

189
00:15:54,770 --> 00:15:57,160
Esta é a sintaxe para especificar.

190
00:15:57,160 --> 00:16:04,080
O que isso significa é que esses arquivos Bloco de CSS serão todos combinados juntos,

191
00:16:04,080 --> 00:16:10,510
e depois concatenados, minificados e, em seguida, colocados neste arquivo chamado main.css.

192
00:16:10,510 --> 00:16:15,723
E então este bloco será identificado do outro lado dizendo,

193
00:16:21,873 --> 00:16:27,090
Hífen —, ok, desculpe.

194
00:16:27,090 --> 00:16:34,210
Esqueci de incluir o traço duplo no final.

195
00:16:34,210 --> 00:16:37,050
Essa é a razão pela qual isso não estava virando cores.

196
00:16:37,050 --> 00:16:41,780
Então, às vezes você está feliz que seu

197
00:16:41,780 --> 00:16:46,540
editor está apontando esses possíveis erros que você pode estar cometendo.

198
00:16:46,540 --> 00:16:51,779
Então bem ali eu diria endbuild e

199
00:16:51,779 --> 00:16:56,206
então — colchete direito ali.

200
00:16:56,206 --> 00:17:00,904
Agora, o que quer que esteja entre esta compilação e

201
00:17:00,904 --> 00:17:06,708
endbuild, este grupo será tratado como uma unidade para

202
00:17:06,708 --> 00:17:12,252
ser combinado pelo nosso módulo npm usemin lá.

203
00:17:12,252 --> 00:17:14,890
Observe a sintaxe que o módulo usemin usa lá.

204
00:17:16,230 --> 00:17:22,020
Eu preciso fazer a mesma transformação para contactus.html e aboutus.html também.

205
00:17:22,020 --> 00:17:26,759
Então eu vou copiar este

206
00:17:26,759 --> 00:17:31,306
aqui o preguiçoso que eu sou.

207
00:17:31,306 --> 00:17:35,149
Vou simplesmente copiar e

208
00:17:35,149 --> 00:17:39,866
colar em contactus.html e, em

209
00:17:39,866 --> 00:17:44,770
seguida, também aboutus.html lá.

210
00:17:44,770 --> 00:17:50,263
Da mesma forma, voltando para o index.html,

211
00:17:50,263 --> 00:17:56,477
vou copiar este inbuild e, em seguida, também copiá-lo para

212
00:17:56,477 --> 00:18:01,840
os dados contactus.html e aboutus.html.

213
00:18:03,530 --> 00:18:08,990
Certo, vamos salvar as alterações em todos os arquivos.

214
00:18:08,990 --> 00:18:12,190
Em seguida, voltando para index.html.

215
00:18:12,190 --> 00:18:16,670
Eu vou repetir a mesma coisa na parte inferior para os meus

216
00:18:16,670 --> 00:18:22,220
scripts JavaScript que eu incluí lá.

217
00:18:22,220 --> 00:18:26,730
Então, indo para o fundo aqui,

218
00:18:26,730 --> 00:18:30,026
o que eu preciso fazer aqui,

219
00:18:30,026 --> 00:18:34,883
é especificar <! — construir js,

220
00:18:34,883 --> 00:18:39,225
e eu vou dizer js/main.js.

221
00:18:41,216 --> 00:18:43,130
Hífen duplo, barra.

222
00:18:43,130 --> 00:18:47,781
Então esse é o início do bloco e, em seguida, o final é especificado por,

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

224
00:18:55,034 --> 00:19:00,782
Então, com essas mudanças, agora, meu arquivo index.html está pronto,

225
00:19:00,782 --> 00:19:07,899
e eu tenho que fazer a mesma transformação para contactus.html na parte inferior.

226
00:19:14,090 --> 00:19:18,715
E aboutus.html também na parte inferior.

227
00:19:25,340 --> 00:19:29,505
Da mesma forma, este enbuild copiado em. Em

228
00:19:32,892 --> 00:19:38,649
contactus.html e aboutus.html e, em seguida, salve todos os arquivos.

229
00:19:40,130 --> 00:19:44,550
E isso prepara nossos arquivos HTML para

230
00:19:44,550 --> 00:19:48,940
serem transformados para preparar a pasta de distribuição.

231
00:19:48,940 --> 00:19:53,540
Esses arquivos permanecerão como tal, mas os arquivos transformados serão colocados na

232
00:19:53,540 --> 00:19:58,380
pasta de distribuição criada a partir desses arquivos.

233
00:19:58,380 --> 00:20:02,948
Agora, uma vez que terminamos isso, vamos configurar alguns scripts.

234
00:20:02,948 --> 00:20:07,875
Indo para package.json, vou configurar meu próximo script chamado usemin.

235
00:20:11,930 --> 00:20:15,890
E então isso diz usemin,

236
00:20:19,977 --> 00:20:24,671
contactus.html -d dist, esta é a sintaxe para

237
00:20:24,671 --> 00:20:29,366
especificar -d dist significando que o destino para

238
00:20:29,366 --> 00:20:32,507
esta pasta dist distribuição.

239
00:20:32,507 --> 00:20:39,110
E então eu diria htmlmin, isso também vai minimizar o arquivo HTML.

240
00:20:39,110 --> 00:20:43,300
Então ele irá remover todos os espaços estranhos e comentários do arquivo HTML.

241
00:20:43,300 --> 00:20:45,110
Mas eles comprimem-no para

242
00:20:45,110 --> 00:20:48,350
que ele contenha o número mínimo de caracteres lá.

243
00:20:48,350 --> 00:20:55,165
Vamos olhar para o resultado depois de concluirmos e fazer a transformação lá.

244
00:20:55,165 --> 00:21:00,528
Então isso e, em seguida, não só isso,

245
00:21:00,528 --> 00:21:05,509
e então htmlmin, e depois dizer

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

247
00:21:10,684 --> 00:21:15,664
&&, isso significa que há

248
00:21:15,664 --> 00:21:19,970
mais para vir depois disso.

249
00:21:19,970 --> 00:21:25,730
Então eu vou dizer usemin

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

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

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

253
00:21:45,560 --> 00:21:50,078
Então, esse é o segundo para transformar o arquivo aboutus.html.

254
00:21:50,078 --> 00:21:55,135
E então &&, este é um script longo,

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

256
00:21:58,139 --> 00:22:02,890
precisamos transformar todos os arquivos.

257
00:22:02,890 --> 00:22:08,150
Então é por isso que eu preciso especificar cada um explicitamente lá.

258
00:22:08,150 --> 00:22:11,910
usemin não leva curinga, então

259
00:22:11,910 --> 00:22:16,080
essa é a razão pela qual eu tenho que especificar a exploração como [INAUDÍVEL].

260
00:22:16,080 --> 00:22:21,365
E assim usemin index.html

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

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

263
00:22:34,160 --> 00:22:40,656
E depois disso eu coloquei uma vírgula porque eu vou apresentar o próximo script,

264
00:22:40,656 --> 00:22:45,940
que é chamado de compilação.

265
00:22:45,940 --> 00:22:50,490
Então este script de compilação criará minha pasta de distribuição.

266
00:22:50,490 --> 00:22:54,159
Então, para criar minha pasta de distribuição,

267
00:22:54,159 --> 00:22:59,328
a primeira coisa que eu vou fazer é npm executar limpo.

268
00:22:59,328 --> 00:23:07,090
E então o NPM executa copyfonts.

269
00:23:07,090 --> 00:23:12,347
Você já viu esses dois em ação anteriormente,

270
00:23:12,347 --> 00:23:18,950
então eu vou dizer npm executar imagemin para criar as imagens minimizadas,

271
00:23:18,950 --> 00:23:23,220
e então eu diria npm executar usemin.

272
00:23:23,220 --> 00:23:29,257
E este script em particular irá construir

273
00:23:29,257 --> 00:23:36,171
a minha pasta de distribuição, cujo conteúdo pode então ser copiado para o meu servidor web para resolver o meu tom.

274
00:23:36,171 --> 00:23:39,238
Salve as alterações.

275
00:23:39,238 --> 00:23:45,837
Vamos agora ver como construímos o site.

276
00:23:45,837 --> 00:23:49,431
Neste ponto, para construir o nosso site e

277
00:23:49,431 --> 00:23:55,950
o prompt de comando é simplesmente digite npm run build e, em seguida, basta executar.

278
00:23:55,950 --> 00:24:00,430
Esse script, que por sua vez executará um conjunto

279
00:24:00,430 --> 00:24:05,440
de ambos os scripts, que por sua vez completará todo o conjunto

280
00:24:05,440 --> 00:24:10,870
de tarefas que devem ser executadas para preparar minha pasta de distribuição.

281
00:24:10,870 --> 00:24:13,690
Então, vamos em frente e executar essa coisa e

282
00:24:13,690 --> 00:24:18,520
, em seguida, isso vai correr através de todos os scripts diferentes lá.

283
00:24:18,520 --> 00:24:23,320
Demora alguns minutos para ser concluído e, quando estiver concluído,

284
00:24:23,320 --> 00:24:29,838
sua pasta de distribuição estará pronta para implantação em seu servidor web.

285
00:24:29,838 --> 00:24:34,950
Indo para o nosso editor,

286
00:24:34,950 --> 00:24:38,750
agora você vê que a pasta de distribuição está pronta.

287
00:24:38,750 --> 00:24:44,020
Dentro da pasta de distribuição, você verá os três arquivos de índice,

288
00:24:44,020 --> 00:24:48,580
e na pasta CSS, você verá o único arquivo chamado m ain.css,

289
00:24:48,580 --> 00:24:55,050
que contém todos os CSS Bootstraps, o CSS Bootstraps

290
00:24:55,050 --> 00:24:57,660
e o código CSS que você criou.

291
00:24:58,690 --> 00:25:01,863
E a pasta JS conterá o main.js,

292
00:25:01,863 --> 00:25:05,287
que contém o Bootstrap, o jQuery e

293
00:25:05,287 --> 00:25:10,905
todo o grupo de código JavaScript combinados em um único arquivo.

294
00:25:10,905 --> 00:25:15,638
A imagem conterá as imagens otimizadas, e as fontes, obviamente,

295
00:25:15,638 --> 00:25:18,730
que você viu anteriormente, contêm os arquivos de fonte.

296
00:25:18,730 --> 00:25:24,030
Agora, vamos dar uma olhada rápida no index.html que foi criado aqui.

297
00:25:24,030 --> 00:25:27,290
Então, quando você olha para o index.html que foi criado aqui,

298
00:25:27,290 --> 00:25:31,120
você vai notar que a coisa toda é literalmente ilegível,

299
00:25:32,530 --> 00:25:37,850
porque quando você fez HTML min ele retirou todos os

300
00:25:39,500 --> 00:25:42,800
comentários estranhos, ele retirou todos os espaços, e

301
00:25:42,800 --> 00:25:48,100
então criou todo esse conjunto de execução de personagens.

302
00:25:49,540 --> 00:25:52,800
Para o computador não faz qualquer diferença porque ele irá renderizar esta

303
00:25:52,800 --> 00:25:55,190
página da web tão bem.

304
00:25:55,190 --> 00:25:58,727
Para você e eu, faz diferença, porque não podemos ler isso facilmente.

305
00:26:01,038 --> 00:26:05,620
Então é isso que a minificação causa para o seu arquivo HTML.

306
00:26:05,620 --> 00:26:08,180
Vamos dar uma olhada no main.css.

307
00:26:08,180 --> 00:26:12,200
Quando você olha para o main.css, você vê a coisa toda é triturada

308
00:26:12,200 --> 00:26:15,090
em uma única unidade, à medida que você vai para o fundo.

309
00:26:16,300 --> 00:26:20,808
Se você é corajoso o suficiente, vá até a parte inferior e, em seguida,

310
00:26:24,793 --> 00:26:29,683
você verá o, Você verá horas especificamente escrito

311
00:26:29,683 --> 00:26:34,870
classes CSS direita na parte inferior aqui.

312
00:26:37,220 --> 00:26:42,801
Bem ali, você reconhece o botão do carrossel, e outras coisas,

313
00:26:42,801 --> 00:26:49,693
nabber-dark, e outras coisas lá, então é tudo raspado em cima.

314
00:26:49,693 --> 00:26:52,896
Então é isso que a minificação e os custos.

315
00:26:52,896 --> 00:26:55,530
Main.js, a mesma coisa.

316
00:26:55,530 --> 00:26:56,545
Código ilegível lá. O

317
00:26:56,545 --> 00:26:59,440
computador deles, não há diferença.

318
00:26:59,440 --> 00:27:03,580
Então, com isso, nossa pasta de distribuição agora está completa.

319
00:27:03,580 --> 00:27:06,250
Vamos verificar nossa pasta de distribuição.

320
00:27:06,250 --> 00:27:08,669
Felizmente, temos o nosso servidor de luz já em execução.

321
00:27:08,669 --> 00:27:12,014
Então o que eu vou fazer é ir para o navegador e, em

322
00:27:12,014 --> 00:27:16,867
seguida, verificar o arquivo CLM pronto para índice nesta pasta de distribuição para

323
00:27:16,867 --> 00:27:20,507
ver se ele está sendo processado corretamente ou não. Indo

324
00:27:20,507 --> 00:27:25,870
para o navegador, na minha barra de endereço eu vou digitar,

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

326
00:27:31,440 --> 00:27:36,920
notar que este arquivo em particular é o

327
00:27:36,920 --> 00:27:40,680
arquivo de distribuição que foi criado, e ele contém exatamente a mesma coisa e

328
00:27:40,680 --> 00:27:47,370
renderiza exatamente da mesma maneira que a nossa página original que criamos.

329
00:27:47,370 --> 00:27:52,230
Sobre, da mesma forma, observe que este aboutus.html é da

330
00:27:52,230 --> 00:27:57,490
pasta de distribuição e isso é renderizado exatamente como antes,

331
00:27:57,490 --> 00:28:01,350
e também o arquivo contactus.html.

332
00:28:01,350 --> 00:28:03,360
Tudo funciona perfeitamente.

333
00:28:03,360 --> 00:28:08,970
Então, agora tudo o que resta para você fazer para implantar sua página web,

334
00:28:08,970 --> 00:28:15,530
ou seu site, é simplesmente copiar o conteúdo da pasta dist,

335
00:28:15,530 --> 00:28:19,460
e depois enviá-lo para o seu servidor web, e

336
00:28:19,460 --> 00:28:24,830
então seu servidor web está funcionando, servindo seu site.

337
00:28:26,080 --> 00:28:28,740
Com isso, completamos este exercício.

338
00:28:28,740 --> 00:28:33,620
Neste exercício, vimos como podemos fazer uso de

339
00:28:33,620 --> 00:28:38,636
scripts NBM para construir e implantar nosso site.

340
00:28:38,636 --> 00:28:40,610
Este pode ser um bom momento para

341
00:28:40,610 --> 00:28:45,223
você fazer um Get Comment com mensagem NPM Scripts, Parte 2.

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