1
00:00:03,060 --> 00:00:06,095
Agora que concedemos o suficiente,

2
00:00:06,095 --> 00:00:08,700
é hora de Gulp.

3
00:00:08,700 --> 00:00:12,010
Tentaremos executar o mesmo tipo de

4
00:00:12,010 --> 00:00:16,235
tarefas que realizamos com Scripts NPM e Grunt,

5
00:00:16,235 --> 00:00:22,995
mas agora vamos tentar fazer o mesmo usando Gulp e Gulp Plug-ins.

6
00:00:22,995 --> 00:00:29,090
Para começar, vamos primeiro instalar Gulp como um módulo global.

7
00:00:29,090 --> 00:00:31,635
Então, para fazer isso, no prompt,

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

9
00:00:38,740 --> 00:00:42,380
isso irá instalar Gulp como um módulo global e

10
00:00:42,380 --> 00:00:45,625
torná-lo disponível para uso na linha de comando.

11
00:00:45,625 --> 00:00:47,605
Depois de concluirmos isso,

12
00:00:47,605 --> 00:00:51,425
o próximo passo é instalar Gulp localmente em nosso projeto.

13
00:00:51,425 --> 00:00:53,975
Então, para fazer isso, no prompt,

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

15
00:01:01,700 --> 00:01:03,835
Uma vez concluídos estes dois,

16
00:01:03,835 --> 00:01:10,765
é hora de ir em frente e configurar nossas tarefas Gulp.

17
00:01:10,765 --> 00:01:14,195
Antes de fazer isso, nosso próximo passo,

18
00:01:14,195 --> 00:01:18,170
vamos instalar o plug-in Gulp Sass para que possamos

19
00:01:18,170 --> 00:01:23,560
configurar o Sass para ver como tarefa de conversão em nosso arquivo Gulp.

20
00:01:23,560 --> 00:01:26,460
Então, para ir em frente e fazer isso,

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

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

23
00:01:40,270 --> 00:01:43,835
disso,

24
00:01:43,835 --> 00:01:48,305
podemos também instalar o Browser Sync Gulp Task também,

25
00:01:48,305 --> 00:01:53,835
para que possamos configurar ambos um após o outro.

26
00:01:53,835 --> 00:02:07,960
Então, vou instalar, npm install browser-sync —save-dev.

27
00:02:08,830 --> 00:02:11,480
Uma vez que esses dois estão instalados,

28
00:02:11,480 --> 00:02:17,980
então vamos em frente e criar nosso arquivo Gulp e, em seguida, configurar nossas tarefas Gulp aqui.

29
00:02:17,980 --> 00:02:20,590
Indo para a nossa pasta de projeto,

30
00:02:20,590 --> 00:02:27,905
vamos criar um novo arquivo e,

31
00:02:27,905 --> 00:02:32,380
em seguida, nomeá-lo gulpfile.js, e neste arquivo, vamos configurar nossas tarefas Gulp.

32
00:02:32,380 --> 00:02:34,950
Então, uma vez que o gulpfile.js está pronto,

33
00:02:34,950 --> 00:02:39,940
bem configurar as tarefas Gulp aqui primeiro começando

34
00:02:39,940 --> 00:02:50,310
com 'use strict' e, em seguida, var gulp.

35
00:02:50,310 --> 00:02:57,585
Então, precisamos exigir os módulos de nó gulp,

36
00:02:57,585 --> 00:02:59,810
e também enquanto estamos nisso,

37
00:02:59,810 --> 00:03:07,600
vamos exigir o módulo de nó sass.

38
00:03:12,470 --> 00:03:16,310
Como mencionei no exercício anterior,

39
00:03:16,310 --> 00:03:22,110
ficará mais claro para você por que o código é escrito assim,

40
00:03:22,110 --> 00:03:30,245
uma vez que você entenda mais sobre módulos de nó em um curso posterior.

41
00:03:30,245 --> 00:03:35,535
BrowserSync, então o que temos feito é incluir os

