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

2
00:00:04,535 --> 00:00:10,479
Continueremo il nostro viaggio con gli script NPM in questo prossimo esercizio.

3
00:00:10,479 --> 00:00:15,182
Qui, stiamo andando a imparare come essere in grado di costruire

4
00:00:15,182 --> 00:00:20,335
una cartella di distribuzione che contiene tutti i file per il

5
00:00:20,335 --> 00:00:27,970
nostro progetto che possiamo semplicemente distribuire su un server web che ospita il nostro sito web.

6
00:00:27,970 --> 00:00:33,050
Quindi, dati i file HTML, CSS e JavaScript che

7
00:00:33,050 --> 00:00:39,010
abbiamo già preparato nella nostra cartella del progetto, stiamo andando, da quelli,

8
00:00:39,010 --> 00:00:44,895
elaborarli utilizzando i vari compiti di cui abbiamo parlato.

9
00:00:44,895 --> 00:00:49,246
Questo sta facendo una modifica CSS,

10
00:00:49,246 --> 00:00:54,740
concatenazione e uglification JavaScript, minification

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

12
00:00:59,230 --> 00:01:04,895
quindi generare una cartella di distribuzione con tutti i file.

13
00:01:04,895 --> 00:01:09,520
Ma essenzialmente forma l'insieme di file che possono essere

14
00:01:09,520 --> 00:01:13,200
distribuiti sul nostro server web che ospita il nostro sito web.

15
00:01:15,165 --> 00:01:21,005
Per aiutarti a capire cosa faremo in questo particolare esercizio,

16
00:01:22,085 --> 00:01:29,102
come notiamo dalla nostra pagina index.html, abbiamo un insieme di

17
00:01:29,102 --> 00:01:34,352
file CSS che hai incluso qui usando questo tag link qui.

18
00:01:34,352 --> 00:01:38,742
Analogamente, si dispone di un set di script che è stato incluso

19
00:01:38,742 --> 00:01:42,847
nella parte inferiore di questa pagina utilizzando il tag script.

20
00:01:42,847 --> 00:01:46,152
Abbiamo incluso un insieme di codice JavaScript.

21
00:01:46,152 --> 00:01:51,150
Ora, quello che faremo in questo esercizio è quello di combinare tutti questi

22
00:01:51,150 --> 00:01:56,760
file in un unico file JavaScript che verrà consegnato

23
00:01:56,760 --> 00:02:03,710
dal nostro server web a un browser che sta cercando di visualizzare il nostro sito web.

24
00:02:03,710 --> 00:02:08,480
In questo modo, minimizziamo il numero di download che il browser deve fare

25
00:02:08,480 --> 00:02:10,930
per rendere il nostro sito web.

26
00:02:10,930 --> 00:02:16,960
Allo stesso modo, stiamo andando a combinare tutto il codice CSS in un unico file CSS, in

27
00:02:16,960 --> 00:02:18,325
modo che possa essere consegnato.

28
00:02:18,325 --> 00:02:24,353
Quindi il file CSS combinato conterrà tutto il codice per

29
00:02:24,353 --> 00:02:31,751
Bootstrap più Bootstrap social, e anche il Font Awesome e

30
00:02:31,751 --> 00:02:36,697
anche il codice CSS che noi stessi abbiamo scritto.

31
00:02:36,697 --> 00:02:40,351
Allo stesso modo, ci sarà un singolo file

32
00:02:40,351 --> 00:02:45,297
JavaScript che conterrà il Tether jQuery, Bootstrap e il codice JavaScript che

33
00:02:45,297 --> 00:02:49,790
noi stessi abbiamo scritto, tutti combinati insieme in un unico file.

34
00:02:49,790 --> 00:02:53,610
Ora, questo è il modo in cui è possibile eseguire la distribuzione delle pagine web.

35
00:02:53,610 --> 00:02:58,190
E invece di avere più file di questo tipo, un modo in cui la

36
00:02:59,560 --> 00:03:03,750
distribuzione è fatto è quello di combinarli in un singolo file in modo che un singolo download

37
00:03:03,750 --> 00:03:08,840
si ottiene tutto il codice JavaScript necessario per il rendering della pagina web.

38
00:03:08,840 --> 00:03:11,810
Un singolo download si ottiene tutto il codice CSS necessario per

39
00:03:11,810 --> 00:03:13,200
il rendering della vostra pagina web.

40
00:03:13,200 --> 00:03:16,590
E poi, ovviamente, il file HTML stesso verrà scaricato.

