1
00:00:03,510 --> 00:00:07,990
Ora che abbiamo una comprensione

2
00:00:07,990 --> 00:00:12,965
dei vari passaggi coinvolti nella costruzione e distribuzione del nostro sito web,

3
00:00:12,965 --> 00:00:18,690
e anche una breve introduzione agli script NPM nella lezione precedente,

4
00:00:18,690 --> 00:00:22,830
facciamo un tuffo nello sviluppo di

5
00:00:22,830 --> 00:00:28,755
script NPM per automatizzare molte delle attività di cui avevamo parlato in precedenza.

6
00:00:28,755 --> 00:00:31,350
Come hai visto nella lezione precedente,

7
00:00:31,350 --> 00:00:38,760
abbiamo già un paio di script NPM che avevamo incluso nel nostro file package.json,

8
00:00:38,760 --> 00:00:41,735
uno per avviare il server lite e il secondo

9
00:00:41,735 --> 00:00:46,240
per convertire il codice SCSS in CSS.

10
00:00:46,240 --> 00:00:49,755
In questo esercizio e nel prossimo,

11
00:00:49,755 --> 00:00:53,055
esploreremo gli script NPM in modo un po 'più dettagliato.

12
00:00:53,055 --> 00:01:00,810
Per iniziare, facciamo prima un po 'di pulizia sul file index.html.

13
00:01:00,810 --> 00:01:03,095
Andando al file index.html,

14
00:01:03,095 --> 00:01:09,325
vediamo che abbiamo questo codice JavaScript nella parte inferiore di questo file index.html.

15
00:01:09,325 --> 00:01:12,930
Preferirei mantenere questo codice JavaScript in

16
00:01:12,930 --> 00:01:19,385
un file separato che contiene tutti i nostri script

17
00:01:19,385 --> 00:01:23,015
e quindi includere quel file nel mio index.html.

18
00:01:23,015 --> 00:01:31,155
Per fare ciò, creiamo un'altra cartella qui con il nome js.

19
00:01:31,155 --> 00:01:34,210
E in questa cartella js,

20
00:01:34,210 --> 00:01:41,520
creerò un nuovo file con il nome scripts.js.

21
00:01:42,120 --> 00:01:49,060
E andando a index.html,

22
00:01:49,060 --> 00:01:54,890
ho intenzione di tagliare semplicemente questo codice JavaScript da qui e

23
00:01:54,890 --> 00:02:01,120
poi incollarlo nel file scripts.js,

24
00:02:01,120 --> 00:02:05,305
e quindi salvare le modifiche al file scripts.js.

25
00:02:05,305 --> 00:02:10,915
Ora che abbiamo spostato tutto il nostro codice JavaScript nel proprio file,

26
00:02:10,915 --> 00:02:20,430
ho intenzione di includere quel file JavaScript nel mio index.html proprio lì.

27
00:02:20,430 --> 00:02:24,540
Direi <script src =

28
00:02:24,540 --> 00:02:31,040
«js/scripts.js» Quindi in questo modo,

29
00:02:31,040 --> 00:02:35,005
tutto il mio codice JavaScript è ora incluso nel mio file index.html.

30
00:02:35,005 --> 00:02:40,390
In questo modo, il mio file index.html contiene tutto il codice html

31
00:02:40,390 --> 00:02:46,345
e tutto il mio codice CSS e JavaScript sono disattivati nei loro file separati.

32
00:02:46,345 --> 00:02:52,590
Lasciami copiare questa riga di script dalla pagina index.html,

33
00:02:52,590 --> 00:02:56,330
quindi andare alla pagina aboutus.html,

34
00:02:56,330 --> 00:02:59,365
scorrere verso il basso fino in fondo dove ho incluso

35
00:02:59,365 --> 00:03:02,540
altri script e quindi incollarlo.

36
00:03:02,540 --> 00:03:07,405
Allo stesso modo, lasciami andare alla pagina contactus.html

37
00:03:07,405 --> 00:03:11,545
e scorrere di nuovo verso il basso fino alla parte inferiore del file lì.

38
00:03:11,545 --> 00:03:13,975
Lasciami incollare questa linea.

39
00:03:13,975 --> 00:03:18,205
Salviamo le modifiche e passiamo al passaggio successivo.

40
00:03:18,205 --> 00:03:23,075
Il prossimo passo che vorrei fare è installare un paio di