42
00:03:35,535 --> 00:03:40,895
módulos de nó Gulp Contrast e BowserSync em nosso arquivo Gulp.

43
00:03:40,895 --> 00:03:42,545
E uma vez que você tenha feito

44
00:03:42,545 --> 00:03:45,360
isso, é hora de configurar nossas Tarefas Gulp.

45
00:03:45,360 --> 00:03:47,940
Como aprendemos anteriormente,

46
00:03:47,940 --> 00:03:52,340
Gulp é um código baseado na forma de configurar

47
00:03:52,340 --> 00:03:57,815
tarefas ao contrário do Grunt que depende mais da configuração das tarefas.

48
00:03:57,815 --> 00:04:00,455
Então, no caso de Gulp,

49
00:04:00,455 --> 00:04:04,230
o bebê irá configurar nossas tarefas para digitar

50
00:04:04,230 --> 00:04:11,340
gulp.task e, em seguida, vamos configurar um nome de tarefa 'sass',

51
00:04:11,340 --> 00:04:13,545
e então para esta tarefa,

52
00:04:13,545 --> 00:04:17,630
vamos configurar isso como uma função,

53
00:04:19,990 --> 00:04:23,205
e é assim que o código é preparado.

54
00:04:23,205 --> 00:04:28,850
Então, Gulp Tasks função Sass e aqui,

55
00:04:28,850 --> 00:04:32,310
estamos configurando o Gulp Tasks,

56
00:04:34,850 --> 00:04:45,030
então vamos digitar return gulp.src ('. /css/ *.scss') Como aprendemos,

57
00:04:45,030 --> 00:05:00,800
Gulp é uma ferramenta baseada em código sobre configuração.

58
00:05:00,800 --> 00:05:06,630
Então, vamos preparar esta tarefa como tal.

59
00:05:06,630 --> 00:05:14,390
Então, você vê que temos especificado Gulp fonte pipe sass on,

60
00:05:14,390 --> 00:05:18,630
e, em seguida, aqui, erro.

61
00:05:19,220 --> 00:05:22,600
Então, se ocorrer um erro,

62
00:05:24,020 --> 00:05:31,870
vamos usar a maneira Sass para registrar o erro e, em seguida, canalizar isso

63
00:05:31,870 --> 00:05:43,480
através gulp.dest ('. /css '), e que

64
00:05:52,970 --> 00:05:59,270
conclui a configuração das tarefas Gulp Sass.

65
00:05:59,270 --> 00:06:03,540
Deve estar se perguntando por que escrevemos o código assim.

66
00:06:03,540 --> 00:06:06,960
Diz fonte de gole e, em seguida, especificar algo lá,

67
00:06:06,960 --> 00:06:10,650
e em seguida, o próximo diz tubo e, em seguida, o próximo diz tubo.

68
00:06:10,650 --> 00:06:16,045
Vamos entender a maneira Gulp de fazer as coisas com um pouco mais de detalhes.

69
00:06:16,045 --> 00:06:19,855
Para ajudar a explicar por que configuramos Tarefas como essa,

70
00:06:19,855 --> 00:06:24,730
tenho uma explicação do que chamamos Gulp Streams.

71
00:06:24,730 --> 00:06:29,900
A maneira como Gulp funciona é como você tomar um conjunto de arquivos e você especificar o conjunto

72
00:06:29,900 --> 00:06:35,405
de arquivos, dizendo fonte gulp como fizemos com as tarefas Sass lá.

73
00:06:35,405 --> 00:06:39,005
Então aqui, esta é a função que leva os arquivos.

74
00:06:39,005 --> 00:06:44,405
Você pode até especificar os arquivos usando os padrões de globbing que aprendemos no Grunt,

75
00:06:44,405 --> 00:06:49,410
e então ele cria um fluxo de objetos que representa esses arquivos.

76
00:06:49,410 --> 00:06:51,560
Agora, uma vez que o fluxo é criado,

77
00:06:51,560 --> 00:06:54,480
então o fluxo pode ser canalizado através de um conjunto de

