1
00:00:03,550 --> 00:00:06,380
E' ora di iniziare a Grunting.

2
00:00:06,380 --> 00:00:10,280
In questo e nel prossimo esercizio ripeteremo lo

3
00:00:10,280 --> 00:00:15,925
stesso tipo di configurazione che abbiamo fatto con gli script NPM.

4
00:00:15,925 --> 00:00:22,405
Nella prima parte, abbiamo intenzione di impostare la conversione da SCSS a CSS.

5
00:00:22,405 --> 00:00:28,570
Quindi imposteremo un'attività di orologio e serviremo anche il codice utilizzando la sincronizzazione del browser.

6
00:00:28,570 --> 00:00:31,065
Nella seconda parte dell'esercizio,

7
00:00:31,065 --> 00:00:40,010
useremo Usman e i vari compiti per preparare la distribuzione.

8
00:00:40,010 --> 00:00:44,170
Questi esercizi non sono affatto l'unico modo per

9
00:00:44,170 --> 00:00:49,720
implementare configurazioni Grunt o file di chiamata.

10
00:00:49,720 --> 00:00:54,575
Questa è solo un'illustrazione di come possiamo utilizzare questi strumenti.

11
00:00:54,575 --> 00:00:58,375
Potresti voler inventare il tuo modo di impostare il tuo file

12
00:00:58,375 --> 00:01:03,320
Grunt e il tuo file di chiamata per i tuoi progetti.

13
00:01:03,320 --> 00:01:13,200
Il nostro primo passo per fare uso di Grunt è impostare la Grunt CLI come modulo NPM globale.

14
00:01:13,200 --> 00:01:21,550
Per fare ciò, aggiungere il tipo di prompt: NPM -g install Grunt CLI.

15
00:01:21,550 --> 00:01:25,190
Questa è l'interfaccia a riga di comando per Grunt.

16
00:01:25,190 --> 00:01:27,480
Una volta che questo è impostato,

17
00:01:27,480 --> 00:01:34,690
allora imposteremo un modulo Grunt NPM locale per l'uso all'interno dei nostri progetti.

18
00:01:34,690 --> 00:01:38,370
La Grunt CLI ci permette di usare Grunt.

19
00:01:38,370 --> 00:01:40,050
Abbiamo creato la CLI di Grunt.

20
00:01:40,050 --> 00:01:47,405
Quindi il prossimo passo è impostare - Grunt localmente,

21
00:01:47,405 --> 00:01:52,655
quindi; NPM installa Grunt meno meno save dev.

22
00:01:52,655 --> 00:01:56,365
Quindi installare Grunt localmente.

23
00:01:56,365 --> 00:01:58,930
Una volta completati questi due passaggi,

24
00:01:58,930 --> 00:02:04,850
il passo successivo è quello di andare al nostro progetto e quindi creare un nuovo file,

25
00:02:04,850 --> 00:02:10,165
e lo chiameremo come Gruntfile.js.

26
00:02:10,165 --> 00:02:19,034
All' interno di questo Gruntfile.js, imposteremo il codice per configurare le nostre attività Grunt.

27
00:02:19,034 --> 00:02:27,770
In questo file, il primo passo è aggiungere 'use strict' significato,

28
00:02:27,770 --> 00:02:30,640
'use strict' codice JavaScript.

29
00:02:30,640 --> 00:02:36,460
Quindi dici module.exports

30
00:02:37,050 --> 00:02:42,830
= funzione (grugnito).

31
00:02:44,990 --> 00:02:53,005
Quindi qui dentro, imposteremo la configurazione Grunt per tutte le attività.

32
00:02:53,005 --> 00:02:57,655
Come ho accennato in precedenza, Grunt è un task runner basato sulla configurazione.

33
00:02:57,655 --> 00:03:02,200
Quindi, installeremo i vari plug-in Grunt per

34
00:03:02,200 --> 00:03:08,370
le varie attività e poi li configureremo nel nostro file Grunt.