41
00:03:18,530 --> 00:03:23,390
Per ottenere queste attività da completare, abbiamo bisogno di utilizzare

42
00:03:23,390 --> 00:03:29,070
un certo insieme di moduli NPM per realizzare questo.

43
00:03:29,070 --> 00:03:33,810
Ora, quello che finiamo per fare è quello di costruire una cartella

44
00:03:33,810 --> 00:03:38,760
nel nostro file di progetti, e poi chiamiamo quella cartella come dist, D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
Lo sto solo chiamando casualmente come una cartella dist.

46
00:03:42,580 --> 00:03:47,100
Nel mio caso, quello che intendo con la cartella dist è una cartella di distribuzione.

47
00:03:47,100 --> 00:03:51,270
Alla fine della serie di passaggi che stiamo per fare, questa cartella conterrà tutti

48
00:03:51,270 --> 00:03:59,510
i file che possono essere semplicemente copiati sul server web che ospita il nostro sito web.

49
00:03:59,510 --> 00:04:03,930
Per iniziare, quello che faremo è impostare

50
00:04:05,140 --> 00:04:10,960
qui un set di script che ci aiuteranno ad automatizzare questo processo.

51
00:04:10,960 --> 00:04:13,930
Quindi, prima cosa, potremmo

52
00:04:13,930 --> 00:04:18,850
preparare la cartella di distribuzione una volta allora forse potremmo fare alcune modifiche

53
00:04:18,850 --> 00:04:23,310
ai nostri file sorgente allora potremmo aver bisogno di ricompilare la nostra cartella di distribuzione.

54
00:04:24,420 --> 00:04:29,370
Primo passo, avremmo impostato lo script per la pulizia di quella cartella di distribuzione che

55
00:04:29,370 --> 00:04:33,050
significa essenzialmente, eliminare la cartella di distribuzione.

56
00:04:33,050 --> 00:04:37,950
Quindi, per farlo, ho intenzione di prendere l'aiuto di un modulo NPM chiamato come rimfraf.

57
00:04:37,950 --> 00:04:47,760
Quindi installerò npm —save-dev rimfraf.

58
00:04:47,760 --> 00:04:51,920
Questo modulo ci aiuta a pulire completamente una cartella.

59
00:04:51,920 --> 00:04:56,370
Quindi, una volta installato questo, imposterò uno script

60
00:04:56,370 --> 00:05:01,550
nel mio file package.json per pulire tutti i file.

61
00:05:01,550 --> 00:05:05,360
Andando al file package.json, ho intenzione di aggiungere, quindi

62
00:05:05,360 --> 00:05:11,380
ricorda sempre che il coma è molto, molto importante in quegli script.

63
00:05:11,380 --> 00:05:15,200
A volte ti imbatterai in problemi solo perché hai dimenticato la virgola.

64
00:05:15,200 --> 00:05:18,230
Quindi assicurati di mettere quelle virgole dove necessario.

65
00:05:18,230 --> 00:05:21,800
La prossima descrizione che aggiungerò è, pulita,

66
00:05:23,410 --> 00:05:29,000
ovviamente come suggerisce il nome, questo sta per pulire la mia cartella.

67
00:05:29,000 --> 00:05:32,510
Quindi dirò rimraf dist.

68
00:05:32,510 --> 00:05:35,610
Ciò significa che questo, una volta eseguito,

69
00:05:35,610 --> 00:05:39,860
pulirà la cartella di distribuzione.

70
00:05:39,860 --> 00:05:42,215
Quindi lo aggiungerò, e

71
00:05:42,215 --> 00:05:46,780
poi metterò quella virgola lì perché aggiungerò più script sotto questo.

72
00:05:46,780 --> 00:05:51,814
Quindi lasciami salvare le modifiche, il prossimo passo che farò è

73
00:05:51,814 --> 00:05:57,048
installare un modulo npm chiamato copy files che vengono utilizzati per copiare

74
00:05:57,048 --> 00:06:03,206
alcuni file di carattere dalla mia cartella dei moduli nodo nella mia cartella di distribuzione.

75
00:06:03,206 --> 00:06:07,430
In modo che quando viene distribuito, anche i file di carattere vengono distribuiti.

76
00:06:07,430 --> 00:06:12,840
Andando al terminale, il prossimo pacchetto che installerò è

77
00:06:12,840 --> 00:06:19,860
npm -g, ricorda che questo significa che dovrebbe essere installato globalmente.

78
00:06:19,860 --> 00:06:23,900
Dal momento che lo sto facendo su un Mac,