78
00:06:54,480 --> 00:06:58,795
funções uma após a outra, a fim de transformar esses arquivos.

79
00:06:58,795 --> 00:07:07,400
E, finalmente, os arquivos transformados resultantes podem ser colocados em um local de destino.

80
00:07:07,400 --> 00:07:09,795
Então é por isso que especificamos fonte Gulp,

81
00:07:09,795 --> 00:07:11,585
então especificamos pipe.

82
00:07:11,585 --> 00:07:15,945
Então, o tubo permite que o fluxo seja canalizado através de uma função,

83
00:07:15,945 --> 00:07:18,295
e então, é por isso que dissemos pipe ponto,

84
00:07:18,295 --> 00:07:20,600
e então dissemos gole.

85
00:07:20,600 --> 00:07:23,965
E depois dissemos “insolência”.

86
00:07:23,965 --> 00:07:30,255
E o próximo diz “Pipe Gulp Dest”.

87
00:07:30,255 --> 00:07:35,950
E assim, o gulp dest especifica o destino dos arquivos que foram processados.

88
00:07:35,950 --> 00:07:43,860
Então, é assim que uma tarefa típica é especificada em gulp porque mas gulp opera em fluxos.

89
00:07:43,860 --> 00:07:48,875
Então, seus arquivos de fluxo através dos pipes até que eles

90
00:07:48,875 --> 00:07:54,805
são transferidos e, em seguida, eles serão depositados no destino especificado.

91
00:07:54,805 --> 00:07:59,610
Então, você vai ver estrutura semelhante para muitas das tarefas gulp que

92
00:07:59,610 --> 00:08:04,740
iria configurar neste exercício e no próximo exercício.

93
00:08:04,740 --> 00:08:11,460
Agora que você entendeu um pouco sobre como gulp funciona com fluxos e como

94
00:08:11,460 --> 00:08:21,005
a tarefa gulp usa o pipe para processar arquivos através de um conjunto de funções,

95
00:08:21,005 --> 00:08:28,290
e torna-se mais claro para você por que nós configuramos essa tarefa sass como visto neste código aqui.

96
00:08:28,290 --> 00:08:33,260
A próxima tarefa que vamos configurar é chamado gulp,

97
00:08:33,340 --> 00:08:39,900
e vamos configurar esta tarefa como sass watch.

98
00:08:39,900 --> 00:08:42,700
Então, esta é uma tarefa de observação que estamos indo para configurar,

99
00:08:42,700 --> 00:08:48,920
e então você iria especificar função.

100
00:08:49,190 --> 00:08:51,330
E então aqui,

101
00:08:51,330 --> 00:08:53,320
a tarefa de observação gole sass,

102
00:08:53,320 --> 00:08:58,490
o que fazemos é especificar os arquivos que vamos estar assistindo.

103
00:08:58,490 --> 00:09:05,600
Então, usamos a tarefa de observação gulp para assistir o arquivo.

104
00:09:05,600 --> 00:09:08,830
Então, o relógio já está embutido em gole.

105
00:09:08,830 --> 00:09:17,660
Então, ele vai levar gulp relógio e, em seguida, nós especificar os arquivos lá*.SCSS.

106
00:09:17,660 --> 00:09:21,390
Então, como você pode ver, o relógio gulp irá assistir

107
00:09:21,390 --> 00:09:25,915
esses arquivos e, em seguida, quando quaisquer alterações nesses arquivos ocorrerem,

108
00:09:25,915 --> 00:09:30,225
em seguida, ele irá executar essa tarefa sass,

109
00:09:30,225 --> 00:09:32,975
que nós especificamos anteriormente.

110
00:09:32,975 --> 00:09:37,360
Então, é assim que essa tarefa de relógio é configurada.

111
00:09:37,360 --> 00:09:39,495
Agora que fizemos esses dois,

112
00:09:39,495 --> 00:09:42,730
vamos configurar essa tarefa de sincronização do navegador a seguir.

113
00:09:42,730 --> 00:09:47,650
Então, feche isso com o ponto-e-vírgula e, em seguida, a