35
00:03:08,370 --> 00:03:10,769
Per fare la configurazione,

36
00:03:10,769 --> 00:03:12,605
aggiungeremo il codice qui,

37
00:03:12,605 --> 00:03:19,290
dicendo: grunt.initConfig

38
00:03:19,410 --> 00:03:28,655
e all'interno di questo InitConfig,

39
00:03:28,655 --> 00:03:32,805
aggiungeremo nella configurazione per le attività Grunt della ruota.

40
00:03:32,805 --> 00:03:34,580
Una volta completato questo,

41
00:03:34,580 --> 00:03:37,145
salviamo le modifiche.

42
00:03:37,145 --> 00:03:39,385
Nel nostro prossimo passo,

43
00:03:39,385 --> 00:03:47,610
imposteremo alcuni plug-in Grunt per permetterci di convertire il codice SCSS in codice CSS.

44
00:03:47,610 --> 00:03:54,240
Per fare ciò, installerò un modulo NPM chiamato

45
00:03:54,240 --> 00:04:01,875
Grunt SASS — Grunt SASS, save def.

46
00:04:01,875 --> 00:04:03,450
Oltre a questo,

47
00:04:03,450 --> 00:04:07,375
configurerò altri due moduli Grunt chiamati,

48
00:04:07,375 --> 00:04:18,610
NPM Install Time Grunt e Jit Grunt.

49
00:04:19,990 --> 00:04:23,430
Questi due moduli — Time Grunt e Jit grunt.

50
00:04:23,430 --> 00:04:31,190
Il modulo Time Grunt stampa le statistiche del tempo per l'esecuzione delle varie attività Grunt.

51
00:04:31,190 --> 00:04:35,150
Il modulo Jit Grunt viene utilizzato per caricare in

52
00:04:35,150 --> 00:04:40,420
quei plug-in Grunt ogni volta che sono richiesti all'interno di qualsiasi applicazione.

53
00:04:40,420 --> 00:04:42,860
L' altra alternativa è caricare

54
00:04:42,860 --> 00:04:49,475
i vari moduli Grunt esplicitamente nel file di configurazione di Grunt.

55
00:04:49,475 --> 00:04:53,085
Preferisco usare Jit Grunt

56
00:04:53,085 --> 00:04:56,790
in modo che si occupi di caricare qualsiasi plug-in Grunt

57
00:04:56,790 --> 00:04:59,955
di cui ho bisogno, come quando li uso nel codice.

58
00:04:59,955 --> 00:05:04,785
Installare questi due Time Grunt e Jit Grunt e una volta installati,

59
00:05:04,785 --> 00:05:11,845
allora è il momento di configurare il nostro compito di conversione SASS.

60
00:05:11,845 --> 00:05:14,870
Ora ovviamente devi chiederti perché digitiamo questo

61
00:05:14,870 --> 00:05:18,250
module.exports e quindi funziona e così via.

62
00:05:18,250 --> 00:05:21,485
Questo è il modo in cui definiamo i moduli nodo. Ci

63
00:05:21,485 --> 00:05:26,590
occuperemo della struttura dei moduli nodo e perché usiamo questo approccio

64
00:05:26,590 --> 00:05:33,375
nel corso dei moduli nodo lato server più avanti nella specializzazione.

65
00:05:33,375 --> 00:05:38,415
Per il momento, basta accettare che è così che il codice è scritto per Grunt,

66
00:05:38,415 --> 00:05:41,040
perché il file Grunt è esso stesso

67
00:05:41,040 --> 00:05:47,110
un modulo nodo che sta per caricare in vari plug-in Grunt.

68
00:05:47,110 --> 00:05:51,815
Dopo averlo fatto, abbiamo intenzione di richiedere un paio di plugin Grunt qui.

69
00:05:51,815 --> 00:05:59,080
Per fare ciò, diremo require ('time- grunt'),

70
00:05:59,080 --> 00:06:08,840
e diremo grunt rispetto alla configurazione che usiamo per il caricamento nel Time Grunt.