79
00:06:23,900 --> 00:06:30,670
dovrei dire sudo npm -g, se lo stai facendo su Windows, non hai bisogno del sudo.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g installa i file di copia.

81
00:06:42,837 --> 00:06:47,493
E poi una volta installato, questo modulo NPM mi aiuterà a copiare

82
00:06:47,493 --> 00:06:50,360
i file da una cartella a un'altra cartella.

83
00:06:51,390 --> 00:06:54,650
Ora, lasciatemi introdurre un altro script NPM qui.

84
00:06:56,110 --> 00:06:59,534
Andando al mio file package.json,

85
00:06:59,534 --> 00:07:05,046
ho intenzione di creare un nuovo script qui nome copyfonts.

86
00:07:05,046 --> 00:07:09,666
Questo script mi permetterà di copiare tutti i file di font dalla mia cartella

87
00:07:09,666 --> 00:07:13,650
Font Awesome nella mia cartella di distribuzione.

88
00:07:13,650 --> 00:07:17,510
In modo che quando il mio sito web viene reso,

89
00:07:17,510 --> 00:07:21,500
tutti questi file di font possono essere inviati anche, in modo che le

90
00:07:21,500 --> 00:07:26,110
mie pagine web siano renderizzate correttamente con i font Font Awesome in posizione.

91
00:07:26,110 --> 00:07:30,949
Quindi, per farlo, dirò, copia i file -f,

92
00:07:30,949 --> 00:07:36,530
-f significa semplicemente copia i file senza il pieno di gerarchia e

93
00:07:36,530 --> 00:07:40,550
copia semplicemente i file da una posizione a un'altra posizione.

94
00:07:40,550 --> 00:07:43,594
Quindi dirò copia i file -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/font,

97
00:08:12,386 --> 00:08:14,970
E poi salva le modifiche.

98
00:08:14,970 --> 00:08:20,620
Lasciatemi ora illustrare come questi due script npm funzionano insieme.

99
00:08:20,620 --> 00:08:25,605
Andando alla mia finestra di comando, digiterò

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

101
00:08:30,300 --> 00:08:34,650
Quando questo viene eseguito, creerà una cartella

102
00:08:34,650 --> 00:08:38,640
denominata dist nella gerarchia delle cartelle del mio progetto.

103
00:08:38,640 --> 00:08:39,880
E poi all'interno della dist,

104
00:08:39,880 --> 00:08:44,730
ci sarà una sottocartella denominata font, che conterrà i file dei font.

105
00:08:44,730 --> 00:08:46,310
Quindi eseguendo questo,

106
00:08:46,310 --> 00:08:50,480
noterai immediatamente che la cartella di distribuzione viene creata qui.

107
00:08:50,480 --> 00:08:52,190
E all'interno della cartella di distribuzione,

108
00:08:52,190 --> 00:08:55,000
puoi vedere che c'è una sottocartella denominata font.

109
00:08:55,000 --> 00:08:58,760
E lì dentro, tutti i file fontawesome sono stati copiati.

110
00:09:00,070 --> 00:09:03,700
Questo è il modo in cui funziona lo script copyfonts.

111
00:09:04,790 --> 00:09:08,720
Ora, vi mostrerò come funziona la sceneggiatura pulita.

112
00:09:08,720 --> 00:09:15,275
Quindi se digito npm run clean, questo cancellerà quella cartella di distribuzione.

113
00:09:15,275 --> 00:09:17,805
Quindi, quando lo eseguo, noterai che

114
00:09:17,805 --> 00:09:22,435
la cartella di distribuzione viene eliminata dalla gerarchia delle cartelle dei miei progetti.

115
00:09:22,435 --> 00:09:25,055
Quindi è così che funziona la pulizia.

116
00:09:25,055 --> 00:09:28,075
Ora che abbiamo questi due script impostati,

117
00:09:28,075 --> 00:09:32,735
ora dobbiamo essere in grado di costruire i file di distribuzione rimanenti.

118
00:09:33,745 --> 00:09:39,034
Nella fase successiva, installeremo un modulo nodo chiamato imagemin-cli,

119
00:09:39,034 --> 00:09:43,182
che è l'interfaccia a riga di comando per il modulo imagemin.

120
00:09:43,182 --> 00:09:51,032
Il modulo imaginemin prenderà una setta di file immagine e li comprimerà.

121
00:09:51,032 --> 00:09:57,550
Così impilato la dimensione di quei file sono ridotti al minimo, per quanto possibile,