114
00:09:47,650 --> 00:09:53,375
próxima tarefa que vamos configurar é a tarefa de sincronização do navegador.

115
00:09:53,375 --> 00:10:01,735
Então, vou especificar tarefa de sincronização do navegador lá.

116
00:10:01,735 --> 00:10:04,550
E, em seguida, para a tarefa de sincronização do navegador,

117
00:10:04,550 --> 00:10:07,480
eu especificarei essa função.

118
00:10:07,480 --> 00:10:11,725
Novamente, observe a estrutura em que escrevemos o código,

119
00:10:11,725 --> 00:10:16,405
tarefa gulp e, em seguida, você especificar algo que seguiu, mas com uma função.

120
00:10:16,405 --> 00:10:17,990
Agora, novamente, como eu disse,

121
00:10:17,990 --> 00:10:23,155
nós aprendemos módulos de nó no último curso desta especialização,

122
00:10:23,155 --> 00:10:28,520
ele vai se tornar mais claro para você por que não módulos escritos com esta estrutura,

123
00:10:28,520 --> 00:10:31,790
e por que as funções são escritas assim.

124
00:10:31,790 --> 00:10:34,470
Então, dizemos Gulp Task Browser sync.

125
00:10:34,470 --> 00:10:38,260
Aqui, eu vou definir uma variável,

126
00:10:38,260 --> 00:10:40,920
uma variável JavaScript chamada arquivos,

127
00:10:40,920 --> 00:10:45,050
que não é nada mais do que na matriz,

128
00:10:45,160 --> 00:10:55,935
e que dentro desses arquivos eu especificaria todos os arquivos que,

129
00:10:55,935 --> 00:10:58,790
se modificado, a sincronização do navegador

130
00:10:58,790 --> 00:11:07,125
precisa causar o recarregamento ou o arquivo.

131
00:11:07,125 --> 00:11:12,690
Então, arquivos html, os arquivos CSS na pasta CSS

132
00:11:12,690 --> 00:11:18,420
e, em seguida, da mesma forma, eu também observarei os arquivos de imagem,

133
00:11:26,080 --> 00:11:31,960
e os arquivos JavaScript.

134
00:11:33,840 --> 00:11:36,730
Todos esses arquivos se algum deles mudar.

135
00:11:36,730 --> 00:11:40,800
Então, depois disso, vou configurar a sincronização do navegador aqui.

136
00:11:40,800 --> 00:11:44,315
Então, vou dizer sincronização do navegador.

137
00:11:44,315 --> 00:11:49,010
Nós já definimos essa variável chamada sincronização do navegador anteriormente.

138
00:11:49,010 --> 00:11:54,400
Então, temos que inicializar a sincronização do navegador,

139
00:11:56,230 --> 00:12:01,805
e assim, o primeiro parâmetro para isso

140
00:12:01,805 --> 00:12:08,895
é os arquivos que precisarão ser observados,

141
00:12:08,895 --> 00:12:18,160
e então o segundo parâmetro especifica as opções que estamos dando ao navegador.

142
00:12:18,160 --> 00:12:21,720
Então, a opção que estou especificando é para o servidor.

143
00:12:21,720 --> 00:12:31,350
Eu especificarei o diretório base como o diretório atual,

144
00:12:31,350 --> 00:12:38,595
e então isso conclui a especificação da tarefa de sincronização do navegador.

145
00:12:38,595 --> 00:12:43,280
Então, com isso, concluímos especificando a tarefa de sincronização do navegador aqui.

146
00:12:43,280 --> 00:12:46,750
Então, você pode ver que como configuramos tarefa de sincronização do navegador,

147
00:12:46,750 --> 00:12:48,480
nós especificamos os arquivos e,

148
00:12:48,480 --> 00:12:51,750
em seguida, salvar sincronização do navegador nele e fornecer os arquivos como o primeiro parâmetro.

149
00:12:51,750 --> 00:12:58,940
O segundo parâmetro são as opções para o plugin de sincronização do navegador.