71
00:06:08,840 --> 00:06:12,555
Richiedere, come si impara più tardi quando si impara sui moduli nodo,

72
00:06:12,555 --> 00:06:16,660
è un modo per dire che il carico nel modulo nodo Time Grunt da

73
00:06:16,660 --> 00:06:20,815
utilizzare all'interno di questo particolare modulo nodo.

74
00:06:20,815 --> 00:06:28,450
Allo stesso modo, richiederò il modulo nodo Jit Grunt.

75
00:06:32,190 --> 00:06:37,095
Questo modulo nodo Jit Grunt si assicura che si caricherà in

76
00:06:37,095 --> 00:06:42,540
qualsiasi altro modulo nodo o qualsiasi altro plug-in Grunt - che sono moduli nodo,

77
00:06:42,540 --> 00:06:50,925
fondamentalmente, come quando sono effettivamente impliciti all'interno del mio Grunt per fare varie attività.

78
00:06:50,925 --> 00:06:55,295
L' alternativa sarebbe quella di caricare manualmente in ciascuno di

79
00:06:55,295 --> 00:07:00,600
questi plug-in Grunt esplicitamente utilizzando l'istruzione richiesta.

80
00:07:00,600 --> 00:07:04,445
Mi sto risparmiando un po 'di problemi usando semplicemente Jit Grunt,

81
00:07:04,445 --> 00:07:07,825
che si occupa di caricare quei moduli nodo quando richiesto.

82
00:07:07,825 --> 00:07:11,395
Ora passando nella configurazione,

83
00:07:11,395 --> 00:07:16,159
come abbiamo capito, Grunt lavora sulla configurazione,

84
00:07:16,159 --> 00:07:21,935
quindi ogni plug-in Grunt che vogliamo utilizzare per eseguire un'attività,

85
00:07:21,935 --> 00:07:27,225
deve essere configurato all'interno di questo file Grunt InitConfig.

86
00:07:27,225 --> 00:07:32,965
Questa configurazione è fondamentalmente un oggetto JavaScript.

87
00:07:32,965 --> 00:07:36,145
Se si ha familiarità con gli oggetti JavaScript,

88
00:07:36,145 --> 00:07:40,275
si inizia a capire la sintassi molto, molto rapidamente.

89
00:07:40,275 --> 00:07:47,330
Il primo compito che ho intenzione di configurare è SASS.

90
00:07:47,330 --> 00:07:49,855
Quindi, scrivo SASS qui,

91
00:07:49,855 --> 00:07:55,200
e poi dentro SASS, dico dist.

92
00:07:55,920 --> 00:08:01,570
Ora devi credere che questo sia il modo in cui viene eseguita la configurazione.

93
00:08:01,570 --> 00:08:03,280
Quindi, dico dist,

94
00:08:03,280 --> 00:08:05,295
e poi dentro,

95
00:08:05,295 --> 00:08:10,980
dico file, e poi dentro,

96
00:08:10,980 --> 00:08:14,125
specifico i file che devono essere convertiti.

97
00:08:14,125 --> 00:08:20,270
Dico, CSS/styles.CSS,

98
00:08:20,270 --> 00:08:28,815
che dipende da CSS/Styles.scss.

99
00:08:28,815 --> 00:08:36,925
Con questo, completiamo qui la configurazione del compito SASS.

100
00:08:36,925 --> 00:08:40,620
Una volta completata la configurazione dell'attività SASS,

101
00:08:40,620 --> 00:08:43,485
se si desidera veramente eseguire l'attività SASS,

102
00:08:43,485 --> 00:08:52,950
quindi in basso si configura l'attività SASS dicendo «grunt.registerTask»,

103
00:08:54,770 --> 00:08:58,545
e poi chiamerò questa attività CSS,

104
00:08:58,545 --> 00:09:00,280
e poi lo farò,

105
00:09:00,280 --> 00:09:04,935
tra parentesi scriba, dire «SASS».

106
00:09:04,935 --> 00:09:07,605
Ora, per capire la sintassi qui,

