1
00:00:03,060 --> 00:00:06,095
Ora che abbiamo concesso abbastanza,

2
00:00:06,095 --> 00:00:08,700
è ora di Gulp.

3
00:00:08,700 --> 00:00:12,010
Cercheremo di eseguire lo stesso tipo di

4
00:00:12,010 --> 00:00:16,235
attività che abbiamo eseguito sia con gli script NPM che con Grunt,

5
00:00:16,235 --> 00:00:22,995
ma ora cercheremo di fare lo stesso usando i plug-in Gulp e Gulp.

6
00:00:22,995 --> 00:00:29,090
Per iniziare, installiamo Gulp come modulo globale.

7
00:00:29,090 --> 00:00:31,635
Quindi, per farlo, al prompt,

8
00:00:31,635 --> 00:00:37,970
digita npm -g install gulp,

9
00:00:38,740 --> 00:00:42,380
questo installerà Gulp come modulo globale e

10
00:00:42,380 --> 00:00:45,625
lo renderà disponibile per l'uso sulla riga di comando.

11
00:00:45,625 --> 00:00:47,605
Dopo aver completato questo,

12
00:00:47,605 --> 00:00:51,425
il passo successivo è installare Gulp localmente nel nostro progetto.

13
00:00:51,425 --> 00:00:53,975
Quindi, per farlo, al prompt,

14
00:00:53,975 --> 00:01:01,700
digitare npm install gulp —save-dev.

15
00:01:01,700 --> 00:01:03,835
Una volta completati questi due,

16
00:01:03,835 --> 00:01:10,765
è il momento di andare avanti e configurare le nostre attività Gulp.

17
00:01:10,765 --> 00:01:14,195
Prima di farlo, il nostro prossimo passo,

18
00:01:14,195 --> 00:01:18,170
installeremo il plug-in Gulp Sass in modo che possiamo

19
00:01:18,170 --> 00:01:23,560
configurare il Sass per vedere come attività di conversione nel nostro file Gulp.

20
00:01:23,560 --> 00:01:26,460
Quindi, per andare avanti e farlo,

21
00:01:26,460 --> 00:01:30,580
digitare npm install

22
00:01:31,420 --> 00:01:39,100
gulp sass —save-dev.

23
00:01:40,270 --> 00:01:43,835
Anche mentre ci siamo,

24
00:01:43,835 --> 00:01:48,305
potremmo anche installare il Browser Sync Gulp Task troppo,

25
00:01:48,305 --> 00:01:53,835
in modo che possiamo configurare entrambi questo uno dopo l'altro.

26
00:01:53,835 --> 00:02:07,960
Quindi, installerò, npm installa browser-sync —save-dev.

27
00:02:08,830 --> 00:02:11,480
Una volta che questi due sono installati,

28
00:02:11,480 --> 00:02:17,980
allora andiamo avanti e creare il nostro file Gulp e quindi configurare il nostro Gulp Task qui.

29
00:02:17,980 --> 00:02:20,590
Andando alla nostra cartella di progetto,

30
00:02:20,590 --> 00:02:27,905
creiamo un nuovo file e poi il nome gulpfile.js,

31
00:02:27,905 --> 00:02:32,380
e in questo file, stiamo andando a configurare il nostro Gulp Task.

32
00:02:32,380 --> 00:02:34,950
Quindi, una volta che gulpfile.js è pronto,

33
00:02:34,950 --> 00:02:39,940
configura bene le attività di Gulp qui iniziando prima

34
00:02:39,940 --> 00:02:50,310
con 'use strict' e poi var gulp.

35
00:02:50,310 --> 00:02:57,585
Quindi, abbiamo bisogno di richiedere i moduli del nodo gulp,

36
00:02:57,585 --> 00:02:59,810
e anche mentre ci siamo,

37
00:02:59,810 --> 00:03:07,600
avremo bisogno del modulo nodo sass.

38
00:03:12,470 --> 00:03:16,310
Come ho accennato nell'esercizio precedente,

39
00:03:16,310 --> 00:03:22,110
diventerà più chiaro per te perché il codice è scritto in questo modo,