122
00:09:57,550 --> 00:10:01,650
ma ancora essere renderizzati correttamente quando il nostro sito web viene reso.

123
00:10:01,650 --> 00:10:05,060
In questo modo, ridurremo la quantità di dati che

124
00:10:05,060 --> 00:10:09,870
devono essere scaricati dal browser quando ha bisogno di rendere la nostra pagina web.

125
00:10:09,870 --> 00:10:16,250
Quindi, se stai includendo immagini nella tua pagina web, allora compito imagemin è

126
00:10:16,250 --> 00:10:21,950
qualcosa che dovresti imparare per ridurre le dimensioni dei tuoi file immagine.

127
00:10:21,950 --> 00:10:29,740
Quindi, per farlo, installerò questo modulo del nodo imagemin come modulo globale.

128
00:10:29,740 --> 00:10:36,145
Quindi digito sudo, dal momento che sto usando un 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 quindi installo questo modulo nodo.

131
00:10:50,730 --> 00:10:56,670
A volte su un Mac, alcuni dei plugin imagemin non vengono installati correttamente.

132
00:10:56,670 --> 00:11:02,979
Ecco perché sto dando questi flag aggiuntivi al comando,

133
00:11:02,979 --> 00:11:09,310
stanno dicendo —unsafe-perm = true e —allow-root.

134
00:11:09,310 --> 00:11:12,497
Una volta completata l'installazione,

135
00:11:12,497 --> 00:11:18,183
lasciami impostare uno script per fare l'ingrandimento delle mie immagini.

136
00:11:18,183 --> 00:11:23,650
Andando di nuovo a package.json, ho intenzione di impostare il prossimo script qui.

137
00:11:23,650 --> 00:11:32,350
Quindi direi imagemin è il nome dello script che sto per fare,

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