107
00:09:07,605 --> 00:09:13,715
questo come puoi vedere dice «grunt.registerTask» e il nome di questa attività è CSS.

108
00:09:13,715 --> 00:09:15,340
E cosa comporta questo compito?

109
00:09:15,340 --> 00:09:21,685
Questa attività prevede l'esecuzione dell'attività SASS che è già stata configurata qui.

110
00:09:21,685 --> 00:09:25,080
Questo è il modo in cui leggiamo questa sintassi qui.

111
00:09:25,080 --> 00:09:27,950
Se non si desidera, non è necessario configurarlo,

112
00:09:27,950 --> 00:09:33,065
perché utilizzeremo SASS insieme al task watch per

113
00:09:33,065 --> 00:09:38,460
eseguire automaticamente il SASS quando il nostro file SCSS viene modificato.

114
00:09:38,460 --> 00:09:40,840
Con questo, salviamo le modifiche.

115
00:09:40,840 --> 00:09:45,570
Permettetemi di mostrarvi questo particolare compito in azione.

116
00:09:45,570 --> 00:09:48,990
Se configuri l'attività con il nome CSS lì,

117
00:09:48,990 --> 00:09:50,650
aggiungi il prompt,

118
00:09:50,650 --> 00:09:54,655
puoi digitare «grunt.CSS» e quindi eseguirà

119
00:09:54,655 --> 00:10:00,090
l'attività di conversione del codice sass in codice CSS.

120
00:10:00,090 --> 00:10:04,005
Andando al prompt dei comandi, al prompt,

121
00:10:04,005 --> 00:10:09,070
digitare «grunt.CSS» e vedrai

122
00:10:09,070 --> 00:10:17,530
l'attività SASS in esecuzione e quindi convertire il file styles.sess in file styles.CSS.

123
00:10:17,530 --> 00:10:19,390
Inoltre, come puoi vedere,

124
00:10:19,390 --> 00:10:23,340
il Time Grunt stamperà statistiche come questa

125
00:10:23,340 --> 00:10:27,800
per indicare quanto tempo ha impiegato ciascuna di queste attività.

126
00:10:27,800 --> 00:10:29,520
Se questo ti interessa,

127
00:10:29,520 --> 00:10:32,880
puoi guardare questi dettagli qui.

128
00:10:32,890 --> 00:10:39,360
Nel nostro prossimo passo, ci accingiamo a configurare l'orologio e il server,

129
00:10:39,360 --> 00:10:41,800
al fine di tenere un controllo sui

130
00:10:41,800 --> 00:10:45,960
file SASS e convertirli automaticamente quando vengono cambiati,

131
00:10:45,960 --> 00:10:48,625
e poi imposteremo il server,

132
00:10:48,625 --> 00:10:54,045
utilizzando BrowserSync per servire il nostro sito web.

133
00:10:54,045 --> 00:10:56,700
Per impostare le attività di Guarda e Servi,

134
00:10:56,700 --> 00:10:59,740
installerò un paio di altri plug-in grugniti,

135
00:10:59,740 --> 00:11:03,990
quindi dirò npm install,

136
00:11:04,300 --> 00:11:12,465
grunt-contrib-watch meno save-dev.

137
00:11:12,465 --> 00:11:15,480
Quindi questo è il grunt-contrib-watch.

138
00:11:15,480 --> 00:11:21,450
Grunt plug-in che è un modulo nodo, quindi installalo.

139
00:11:21,670 --> 00:11:32,030
Così il plugin Watch ti permette di tenere un controllo sui tuoi vari file.

140
00:11:32,030 --> 00:11:33,550
Il prossimo plug-in che

141
00:11:33,550 --> 00:11:43,750
installerò è grunt-browser-sync.

142
00:11:44,770 --> 00:11:50,515
Il modulo BrowserSync è quello che farò uso di,

143
00:11:50,515 --> 00:11:54,230
per salvare i file dalla mia cartella di progetto, in