41
00:03:23,075 --> 00:03:29,905
moduli NPM che farò uso per automatizzare alcune attività.

42
00:03:29,905 --> 00:03:34,310
Il primo modulo NMP che installerò è chiamato onchange.

43
00:03:34,310 --> 00:03:42,335
Questo modulo onchange sta andando a guardare i file nella mia cartella del progetto,

44
00:03:42,335 --> 00:03:44,445
e poi ogni volta che quei file cambiano,

45
00:03:44,445 --> 00:03:48,865
allora attiva automaticamente un'attività da eseguire.

46
00:03:48,865 --> 00:03:50,660
In questo modo, ad esempio,

47
00:03:50,660 --> 00:03:56,860
se imposto un orologio dequotazione su alcuni file,

48
00:03:56,860 --> 00:03:59,305
ad esempio il mio file SCSS,

49
00:03:59,305 --> 00:04:02,270
quindi ogni volta che apporto modifiche al mio file SCSS,

50
00:04:02,270 --> 00:04:07,220
verrà automaticamente ricompilato nel file CSS corrispondente.

51
00:04:07,220 --> 00:04:11,565
Abbiamo già lo script che fa la ricompilazione.

52
00:04:11,565 --> 00:04:16,080
Quindi tutto quello che devo fare è impostare un orologio su quel particolare file.

53
00:04:16,080 --> 00:04:20,675
Ora questo è dove ho intenzione di fare uso del modulo NPM chiamato Onchange.

54
00:04:20,675 --> 00:04:23,170
C' è un altro modello NPM chiamato Watch,

55
00:04:23,170 --> 00:04:25,945
che è anche possibile utilizzare per lo stesso scopo.

56
00:04:25,945 --> 00:04:29,240
In questo esercizio ho intenzione di utilizzare il modulo Onchange,

57
00:04:29,240 --> 00:04:34,765
poi ci occuperemo di concedere e sorseggiare nelle lezioni successive,

58
00:04:34,765 --> 00:04:37,580
useremo il modulo Watch per lo stesso scopo.

59
00:04:37,580 --> 00:04:42,845
Inoltre, installerò anche un altro modulo NPM chiamato shell parallela.

60
00:04:42,845 --> 00:04:46,250
Questo modulo Parallelshell mi permette di eseguire

61
00:04:46,250 --> 00:04:51,320
più script NPM in Parallelshells come suggerisce il nome.

62
00:04:51,320 --> 00:04:55,095
Quindi in questo modo, è possibile

63
00:04:55,095 --> 00:04:59,785
eseguire contemporaneamente più script NPM e consentirmi di tenere d'occhio vari file

64
00:04:59,785 --> 00:05:03,835
e anche di eseguire altre attività.

65
00:05:03,835 --> 00:05:06,340
Quindi consente di installare questi due moduli NPM.

66
00:05:06,340 --> 00:05:09,645
Li installeremo localmente in questo particolare progetto.

67
00:05:09,645 --> 00:05:14,555
Quindi per farlo digiterò npm install.

68
00:05:14,555 --> 00:05:20,420
Devo —save-dev e poi direi onchange

69
00:05:20,420 --> 00:05:27,540
e parallelshell e quindi attendere che questi due moduli NPM vengano installati.

70
00:05:27,540 --> 00:05:29,755
Una volta installati i due moduli,

71
00:05:29,755 --> 00:05:35,745
includerò un paio di script NPM nel mio file package.json.

72
00:05:35,745 --> 00:05:40,930
E vi spiegherò il motivo perché includiamo quei copioni lì.

73
00:05:40,930 --> 00:05:43,650
Tornando al mio file package.json,

74
00:05:43,650 --> 00:05:46,270
subito dopo questo SCSS,

75
00:05:46,270 --> 00:05:52,565
includerò un altro script chiamato «watch: scss».

76
00:05:52,565 --> 00:05:55,125
E come suggerisce il nome,

77
00:05:55,125 --> 00:05:59,290
questo sta andando a tenere d'occhio i file SCSS.

78
00:05:59,290 --> 00:06:07,435
Quindi questo è dove invocherò il modulo NPM onchange che ho appena installato,

79
00:06:07,435 --> 00:06:12,610
e poi direi codice singolo 'css/*.scss».

80
00:06:13,960 --> 00:06:20,465
Quindi il che significa che tenere d'occhio tutti i file SCSS che ci sono nella cartella CSS.