40
00:03:22,110 --> 00:03:30,245
una volta che capirai di più sui moduli dei nodi in un corso successivo.

41
00:03:30,245 --> 00:03:35,535
BrowserSync, quindi quello che abbiamo fatto è quello di includere i

42
00:03:35,535 --> 00:03:40,895
moduli di nodo Gulp Contrast e BowserSync nel nostro file Gulp.

43
00:03:40,895 --> 00:03:42,545
E una volta fatto questo,

44
00:03:42,545 --> 00:03:45,360
è il momento di configurare i nostri compiti Gulp.

45
00:03:45,360 --> 00:03:47,940
Come abbiamo imparato in precedenza,

46
00:03:47,940 --> 00:03:52,340
Gulp è un codice basato sul modo di configurare

47
00:03:52,340 --> 00:03:57,815
le attività a differenza di Grunt che si basa più sulla configurazione delle attività.

48
00:03:57,815 --> 00:04:00,455
Quindi, in caso di Gulp,

49
00:04:00,455 --> 00:04:04,230
il bambino imposterà i nostri compiti per digitare

50
00:04:04,230 --> 00:04:11,340
gulp.task e poi impostiamo un nome di attività 'sass',

51
00:04:11,340 --> 00:04:13,545
e poi per questo compito,

52
00:04:13,545 --> 00:04:17,630
lo imposteremo come una funzione,

53
00:04:19,990 --> 00:04:23,205
e questo è il modo in cui viene preparato il codice.

54
00:04:23,205 --> 00:04:28,850
Così, Gulp Task funzione Sass e qui,

55
00:04:28,850 --> 00:04:32,310
stiamo impostando il Gulp Task,

56
00:04:34,850 --> 00:04:45,030
quindi digiteremo return gulp.src ('. /css/ *.scss') Come abbiamo imparato,

57
00:04:45,030 --> 00:05:00,800
Gulp è uno strumento basato sul codice sopra la configurazione.

58
00:05:00,800 --> 00:05:06,630
Quindi, prepareremo questo compito in quanto tale.

59
00:05:06,630 --> 00:05:14,390
Così, si vede che abbiamo specificato Gulp sorgente pipe sass su,

60
00:05:14,390 --> 00:05:18,630
e poi qui, errore.

61
00:05:19,220 --> 00:05:22,600
Quindi, se si verifica un errore,

62
00:05:24,020 --> 00:05:31,870
useremo il modo Sass per registrare l'errore e quindi reindirizzare questo

63
00:05:31,870 --> 00:05:43,480
tramite gulp.dest ('. /css '), e che

64
00:05:52,970 --> 00:05:59,270
completa la configurazione dei compiti Gulp Sass.

65
00:05:59,270 --> 00:06:03,540
Ti starai chiedendo perché scriviamo il codice in questo modo.

66
00:06:03,540 --> 00:06:06,960
Dice fonte di gulp e poi specificare qualcosa lì,

67
00:06:06,960 --> 00:06:10,650
e poi il prossimo dice pipe e poi il prossimo dice pipe.

68
00:06:10,650 --> 00:06:16,045
Capiamo il modo Gulp di fare le cose in modo un po 'più dettagliato.

69
00:06:16,045 --> 00:06:19,855
Per spiegare perché configuriamo Attività come questo,

70
00:06:19,855 --> 00:06:24,730
ho una spiegazione di ciò che chiamiamo Gulp Streams.

71
00:06:24,730 --> 00:06:29,900
Il modo in cui Gulp funziona è come se prendessi un insieme di file e specifichi il set

72
00:06:29,900 --> 00:06:35,405
di file dicendo gulp source come abbiamo fatto con i compiti Sass lì.

73
00:06:35,405 --> 00:06:39,005
Quindi qui, questa è la funzione che prende i file. È

74
00:06:39,005 --> 00:06:44,405
anche possibile specificare i file utilizzando i modelli globbing che abbiamo imparato in Grunt,

75
00:06:44,405 --> 00:06:49,410
e quindi crea un flusso di oggetti che rappresenta questi file.

76
00:06:49,410 --> 00:06:51,560
Ora, una volta creato il flusso,