144
00:11:54,230 --> 00:12:00,090
modo da poter vedere il sito web in un browser.

145
00:12:00,090 --> 00:12:04,845
Una volta installati quei due moduli,

146
00:12:04,845 --> 00:12:08,295
è il momento di entrare nel mio grunt.initconfig

147
00:12:08,295 --> 00:12:11,635
e quindi configurare le due attività.

148
00:12:11,635 --> 00:12:13,300
Uno per tenere un orologio,

149
00:12:13,300 --> 00:12:18,125
il secondo per servire i file usando BrowserSync.

150
00:12:18,125 --> 00:12:20,680
Quindi, tornando al mio initconfig,

151
00:12:20,680 --> 00:12:23,710
metti una virgola lì dopo il SASS,

152
00:12:23,710 --> 00:12:26,460
e poi passa alla riga successiva.

153
00:12:27,050 --> 00:12:32,650
Ricordati sempre di mettere questa virgola lì.

154
00:12:32,650 --> 00:12:40,990
Una virgola mancante causa un sacco di mal di testa quando stai cercando di eseguire le tue attività grugnito.

155
00:12:40,990 --> 00:12:44,635
È molto difficile identificare che hai perso una virgola.

156
00:12:44,635 --> 00:12:46,950
Quindi è importante prestare attenzione

157
00:12:46,950 --> 00:12:52,290
alla sintassi e assicurarsi di non perdere nessuna di queste virgole.

158
00:12:52,290 --> 00:12:55,425
Tornerà a morderti al momento sbagliato.

159
00:12:55,425 --> 00:12:57,105
Quindi il prossimo compito,

160
00:12:57,105 --> 00:13:00,190
che ho intenzione di configurare è WatchTask.

161
00:13:00,190 --> 00:13:03,605
Quindi dico Guarda e cosa voglio guardare?