81
00:06:20,465 --> 00:06:22,095
Se qualcuno di loro cambia,

82
00:06:22,095 --> 00:06:29,535
allora attiverai questo particolare script e lo script è «—npm

83
00:06:29,535 --> 00:06:35,915
run scss» perché questo

84
00:06:35,915 --> 00:06:42,380
è lo script che farà la ricompilazione del mio codice SCSS nel codice CSS corrispondente.

85
00:06:42,380 --> 00:06:46,075
Quindi con questo, ho impostato un orologio per il mio SCSS.

86
00:06:46,075 --> 00:06:49,160
Ovviamente posso digitare «nmp watch: scss».

87
00:06:49,160 --> 00:06:56,700
E poi attiverà lo script lì con il modulo onchange,

88
00:06:56,700 --> 00:06:58,690
quindi terrà un controllo su questo.

89
00:06:58,690 --> 00:07:02,960
Se stai facendo questo esercizio su un computer Windows,

90
00:07:02,960 --> 00:07:06,345
invece della citazione singola nello script,

91
00:07:06,345 --> 00:07:10,760
dovresti sostituirlo con la barra rovesciata e la virgoletta doppia.

92
00:07:10,760 --> 00:07:13,660
Allo stesso modo, l'altra singola citazione

93
00:07:13,660 --> 00:07:16,490
sostituisce anche quella con la barra rovesciata e la doppia virgoletta.

94
00:07:16,490 --> 00:07:22,770
Quindi, questo è come apparirà lo script su una macchina Windows.

95
00:07:22,770 --> 00:07:28,385
Ora, ho intenzione di fare uso di Parallelshell

96
00:07:28,385 --> 00:07:35,765
per attivare più di questi script per essere contemporaneamente attivi.

97
00:07:35,765 --> 00:07:39,670
Quindi direi «parallelshell»,

98
00:07:39,990 --> 00:07:42,660
e poi tra virgolette,

99
00:07:42,660 --> 00:07:49,150
direi 'npm run watch: scss'.

100
00:07:49,590 --> 00:07:55,605
Quindi Parallelshell prende più di questi come parametri,

101
00:07:55,605 --> 00:07:58,380
ognuno tra virgolette singole lì.

102
00:07:58,380 --> 00:08:05,380
E il secondo è 'npm run lite'.

103
00:08:05,550 --> 00:08:11,630
Quindi puoi vedere che questo Parallelshell mi permette di eseguire due script contemporaneamente,

104
00:08:11,630 --> 00:08:14,370
uno per tenere d'occhio il mio file SCSS,

105
00:08:14,370 --> 00:08:17,745
l'altro per eseguire la shell lite.

106
00:08:17,745 --> 00:08:21,840
Se stai facendo questo esercizio su una macchina Windows,

107
00:08:21,840 --> 00:08:25,245
invece del singolo codice nello script,

108
00:08:25,245 --> 00:08:29,665
dovresti sostituirlo con la barra rovesciata e la doppia virgoletta.

109
00:08:29,665 --> 00:08:32,560
Allo stesso modo, l'altra singola citazione

110
00:08:32,560 --> 00:08:35,390
sostituisce anche quella con la barra rovesciata e la doppia virgoletta.

111
00:08:35,390 --> 00:08:41,685
Quindi questo è come apparirà lo script su una macchina Windows.

112
00:08:41,685 --> 00:08:44,335
Ora, dopo aver fatto queste modifiche,

113
00:08:44,335 --> 00:08:48,160
lasciami salvare le modifiche e poi andrò

114
00:08:48,160 --> 00:08:52,890
qui e poi avviare uno script che ho qui.

115
00:08:52,890 --> 00:08:59,480
Lo cambierò da «npm run lite» a «npm run watch: all».

116
00:09:01,950 --> 00:09:05,145
E salva le modifiche qui.

117
00:09:05,145 --> 00:09:10,460
Quindi con questo, gli script di cui ho bisogno sono ora impostati.

118
00:09:10,460 --> 00:09:15,745
Così ora, posso andare avanti e fare

119
00:09:15,745 --> 00:09:21,124
«npm start» e che fondamentalmente avvierà questi due script contemporaneamente,

120
00:09:21,124 --> 00:09:24,850
uno tenendo d'occhio i miei file SCSS che a sua volta

121
00:09:24,850 --> 00:09:28,825
attiverà la compilazione di SCSS a CSS,