77
00:06:51,560 --> 00:06:54,480
allora il flusso può essere convogliato attraverso un insieme di

78
00:06:54,480 --> 00:06:58,795
funzioni una dopo l'altra per trasformare questi file.

79
00:06:58,795 --> 00:07:07,400
E infine, i file trasformati risultanti possono essere inseriti in una posizione di destinazione.

80
00:07:07,400 --> 00:07:09,795
Ecco perché specifichiamo sorgente Gulp,

81
00:07:09,795 --> 00:07:11,585
quindi specifichiamo pipe.

82
00:07:11,585 --> 00:07:15,945
Quindi, il tubo permette al flusso di essere convogliato attraverso una funzione,

83
00:07:15,945 --> 00:07:18,295
e così, è per questo che abbiamo detto dot pipe,

84
00:07:18,295 --> 00:07:20,600
e poi abbiamo detto gulp.

85
00:07:20,600 --> 00:07:23,965
E poi abbiamo detto «sass on error».

86
00:07:23,965 --> 00:07:30,255
E poi il prossimo dice Pipe Gulp Dest.

87
00:07:30,255 --> 00:07:35,950
E così, il gulp dest specifica la destinazione dei file che sono stati elaborati.

88
00:07:35,950 --> 00:07:43,860
Quindi, è così che un compito tipico è specificato in gulp perché gulp opera sui flussi.

89
00:07:43,860 --> 00:07:48,875
Quindi, i file di flusso attraverso i tubi fino a quando non

90
00:07:48,875 --> 00:07:54,805
vengono trasferiti e quindi verranno depositati nella destinazione specificata.

91
00:07:54,805 --> 00:07:59,610
Quindi, vedrai una struttura simile per molte delle attività gulp che

92
00:07:59,610 --> 00:08:04,740
configureremmo in questo esercizio e nell'esercizio successivo.

93
00:08:04,740 --> 00:08:11,460
Ora che hai capito un po 'su come gulp funziona con i flussi e come

94
00:08:11,460 --> 00:08:21,005
l'attività gulp utilizza la pipe per elaborare i file attraverso un set di funzioni,

95
00:08:21,005 --> 00:08:28,290
e diventa più chiaro per te perché abbiamo impostato questo compito sass come visto in questo codice qui.

96
00:08:28,290 --> 00:08:33,260
Il prossimo compito che ci accingiamo a configurare si chiama gulp,

97
00:08:33,340 --> 00:08:39,900
e configureremo questa attività come orologio sass.

98
00:08:39,900 --> 00:08:42,700
Quindi, questo è un compito di orologio che stiamo per configurare,

99
00:08:42,700 --> 00:08:48,920
e quindi si dovrebbe specificare la funzione.

100
00:08:49,190 --> 00:08:51,330
E così qui,

101
00:08:51,330 --> 00:08:53,320
il compito di Gulp Sass Watch,

102
00:08:53,320 --> 00:08:58,490
quello che facciamo è specificare i file che stiamo andando a guardare.

103
00:08:58,490 --> 00:09:05,600
Quindi, usiamo il compito Gulp Watch per guardare il file.

104
00:09:05,600 --> 00:09:08,830
Quindi, l'orologio è già integrato nel gulp.

105
00:09:08,830 --> 00:09:17,660
Quindi, ci vorrà guardare gulp e poi specifichiamo i file lì*.SCSS.

106
00:09:17,660 --> 00:09:21,390
Quindi, come puoi vedere, l'orologio gulp guarderà

107
00:09:21,390 --> 00:09:25,915
questi file e poi quando si verificano eventuali modifiche a questi file,

108
00:09:25,915 --> 00:09:30,225
allora eseguirà quel compito sass,

109
00:09:30,225 --> 00:09:32,975
che abbiamo specificato in precedenza.

110
00:09:32,975 --> 00:09:37,360
Quindi, questo è il modo in cui viene impostato il compito di Sass Watch.

111
00:09:37,360 --> 00:09:39,495
Ora che abbiamo fatto questi due,

112
00:09:39,495 --> 00:09:42,730
cerchiamo di impostare che l'attività di sincronizzazione del browser successivo.