162
00:13:03,605 --> 00:13:10,070
Voglio guardare questi file, che è CSS/*.SCSS.

163
00:13:10,120 --> 00:13:17,680
Quindi questo è il file SCSS che voglio guardare.

164
00:13:17,680 --> 00:13:22,445
Tutti i file SCSS nella mia cartella CSS.

165
00:13:22,445 --> 00:13:26,670
Se qualcuno di essi viene modificato,

166
00:13:26,670 --> 00:13:32,865
l'attività corrispondente che eseguirò è SASS.

167
00:13:32,865 --> 00:13:36,180
L' attività SASS che ho già configurato in precedenza.

168
00:13:36,180 --> 00:13:39,710
Quindi con questo, ho configurato il mio watchTask,

169
00:13:39,710 --> 00:13:42,820
per tenere un controllo sui file SCSS e quindi

170
00:13:42,820 --> 00:13:46,075
convertirli automaticamente invocando il SASS.

171
00:13:46,075 --> 00:13:50,475
Ora con WatchTask posso effettivamente tenere un controllo su diversi file

172
00:13:50,475 --> 00:13:55,650
e quindi richiamare automaticamente le attività corrispondenti per quei file.

173
00:13:55,650 --> 00:13:57,895
Quindi, ad esempio, posso tenere d'occhio i

174
00:13:57,895 --> 00:14:01,660
miei file JavaScript e quindi fare automaticamente suggerimenti JS,

175
00:14:01,660 --> 00:14:04,465
quando i miei file cambiano.

176
00:14:04,465 --> 00:14:07,770
O per fare l'identificazione e così via.

177
00:14:07,770 --> 00:14:12,100
Ora, il prossimo che ho intenzione di configurare è BrowserSync.

178
00:14:12,100 --> 00:14:15,345
Ancora una volta non dimenticare la virgola dopo WatchTask,

179
00:14:15,345 --> 00:14:19,070
quindi digitare BrowserSync.

180
00:14:20,500 --> 00:14:26,369
Direi BrowserSync qui e poi per BrowserSync,

181
00:14:26,369 --> 00:14:30,570
direi configurare un'attività all'interno.

182
00:14:30,570 --> 00:14:35,090
Ora, questa è la sintassi che usiamo per inserire

183
00:14:35,090 --> 00:14:40,410
la configurazione all'interno del nostro file grunt.

184
00:14:40,410 --> 00:14:42,840
Quindi dice BrowserSync dev.

185
00:14:42,840 --> 00:14:44,940
Ora, se mi chiedete perché,

186
00:14:44,940 --> 00:14:46,895
abbiamo solo bisogno di leggere la documentazione,

187
00:14:46,895 --> 00:14:52,275
per ognuno di questi plug-in e poi capire come configurare quei plug-in.

188
00:14:52,275 --> 00:14:56,000
Quindi, ho già letto la documentazione e ho capito

189
00:14:56,000 --> 00:15:00,885
alcune impostazioni di base per ciascuna di queste attività, ecco perché li sto semplicemente digitando.

190
00:15:00,885 --> 00:15:03,525
Ovviamente, se vuoi una maggiore flessibilità,

191
00:15:03,525 --> 00:15:07,350
potresti voler leggere la documentazione corrispondente e quindi scoprire

192
00:15:07,350 --> 00:15:11,655
altri modi per configurare queste attività.

193
00:15:11,655 --> 00:15:18,010
La mia configurazione qui è solo un modo per affrontare o risolvere i problemi.

194
00:15:18,010 --> 00:15:22,850
Quindi qui specifico i BSFiles,

195
00:15:22,850 --> 00:15:28,685
quindi questo file specifica quali file devono essere osservati

196
00:15:28,685 --> 00:15:36,715
dal mio BrowserSync e poi quando uno di questi file cambia,

197
00:15:36,715 --> 00:15:44,805
allora il mio BrowserSync farà sì che il browser venga ricaricato.

198
00:15:44,805 --> 00:15:50,185
Quindi ho intenzione di guardare tutti i file nella mia cartella CSS,

199
00:15:50,185 --> 00:15:53,220
i file HTML nella mia cartella di progetto

200
00:15:53,220 --> 00:15:57,945
e poi tutti i miei file JavaScript nella cartella JS.

201
00:15:57,945 --> 00:16:03,835
Quindi, con questo ho configurato tutti quei file su cui ho intenzione di tenere un orologio,

202
00:16:03,835 --> 00:16:10,335
e quindi causare automaticamente un ricarico della mia pagina quando richiesto.

203
00:16:10,335 --> 00:16:14,180
E poi, la prossima configurazione che devo

204
00:16:14,180 --> 00:16:19,100
fare è alcune altre opzioni, per il mio BrowserSync.

205
00:16:19,100 --> 00:16:23,230
Quindi le opzioni che ho intenzione di specificare sono,

206
00:16:23,510 --> 00:16:29,190
watchTask true, il che significa che c'è un WatchTask in esecuzione

207
00:16:29,190 --> 00:16:33,130
e la directory di base per il mio server.

208
00:16:33,130 --> 00:16:35,605
Quindi dico BaseDir,

209
00:16:35,605 --> 00:16:41,960
e poi specifico, punto barra.

210
00:16:41,960 --> 00:16:43,720
Quindi la directory corrente,

211
00:16:43,720 --> 00:16:45,880
come la mia directory di base.

212
00:16:45,880 --> 00:16:47,740
Quindi con queste modifiche,

213
00:16:47,740 --> 00:16:51,815
lasciami salvare le modifiche al mio file grunt,

214
00:16:51,815 --> 00:17:01,085
e poi scenderò sotto e quindi configurerò un'altra attività grunt, qui chiamata default.

215
00:17:01,085 --> 00:17:05,145
Quindi, vorrei specificare l'attività come predefinita.

216
00:17:05,145 --> 00:17:08,720
Per questa attività predefinita, cosa devo fare?

217
00:17:08,720 --> 00:17:12,060
Ho bisogno di eseguire

218
00:17:12,160 --> 00:17:20,055
BrowserSync e anche il secondo compito che ho intenzione di fare è guardare.

219
00:17:20,055 --> 00:17:24,590
Dovrò eseguire prima l'attività BrowserSync e poi il WatchTask in seguito.

220
00:17:24,590 --> 00:17:27,310
Perché l'attività BrowserSync inizierà a servire il mio server.

221
00:17:27,310 --> 00:17:30,605
Se eseguo prima il WatchTask e l'attività BrowserSync in seguito,

222
00:17:30,605 --> 00:17:32,495
il WatchTask fondamentalmente

223
00:17:32,495 --> 00:17:38,260
fermerà tutto e quindi tutte le attività rimanenti dietro che non verranno eseguite.

224
00:17:38,260 --> 00:17:40,525
Quindi, se si utilizza WatchTask,

225
00:17:40,525 --> 00:17:45,624
farlo come ultimo nella sequenza specificata in queste parentesi quadre.

226
00:17:45,624 --> 00:17:50,415
Con questo, il mio progetto è ora configurato,

227
00:17:50,415 --> 00:17:57,100
sia per tenere un controllo sui miei file SASS che per servirlo quando necessario.

228
00:17:57,100 --> 00:17:59,670
Quindi, questo completa il mio file grunt,

229
00:17:59,670 --> 00:18:02,795
torniamo al nostro terminale.

230
00:18:02,795 --> 00:18:04,740
Tornando al mio terminale,

231
00:18:04,740 --> 00:18:07,670
ho aperto un'altra scheda e poi in questa scheda,

232
00:18:07,670 --> 00:18:11,335
eseguirò l'attività grunt,

233
00:18:11,335 --> 00:18:17,010
che manterrà anche il mio BrowserSync in esecuzione e servirà

234
00:18:17,010 --> 00:18:22,965
i file e ricaricherà automaticamente la pagina web,

235
00:18:22,965 --> 00:18:25,055
se uno di questi file cambia.

236
00:18:25,055 --> 00:18:30,790
Quindi, se configuri un'attività come attività predefinita come abbiamo fatto nell'esercizio,

237
00:18:30,790 --> 00:18:32,125
al prompt,

238
00:18:32,125 --> 00:18:37,725
ho solo bisogno di digitare grunt e quindi eseguirà automaticamente l'attività predefinita.

239
00:18:37,725 --> 00:18:40,680
Una volta che le mie attività grunt iniziano a funzionare,

240
00:18:40,680 --> 00:18:44,015
puoi vedere che ha avviato BrowserSync e sta servendo

241
00:18:44,015 --> 00:18:48,600
i file e anche sta eseguendo il watchTask,

242
00:18:48,600 --> 00:18:54,825
che è in attesa di eventuali modifiche per eseguire automaticamente l'attività SCSS.

243
00:18:54,825 --> 00:19:01,460
Per dimostrarti come verrà attivata l'attività SCSS,

244
00:19:01,460 --> 00:19:05,120
ogni volta che apporto modifiche al mio file Styles.scss,

245
00:19:05,120 --> 00:19:07,725
quindi ho portato il file Styles.scss

246
00:19:07,725 --> 00:19:11,845
e sto semplicemente andando a salvare questo file.

247
00:19:11,845 --> 00:19:14,175
E poi noterai che immediatamente,

248
00:19:14,175 --> 00:19:22,285
sul lato sinistro l'attività SASS viene richiamata ed eseguita e quindi ricompila e questo

249
00:19:22,285 --> 00:19:30,705
causerà anche la modifica del file Styles.scss, dopo essere stato ricompilato.

250
00:19:30,705 --> 00:19:38,045
Quindi questo attiverà BrowserSync per ricaricare automaticamente la mia pagina web.

251
00:19:38,045 --> 00:19:43,750
Con questo, completiamo il nostro esercizio grugnito parte uno.

252
00:19:43,750 --> 00:19:48,659
Questo è un buon momento per salvare i file,

253
00:19:48,659 --> 00:19:54,960
nel repository Git con il messaggio Grunt parte uno.