139
00:11:36,610 --> 00:11:43,930
E poi dal momento che tutte le mie immagini sono nella cartella img, direi img/*,

140
00:11:43,930 --> 00:11:49,913
e poi molti file verranno copiati nell'immagine dist.

141
00:11:49,913 --> 00:11:54,997
Quindi i file immagine originali dalla cartella immagine che ho verranno copiati

142
00:11:54,997 --> 00:12:00,300
nella cartella di distribuzione e nella sottocartella immagine lì.

143
00:12:00,300 --> 00:12:03,616
Quindi questo completa il mio imagemin.

144
00:12:03,616 --> 00:12:07,460
Permettetemi di procedere con il restante set up, e

145
00:12:07,460 --> 00:12:13,070
poi vedremo come faremo uso degli script che abbiamo già impostato lì.

146
00:12:14,260 --> 00:12:19,270
Ora che ho la cartella di test lì, che potrei creare,

147
00:12:19,270 --> 00:12:26,450
non voglio controllare la cartella dist nel mio repository Git.

148
00:12:26,450 --> 00:12:31,640
Ecco perché nel mio file.gitignore, aggiungerò anche nella cartella dist.

149
00:12:31,640 --> 00:12:37,060
Quindi la cartella dist verrà ignorata quando eseguo il mio check-in nel repository Git.

150
00:12:37,060 --> 00:12:43,342
Quindi salviamo le modifiche, tornando a package.json.

151
00:12:43,342 --> 00:12:49,710
Ora, quello che farò dopo è installare tre diversi

152
00:12:50,870 --> 00:12:56,080
moduli nodo, che mi consentono di fare le modifiche

153
00:12:56,080 --> 00:13:02,550
al mio file index.html e ai restanti file HTML lì.

154
00:13:02,550 --> 00:13:09,280
Al prompt dei comandi, digitare npm install —save dev.

155
00:13:09,280 --> 00:13:16,498
Ho intenzione di installare un modulo chiamato come usemin-cli.

156
00:13:16,498 --> 00:13:21,166
Questo usemin-cli è quello che mi permette di fare la trasformazione dal mio

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

158
00:13:22,230 --> 00:13:26,870
E poi concatenare e combinare tutti i

159
00:13:26,870 --> 00:13:30,650
file CSS in un singolo file CSS, quindi inserirlo nella cartella di distribuzione.

160
00:13:30,650 --> 00:13:36,700
Allo stesso modo, tutti i file JS verranno concatenati e inseriti in una singola cartella.

161
00:13:36,700 --> 00:13:38,720
Quindi questo usemin-cli è utile.

162
00:13:38,720 --> 00:13:44,005
Ma questo usemin-cli prende l'aiuto

163
00:13:44,005 --> 00:13:51,051
di altri tre moduli nodo chiamati cssmin,

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

165
00:13:56,350 --> 00:14:01,600
Quindi ho bisogno di installare questi tre moduli di nodi oltre a usemin-cli.

166
00:14:01,600 --> 00:14:04,610
E ho intenzione di installare questo localmente nel mio progetto,

167
00:14:04,610 --> 00:14:08,330
ecco perché npm install —save-def.

168
00:14:08,330 --> 00:14:13,910
Quindi in questo modo, verranno ricordati nel mio file package.json.

169
00:14:13,910 --> 00:14:15,890
Quindi andiamo avanti e completiamo l'installazione.

170
00:14:17,230 --> 00:14:21,270
Ora che ho installato l'usemin e

171
00:14:21,270 --> 00:14:26,440
i relativi moduli nodo, ho bisogno di fare una certa trasformazione nel

172
00:14:26,440 --> 00:14:30,695
mio file index.html e nei restanti file HTML.

173
00:14:30,695 --> 00:14:35,750
Tale che l'usemin node_module riconosce che questo gruppo è

174
00:14:35,750 --> 00:14:42,330
un gruppo di file CSS che devono essere compressi, calcolati e verificati.

175
00:14:42,330 --> 00:14:47,730
Allo stesso modo, questo è il gruppo di file JavaScript che devono essere uglificati

176
00:14:47,730 --> 00:14:51,130
, combinati e concatenati insieme.

177
00:14:51,130 --> 00:14:54,480
Quindi, per aiutare il pacchetto usemin

178
00:14:54,480 --> 00:15:00,430
a funzionare, ho bisogno di aggiungere un po 'di codice nel mio file index.html.

179
00:15:00,430 --> 00:15:07,942
Quindi, proprio prima del primo link lì,

180
00:15:07,942 --> 00:15:14,747
ho intenzione di aggiungere un segno qui,

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

182
00:15:21,100 --> 00:15:25,621
Ora, questo! -, come riconoscerai,

183
00:15:25,621 --> 00:15:29,640
è un commento dal punto di vista html.

184
00:15:29,640 --> 00:15:33,405
Quindi all'interno di quel commento, includerò che questa particolare riga

185
00:15:33,405 --> 00:15:38,480
verrà utilizzata dal menu use per riconoscere il blocco di

186
00:15:38,480 --> 00:15:43,370
codice che specifica tutti i file CSS che devono essere trasferiti.

187
00:15:43,370 --> 00:15:49,743
Quindi dico build.css, e poi specificherò

188
00:15:49,743 --> 00:15:54,770
il nome del file come css/main.css.

189
00:15:54,770 --> 00:15:57,160
Questa è la sintassi per specificare.

190
00:15:57,160 --> 00:16:04,080
Ciò significa che questi blocchi di file CSS saranno tutti combinati insieme,

191
00:16:04,080 --> 00:16:10,510
e quindi concatenati, minificati e quindi inseriti in questo file chiamato main.css.

192
00:16:10,510 --> 00:16:15,723
E poi questo blocco verrà identificato dall'altra parte dicendo,

193
00:16:21,873 --> 00:16:27,090
trattino, ok, scusa.

194
00:16:27,090 --> 00:16:34,210
Ho dimenticato di includere il doppio trattino alla fine.

195
00:16:34,210 --> 00:16:37,050
Questo è il motivo per cui questo non stava girando i colori.

196
00:16:37,050 --> 00:16:41,780
Quindi a volte sei felice che il tuo

197
00:16:41,780 --> 00:16:46,540
editor stia segnalando questi potenziali errori che potresti commettere.

198
00:16:46,540 --> 00:16:51,779
Quindi proprio lì direi endbuild e

199
00:16:51,779 --> 00:16:56,206
poi — parentesi destra lì.

200
00:16:56,206 --> 00:17:00,904
Ora, qualunque cosa sia tra questa build e

201
00:17:00,904 --> 00:17:06,708
endbuild, questo gruppo sarà trattato come un'unità per

202
00:17:06,708 --> 00:17:12,252
essere combinato dal nostro modulo usemin npm lì.

203
00:17:12,252 --> 00:17:14,890
Guarda la sintassi che il modulo usemin usa lì.

204
00:17:16,230 --> 00:17:22,020
Ho bisogno di fare la stessa trasformazione in contactus.html e aboutus.html anche.

205
00:17:22,020 --> 00:17:26,759
Quindi ho intenzione di copiare questo

206
00:17:26,759 --> 00:17:31,306
qui quello pigro che sono.

207
00:17:31,306 --> 00:17:35,149
Semplicemente copierò e

208
00:17:35,149 --> 00:17:39,866
incollerò in contactus.html e

209
00:17:39,866 --> 00:17:44,770
poi anche aboutus.html lì.

210
00:17:44,770 --> 00:17:50,263
Allo stesso modo, tornando a index.html,

211
00:17:50,263 --> 00:17:56,477
copierò questo inbuild e poi lo copierò anche nei

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

213
00:18:03,530 --> 00:18:08,990
Ok, salviamo le modifiche a tutti i file.

214
00:18:08,990 --> 00:18:12,190
Quindi, tornando a index.html.

215
00:18:12,190 --> 00:18:16,670
Ripeterò la stessa cosa in fondo per i miei

216
00:18:16,670 --> 00:18:22,220
script JavaScript che ho incluso lì.

217
00:18:22,220 --> 00:18:26,730
Quindi, andando in fondo qui,

218
00:18:26,730 --> 00:18:30,026
quello che devo fare qui,

219
00:18:30,026 --> 00:18:34,883
è specificare <! - costruisci js

220
00:18:34,883 --> 00:18:39,225
e dirò js/main.js.

221
00:18:41,216 --> 00:18:43,130
Doppio trattino, barra.

222
00:18:43,130 --> 00:18:47,781
Quindi questo è l'inizio del blocco e poi il finale è specificato da,

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

224
00:18:55,034 --> 00:19:00,782
Quindi con queste modifiche, ora, il mio file index.html è pronto

225
00:19:00,782 --> 00:19:07,899
e devo fare la stessa trasformazione in contactus.html in fondo.

226
00:19:14,090 --> 00:19:18,715
E aboutus.html anche in basso.

227
00:19:25,340 --> 00:19:29,505
Allo stesso modo, questo incorporamento copiato in. In

228
00:19:32,892 --> 00:19:38,649
contactus.html e aboutus.html e quindi salvare tutti i file.

229
00:19:40,130 --> 00:19:44,550
E questo prepara i nostri file HTML per

230
00:19:44,550 --> 00:19:48,940
essere trasformati per preparare la cartella di distribuzione.

231
00:19:48,940 --> 00:19:53,540
Questi file rimarranno come tali, ma i file trasformati verranno inseriti

232
00:19:53,540 --> 00:19:58,380
nella cartella di distribuzione creata da questi file.

233
00:19:58,380 --> 00:20:02,948
Ora, una volta completato, impostiamo alcuni script.

234
00:20:02,948 --> 00:20:07,875
Andando a package.json, imposterò il mio prossimo script chiamato usemin.

235
00:20:11,930 --> 00:20:15,890
E poi questo dice usemin,

236
00:20:19,977 --> 00:20:24,671
contactus.html -d dist, questa è la sintassi per

237
00:20:24,671 --> 00:20:29,366
specificare -d dist che significa che la destinazione per

238
00:20:29,366 --> 00:20:32,507
questa cartella dist distribuzione.

239
00:20:32,507 --> 00:20:39,110
E poi direi htmlmin, questo ridurrà anche al minimo il file HTML.

240
00:20:39,110 --> 00:20:43,300
Quindi rimuoverà tutti gli spazi e i commenti estranei dal file HTML.

241
00:20:43,300 --> 00:20:45,110
Ma lo comprimono in modo

242
00:20:45,110 --> 00:20:48,350
che contenga il numero minimo di caratteri lì.

243
00:20:48,350 --> 00:20:55,165
Vedremo il risultato dopo aver completato e faremo la trasformazione lì.

244
00:20:55,165 --> 00:21:00,528
In modo che e poi, non solo,

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

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

247
00:21:10,684 --> 00:21:15,664
&&, questo significa che c'è

248
00:21:15,664 --> 00:21:19,970
altro da venire dopo questo.

249
00:21:19,970 --> 00:21:25,730
Quindi dirò usemin

250
00:21:25,730 --> 00:21:31,171
quindi 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
Quindi questo è il secondo per trasformare il file aboutus.html.

254
00:21:50,078 --> 00:21:55,135
E poi &&, questo è uno script lungo,

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

256
00:21:58,139 --> 00:22:02,890
abbiamo bisogno di trasformare tutti i file.

257
00:22:02,890 --> 00:22:08,150
Ecco perché ho bisogno di specificare ognuno esplicitamente lì.

258
00:22:08,150 --> 00:22:11,910
usemin non accetta i caratteri jolly, quindi

259
00:22:11,910 --> 00:22:16,080
questo è il motivo per cui devo specificare la partecipazione come [INUDIBLE].

260
00:22:16,080 --> 00:22:21,365
E così 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 poi dopo ho messo una virgola perché ho intenzione di introdurre il prossimo script,

264
00:22:40,656 --> 00:22:45,940
che è, Chiamato build.

265
00:22:45,940 --> 00:22:50,490
Quindi questo script di build creerà la mia cartella di distribuzione.

266
00:22:50,490 --> 00:22:54,159
Quindi, per creare

267
00:22:54,159 --> 00:22:59,328
la mia cartella di distribuzione, la prima cosa che farò è npm run clean.

268
00:22:59,328 --> 00:23:07,090
E poi npm esegue copyfonts.

269
00:23:07,090 --> 00:23:12,347
Hai già visto questi due in azione prima,

270
00:23:12,347 --> 00:23:18,950
quindi dirò npm run imagemin per creare le immagini ridotte a icona,

271
00:23:18,950 --> 00:23:23,220
e poi direi npm run usemin.

272
00:23:23,220 --> 00:23:29,257
E questo particolare script costruirà la mia cartella

273
00:23:29,257 --> 00:23:36,171
di distribuzione, il cui contenuto può quindi essere copiato sul mio server web per risolvere il mio passo.

274
00:23:36,171 --> 00:23:39,238
Salvare le modifiche.

275
00:23:39,238 --> 00:23:45,837
Vediamo ora come costruiamo il sito web.

276
00:23:45,837 --> 00:23:49,431
A questo punto, per costruire il nostro sito web e

277
00:23:49,431 --> 00:23:55,950
il prompt dei comandi è semplicemente digitare npm run build e quindi eseguire.

278
00:23:55,950 --> 00:24:00,430
Quello script, che a sua volta eseguirà un insieme

279
00:24:00,430 --> 00:24:05,440
di entrambi gli script, che a sua volta completerà l'intero set

280
00:24:05,440 --> 00:24:10,870
di attività che devono essere eseguite per preparare la mia cartella di distribuzione.

281
00:24:10,870 --> 00:24:13,690
Quindi, andiamo avanti ed eseguiamo questa cosa e

282
00:24:13,690 --> 00:24:18,520
poi questo verrà eseguito attraverso tutti i diversi script lì. Il

283
00:24:18,520 --> 00:24:23,320
completamento del processo richiede alcuni minuti e, una volta completato,

284
00:24:23,320 --> 00:24:29,838
la cartella di distribuzione sarà ora pronta per la distribuzione sul server Web.

285
00:24:29,838 --> 00:24:34,950
Andando al nostro editor,

286
00:24:34,950 --> 00:24:38,750
ora si vede che la cartella di distribuzione è ora pronta.

287
00:24:38,750 --> 00:24:44,020
All' interno della cartella di distribuzione vedrete i tre file di indice,

288
00:24:44,020 --> 00:24:48,580
e nella cartella CSS, vedrete il singolo file chiamato m ain.css,

289
00:24:48,580 --> 00:24:55,050
che contiene tutti i CSS Bootstraps, il CSS Bootstraps

290
00:24:55,050 --> 00:24:57,660
e il codice CSS che avete creato.

291
00:24:58,690 --> 00:25:01,863
E la cartella JS conterrà il main.js,

292
00:25:01,863 --> 00:25:05,287
che contiene Bootstrap, jQuery e

293
00:25:05,287 --> 00:25:10,905
tutto l'intero gruppo di codice JavaScript combinati insieme in un unico file.

294
00:25:10,905 --> 00:25:15,638
L' immagine conterrà le immagini ottimizzate, e i font, ovviamente,

295
00:25:15,638 --> 00:25:18,730
avete visto in precedenza, contengono i file di font.

296
00:25:18,730 --> 00:25:24,030
Ora, diamo una rapida occhiata a index.html che è stato creato qui.

297
00:25:24,030 --> 00:25:27,290
Quindi, quando guardi il index.html che è stato creato qui,

298
00:25:27,290 --> 00:25:31,120
noterai che il tutto è letteralmente illeggibile,

299
00:25:32,530 --> 00:25:37,850
perché quando hai fatto HTML min ha rimosso tutti i

300
00:25:39,500 --> 00:25:42,800
commenti estranei, ha rimosso tutti gli spazi e

301
00:25:42,800 --> 00:25:48,100
quindi creato questo intero set in esecuzione di caratteri.

302
00:25:49,540 --> 00:25:52,800
Per il computer non fa alcuna differenza perché renderà questa

303
00:25:52,800 --> 00:25:55,190
pagina web altrettanto bene.

304
00:25:55,190 --> 00:25:58,727
Per me e te fa la differenza, perché non possiamo leggerlo facilmente.

305
00:26:01,038 --> 00:26:05,620
Quindi questo è ciò che la minificazione causa al tuo file HTML.

306
00:26:05,620 --> 00:26:08,180
Diamo un'occhiata al main.css.

307
00:26:08,180 --> 00:26:12,200
Quando guardi il main.css vedi che l'intera cosa è scricchiolata

308
00:26:12,200 --> 00:26:15,090
in una singola unità, mentre vai in fondo.

309
00:26:16,300 --> 00:26:20,808
Se siete abbastanza coraggiosi, scendere verso il basso e poi si vedrà il,

310
00:26:24,793 --> 00:26:29,683
Vedrete ore specificamente scritte

311
00:26:29,683 --> 00:26:34,870
classi CSS proprio giù in basso qui.

312
00:26:37,220 --> 00:26:42,801
Proprio lì, si riconosce il pulsante giostra, e altre cose,

313
00:26:42,801 --> 00:26:49,693
nabber-dark, e altre cose lì, quindi è tutto aggraffato dentro.

314
00:26:49,693 --> 00:26:52,896
Quindi questo è ciò che la minificazione, e costa.

315
00:26:52,896 --> 00:26:55,530
Main.js, stessa cosa.

316
00:26:55,530 --> 00:26:56,545
Codice illeggibile lì.

317
00:26:56,545 --> 00:26:59,440
Il loro computer, nessuna differenza.

318
00:26:59,440 --> 00:27:03,580
Quindi, con questo, la nostra cartella di distribuzione è ora completa.

319
00:27:03,580 --> 00:27:06,250
Controlliamo la nostra cartella di distribuzione.

320
00:27:06,250 --> 00:27:08,669
Fortunatamente, abbiamo il nostro server di luce già in esecuzione.

321
00:27:08,669 --> 00:27:12,014
Quindi quello che ho intenzione di fare è andare al browser, e

322
00:27:12,014 --> 00:27:16,867
quindi controllare il file CLM pronto per l'indice in questa cartella di distribuzione per

323
00:27:16,867 --> 00:27:20,507
vedere se viene eseguito il rendering correttamente o meno.

324
00:27:20,507 --> 00:27:25,870
Andando al browser, nella mia barra degli indirizzi digiterò,

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

326
00:27:31,440 --> 00:27:36,920
noterò che questo particolare file è il

327
00:27:36,920 --> 00:27:40,680
file di distribuzione che è stato creato, e contiene esattamente la stessa cosa e

328
00:27:40,680 --> 00:27:47,370
rende esattamente allo stesso modo della nostra pagina web originale che abbiamo creato.

329
00:27:47,370 --> 00:27:52,230
A proposito, allo stesso modo, si noti che questo aboutus.html proviene dalla

330
00:27:52,230 --> 00:27:57,490
cartella di distribuzione e questo viene reso esattamente come prima,

331
00:27:57,490 --> 00:28:01,350
e anche il file contactus.html.

332
00:28:01,350 --> 00:28:03,360
Tutto funziona perfettamente.

333
00:28:03,360 --> 00:28:08,970
Quindi ora tutto ciò che ti rimane da fare per distribuire la tua pagina web,

334
00:28:08,970 --> 00:28:15,530
o il tuo sito web, è semplicemente copiare il contenuto dalla cartella dist,

335
00:28:15,530 --> 00:28:19,460
e poi caricarlo sul tuo server web, e

336
00:28:19,460 --> 00:28:24,830
quindi il tuo server web è attivo e funzionante, servendo il tuo sito web.

337
00:28:26,080 --> 00:28:28,740
Con questo, completiamo questo esercizio.

338
00:28:28,740 --> 00:28:33,620
In questo esercizio, abbiamo visto come possiamo fare uso di

339
00:28:33,620 --> 00:28:38,636
script NBM al fine di costruire e distribuire il nostro sito web.

340
00:28:38,636 --> 00:28:40,610
Questo potrebbe essere un buon momento per

341
00:28:40,610 --> 00:28:45,223
fare un Get Comment con il messaggio NPM Scripts, parte 2.

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