113
00:09:42,730 --> 00:09:47,650
Quindi, chiuderlo con il punto e virgola e poi l'

114
00:09:47,650 --> 00:09:53,375
attività successiva che imposteremo è l'attività di sincronizzazione del browser.

115
00:09:53,375 --> 00:10:01,735
Quindi, specificherò l'attività di sincronizzazione del browser lì.

116
00:10:01,735 --> 00:10:04,550
E poi per l'attività di sincronizzazione del browser,

117
00:10:04,550 --> 00:10:07,480
specificherò quella funzione.

118
00:10:07,480 --> 00:10:11,725
Ancora una volta, nota la struttura in cui scriviamo il codice, l'

119
00:10:11,725 --> 00:10:16,405
attività gulp e quindi specifichi qualcosa che segue ma con una funzione.

120
00:10:16,405 --> 00:10:17,990
Ora di nuovo come ho detto,

121
00:10:17,990 --> 00:10:23,155
impariamo i moduli nodo nell'ultimo corso di questa specializzazione,

122
00:10:23,155 --> 00:10:28,520
diventerà più chiaro a voi perché non i moduli scritti con questa struttura,

123
00:10:28,520 --> 00:10:31,790
e perché le funzioni sono scritte in questo modo.

124
00:10:31,790 --> 00:10:34,470
Quindi, diciamo gulp sincronizzazione del browser attività.

125
00:10:34,470 --> 00:10:38,260
Qui, definirò una variabile,

126
00:10:38,260 --> 00:10:40,920
una variabile JavaScript chiamata file,

127
00:10:40,920 --> 00:10:45,050
che non è altro che in array,

128
00:10:45,160 --> 00:10:55,935
e che all'interno di quegli array di file specificherei tutti i file che,

129
00:10:55,935 --> 00:10:58,790
se modificati, la sincronizzazione del browser deve

130
00:10:58,790 --> 00:11:07,125
causare il ricaricamento o il file.

131
00:11:07,125 --> 00:11:12,690
Quindi, i file html, i file CSS nella cartella CSS,

132
00:11:12,690 --> 00:11:18,420
e quindi allo stesso modo guarderò anche i file di immagine

133
00:11:26,080 --> 00:11:31,960
e i file JavaScript.

134
00:11:33,840 --> 00:11:36,730
Tutti questi file se qualcuno di loro cambia.

135
00:11:36,730 --> 00:11:40,800
Quindi, dopo questo, configurerò la sincronizzazione del browser qui.

136
00:11:40,800 --> 00:11:44,315
Quindi, dirò la sincronizzazione del browser.

137
00:11:44,315 --> 00:11:49,010
Abbiamo già definito questa variabile chiamata sincronizzazione browser in precedenza.

138
00:11:49,010 --> 00:11:54,400
Quindi, dobbiamo inizializzare la sincronizzazione del browser,

139
00:11:56,230 --> 00:12:01,805
e quindi, il primo parametro a questo

140
00:12:01,805 --> 00:12:08,895
è i file che dovranno essere guardati,

141
00:12:08,895 --> 00:12:18,160
e quindi il secondo parametro specifica le opzioni che stiamo dando al browser.

142
00:12:18,160 --> 00:12:21,720
Quindi, l'opzione che sto specificando è per il server.

143
00:12:21,720 --> 00:12:31,350
Specificherò la directory di base come directory corrente

144
00:12:31,350 --> 00:12:38,595
e quindi completerà la specifica dell'attività di sincronizzazione del browser.

145
00:12:38,595 --> 00:12:43,280
Quindi, con questo, abbiamo completato specificando l'attività di sincronizzazione del browser qui.

146
00:12:43,280 --> 00:12:46,750
Così, si può vedere che come abbiamo configurato attività di sincronizzazione del browser,

147
00:12:46,750 --> 00:12:48,480
abbiamo specificato i file e quindi salvare la

148
00:12:48,480 --> 00:12:51,750
sincronizzazione del browser in esso e fornire i file come primo parametro.

149
00:12:51,750 --> 00:12:58,940
Il secondo parametro sono le opzioni per il plugin di sincronizzazione del browser.