122
00:09:28,825 --> 00:09:32,150
l'altro che avvia il mio server lite.

123
00:09:32,150 --> 00:09:41,125
Ora, ho iniziato sotto scheda tabella e poi spostato nella cartella del progetto,

124
00:09:41,125 --> 00:09:42,665
e quindi aggiungere il prompt.

125
00:09:42,665 --> 00:09:44,705
Digiterò «npm start».

126
00:09:44,705 --> 00:09:46,585
E questo dovrebbe attivare

127
00:09:46,585 --> 00:09:54,435
sia il mio server lite che salverà i file dalla mia cartella confusione,

128
00:09:54,435 --> 00:10:02,290
sia anche attivare il modulo Onchange per tenere d'occhio i file SCSS.

129
00:10:02,290 --> 00:10:09,100
Per aiutarti a illustrarti come questo Onchange mantiene un orologio sui miei file SCSS,

130
00:10:09,100 --> 00:10:14,705
quello che ho intenzione di fare è andare al mio file styles.scss qui,

131
00:10:14,705 --> 00:10:18,675
e quindi semplicemente salvare il file di nuovo.

132
00:10:18,675 --> 00:10:20,860
Ora ogni volta che questo file viene salvato,

133
00:10:20,860 --> 00:10:22,620
non ho intenzione di apportare alcuna modifica ad esso.

134
00:10:22,620 --> 00:10:25,755
Sto solo andando a colpire il salvataggio sul file.

135
00:10:25,755 --> 00:10:27,840
Quindi, ogni volta che questo file viene modificato,

136
00:10:27,840 --> 00:10:30,620
vedrai che immediatamente

137
00:10:32,750 --> 00:10:40,495
Onchange attiverà lo script SAS del nodo da eseguire,

138
00:10:40,495 --> 00:10:47,555
che compilerà il file da SCSS a CSS e crea il file CSS qui,

139
00:10:47,555 --> 00:10:50,335
e quindi salva il file che attiverà anche la

140
00:10:50,335 --> 00:10:55,450
mia pagina web per essere ricaricata nel browser.

141
00:10:55,450 --> 00:11:03,285
Quindi, questo è essenzialmente ciò che abbiamo ottenuto utilizzando il modulo Onchange per tenere

142
00:11:03,285 --> 00:11:07,660
d'occhio i file che poi modificati

143
00:11:07,660 --> 00:11:12,395
attiverà automaticamente alcuni degli script NPM.

144
00:11:12,395 --> 00:11:20,790
Ora, questo ci libera dalle preoccupazioni circa la necessità di attivare manualmente questi compiti.

145
00:11:20,790 --> 00:11:25,390
Ad esempio, se si dispone di un insieme di attività che si desidera attivare automaticamente,

146
00:11:25,390 --> 00:11:27,395
si verificano alcune modifiche.

147
00:11:27,395 --> 00:11:35,100
È possibile impostare facilmente tali attività di orologio per tenere un controllo su queste modifiche.

148
00:11:35,100 --> 00:11:37,785
Ora l'ho illustrato con un solo esempio.

149
00:11:37,785 --> 00:11:39,985
Nel mio esempio qui,

150
00:11:39,985 --> 00:11:45,260
sto solo modificando i file CSS che devono essere compilati.

151
00:11:45,260 --> 00:11:50,125
Ma più tardi, allora lavoriamo con framework JavaScript.

152
00:11:50,125 --> 00:11:57,335
Si vedrebbe che si potrebbe desiderare di attivare compilazioni quando vari file sono cambiati.

153
00:11:57,335 --> 00:12:02,964
E tutti questi possono essere facilmente gestiti utilizzando questi compiti orologio.

154
00:12:02,964 --> 00:12:07,560
Sarà questo, completiamo questo esercizio.

155
00:12:07,560 --> 00:12:13,685
Qui, abbiamo imparato come impostare alcuni altri script NPM

156
00:12:13,685 --> 00:12:20,855
e attivare automaticamente alcuni degli script utilizzando il modulo onchange NPM.

157
00:12:20,855 --> 00:12:24,550
Abbiamo anche visto l'uso del modulo shell parallela per eseguire

158
00:12:24,550 --> 00:12:32,050
più script NPM contemporaneamente nella nostra finestra terminale.

159
00:12:32,200 --> 00:12:42,890
Questo è un buon punto per fare un commento Git con il messaggio «NPM Scripts Part 1".