150
00:12:58,940 --> 00:13:02,620
Então, finalmente, vamos agendar ou

151
00:13:02,620 --> 00:13:10,680
vamos configurar a tarefa chamada padrão.

152
00:13:10,680 --> 00:13:17,005
Assim como eu tenho a tarefa padrão em Grunt,

153
00:13:17,005 --> 00:13:23,475
nós também pode ter uma tarefa padrão semelhante definida para gulp.

154
00:13:23,475 --> 00:13:28,095
Então, aqui dizemos gulp tarefa sincronização padrão do navegador

155
00:13:28,095 --> 00:13:33,275
e, em seguida, especificar a função.

156
00:13:33,275 --> 00:13:42,085
E lá dentro vamos especificar o começo do gole.

157
00:13:42,085 --> 00:13:46,185
Então, isso especifica que eu deveria iniciar

158
00:13:46,185 --> 00:13:54,730
essa outra tarefa que a tarefa de relógio sass. A tarefa de observação sass precisa ser iniciada.

159
00:13:54,840 --> 00:14:00,370
Certifique-se de que a tarefa de sincronização do navegador está em execução antes que a tarefa de observação sass seja iniciada.

160
00:14:00,370 --> 00:14:04,060
Então, esta é a sintaxe para especificar isso em gulp.

161
00:14:04,060 --> 00:14:08,095
Então, com isso, configuramos tudo o que precisamos no arquivo gulp.

162
00:14:08,095 --> 00:14:09,870
Então, novamente voltando,

163
00:14:09,870 --> 00:14:11,675
há passos que fizemos.

164
00:14:11,675 --> 00:14:17,460
Nós primeiro usado exigem para incluir todos os seus plugins gulp lá,

165
00:14:17,460 --> 00:14:22,575
em seguida, configuramos a tarefa sass,

166
00:14:22,575 --> 00:14:25,455
e, em seguida, especificado sass watch tarefa.

167
00:14:25,455 --> 00:14:31,995
Este é o lugar onde usamos o relógio gulp que está disponível para nós como a partir de gole.

168
00:14:31,995 --> 00:14:37,290
Em seguida, especificamos a tarefa de sincronização do navegador e, finalmente,

169
00:14:37,290 --> 00:14:43,150
reprogramar a tarefa padrão com o navegador Sync e o gole começar com relógio sass.

170
00:14:43,150 --> 00:14:45,705
Agora, vamos ver as alterações,

171
00:14:45,705 --> 00:14:49,875
e então vamos em frente e executar o arquivo gulp add,

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

173
00:14:52,255 --> 00:14:59,780
Você verá que gulp inicia com a sincronização do navegador e a tarefa de exibição sass iniciando

174
00:14:59,780 --> 00:15:06,565
e, em seguida, sua sincronização do navegador começará a servir os arquivos.

175
00:15:06,565 --> 00:15:12,770
Se você visualizar seu site usando um navegador,

176
00:15:12,770 --> 00:15:17,425
você poderá ver o site sendo disponibilizado no navegador.

177
00:15:17,425 --> 00:15:23,090
Permitam-me também ilustrar o funcionamento da tarefa de vigilância.

178
00:15:23,090 --> 00:15:26,795
Então, eu vou puxar o style.css e

179
00:15:26,795 --> 00:15:31,185
apenas tentar salvar a alteração e você notará que, no lado esquerdo,

180
00:15:31,185 --> 00:15:36,850
a tarefa sass é imediatamente invocada e ele

181
00:15:36,850 --> 00:15:44,460
irá recompilar o arquivo style.scss nos arquivos CSS.

182
00:15:44,460 --> 00:15:48,840
E então esse navegador vai recarregar neste ponto.

183
00:15:48,840 --> 00:15:54,085
Com isso, completamos a primeira parte do exercício de gole.

184
00:15:54,085 --> 00:15:58,710
Na segunda parte, vamos preparar a pasta de distribuição.

185
00:15:58,710 --> 00:16:05,030
Este é um bom momento para você fazer um git-commit com a mensagem Gulp part 1.