150
00:12:58,940 --> 00:13:02,620
Poi, infine,

151
00:13:02,620 --> 00:13:10,680
programmeremo o configureremo l'attività chiamata default.

152
00:13:10,680 --> 00:13:17,005
Proprio come me ho l'attività predefinita in Grunt,

153
00:13:17,005 --> 00:13:23,475
possiamo anche avere un compito predefinito simile definito per gulp.

154
00:13:23,475 --> 00:13:28,095
Quindi, qui diciamo gulp task default sincronizzazione del browser,

155
00:13:28,095 --> 00:13:33,275
e quindi specificare la funzione.

156
00:13:33,275 --> 00:13:42,085
E dentro lì specificheremo l'inizio del gulp.

157
00:13:42,085 --> 00:13:46,185
Quindi, questo specifica che dovrei iniziare

158
00:13:46,185 --> 00:13:54,730
questo altro compito che sass watch task. Il compito orologio sass deve essere avviato.

159
00:13:54,840 --> 00:14:00,370
Assicurarsi che l'attività di sincronizzazione del browser sia in esecuzione prima dell'avvio dell'attività di sass watch.

160
00:14:00,370 --> 00:14:04,060
Quindi, questa è la sintassi per specificarlo in gulp.

161
00:14:04,060 --> 00:14:08,095
Quindi, con questo, abbiamo configurato tutto ciò di cui abbiamo bisogno nel file gulp.

162
00:14:08,095 --> 00:14:09,870
Quindi, tornando indietro,

163
00:14:09,870 --> 00:14:11,675
ci sono passi che abbiamo fatto.

164
00:14:11,675 --> 00:14:17,460
Abbiamo usato prima richiedono di includere tutti i loro plugin gulp lì,

165
00:14:17,460 --> 00:14:22,575
poi abbiamo configurato l'attività sass,

166
00:14:22,575 --> 00:14:25,455
e quindi specificato attività orologio sass.

167
00:14:25,455 --> 00:14:31,995
Questo è dove usiamo l'orologio gulp che è a nostra disposizione come da gulp.

168
00:14:31,995 --> 00:14:37,290
Poi abbiamo specificato l'attività di sincronizzazione del browser e poi infine

169
00:14:37,290 --> 00:14:43,150
riprogrammare l'attività predefinita con il browser Sync e il gulp iniziare con sass watch.

170
00:14:43,150 --> 00:14:45,705
Ora, vediamo le modifiche,

171
00:14:45,705 --> 00:14:49,875
e poi andremo avanti ed eseguire il file gulp add,

172
00:14:49,875 --> 00:14:52,255
e il prompt tipo gulp.

173
00:14:52,255 --> 00:14:59,780
Vedrai che gulp si avvia con la sincronizzazione del browser e l'avvio dell'attività di sass watch,

174
00:14:59,780 --> 00:15:06,565
e quindi la sincronizzazione del browser inizierà a servire i file.

175
00:15:06,565 --> 00:15:12,770
Se visualizzi il tuo sito web utilizzando un browser,

176
00:15:12,770 --> 00:15:17,425
sarai in grado di vedere il sito web che viene servito nel browser.

177
00:15:17,425 --> 00:15:23,090
Permettetemi di illustrare anche il funzionamento dell'attività di vigilanza.

178
00:15:23,090 --> 00:15:26,795
Quindi, tirerò su style.css e

179
00:15:26,795 --> 00:15:31,185
cercherò solo di salvare la modifica e noterai che sul lato sinistro,

180
00:15:31,185 --> 00:15:36,850
l'attività sass viene immediatamente invocata e

181
00:15:36,850 --> 00:15:44,460
ricompilerà il file style.scss nei file CSS.

182
00:15:44,460 --> 00:15:48,840
E poi quel browser si ricaricherà a questo punto.

183
00:15:48,840 --> 00:15:54,085
Con questo completiamo la prima parte dell'esercizio del sorso.

184
00:15:54,085 --> 00:15:58,710
Nella seconda parte, prepareremo la cartella di distribuzione.

185
00:15:58,710 --> 00:16:05,030
Questo è un buon momento per fare un git-commit con il messaggio Gulp parte 1.