1
00:00:03,550 --> 00:00:06,380
Hora de começar a grunhir.

2
00:00:06,380 --> 00:00:10,280
Neste e no próximo exercício vamos repetir

3
00:00:10,280 --> 00:00:15,925
o mesmo tipo de configuração que fizemos com os scripts NPM.

4
00:00:15,925 --> 00:00:22,405
Na primeira parte, vamos configurar a conversão de SCSS para CSS.

5
00:00:22,405 --> 00:00:28,570
Em seguida, vamos configurar uma tarefa de observação e também servir o código usando a sincronização do navegador.

6
00:00:28,570 --> 00:00:31,065
Na segunda parte do exercício,

7
00:00:31,065 --> 00:00:40,010
usaremos Usman e as várias tarefas para preparar a dobra de distribuição.

8
00:00:40,010 --> 00:00:44,170
Esses exercícios não são, de modo algum, a única maneira de

9
00:00:44,170 --> 00:00:49,720
implementar configurações Grunt ou arquivos de chamada.

10
00:00:49,720 --> 00:00:54,575
Isto é apenas uma ilustração de como podemos fazer uso dessas ferramentas.

11
00:00:54,575 --> 00:00:58,375
Você pode querer criar sua própria maneira de configurar

12
00:00:58,375 --> 00:01:03,320
seu arquivo Grunt e seu arquivo de chamada para seus projetos.

13
00:01:03,320 --> 00:01:13,200
Nosso primeiro passo para fazer uso do Grunt é configurar o Grunt CLI como um módulo NPM global.

14
00:01:13,200 --> 00:01:21,550
Para fazer isso, adicione o tipo de prompt: NPM -g install Grunt CLI.

15
00:01:21,550 --> 00:01:25,190
Esta é a interface de linha de comando para Grunt.

16
00:01:25,190 --> 00:01:27,480
Uma vez que isso é configurado,

17
00:01:27,480 --> 00:01:34,690
em seguida, vamos configurar um módulo Grunt NPM local para uso dentro de nossos projetos.

18
00:01:34,690 --> 00:01:38,370
O Grunt CLI nos permite fazer uso do Grunt.

19
00:01:38,370 --> 00:01:40,050
Nós montamos o Grunt CLI.

20
00:01:40,050 --> 00:01:47,405
Em seguida, o próximo passo é configurar - Grunt localmente,

21
00:01:47,405 --> 00:01:52,655
assim; NPM instalar Grunt menos salvar dev.

22
00:01:52,655 --> 00:01:56,365
Em seguida, instale o Grunt localmente.

23
00:01:56,365 --> 00:01:58,930
Depois de concluir essas duas etapas,

24
00:01:58,930 --> 00:02:04,850
o próximo passo é ir para o nosso projeto e, em seguida, criar um novo arquivo,

25
00:02:04,850 --> 00:02:10,165
e vamos nomeá-lo como Gruntfile.js.

26
00:02:10,165 --> 00:02:19,034
Dentro deste Gruntfile.js, vamos configurar o código para configurar nossas tarefas Grunt.

27
00:02:19,034 --> 00:02:27,770
Neste arquivo, o primeiro passo é adicionar 'use strict' que significa,

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

29
00:02:30,640 --> 00:02:36,460
Então você diz module.exports

30
00:02:37,050 --> 00:02:42,830
= função (grunhido).

31
00:02:44,990 --> 00:02:53,005
Então aqui dentro, vamos configurar a configuração Grunt para todas as tarefas.

32
00:02:53,005 --> 00:02:57,655
Como mencionei anteriormente, Grunt é um corredor de tarefas baseado em configuração.

33
00:02:57,655 --> 00:03:02,200
Então, vamos instalar os vários plug-ins Grunt para

34
00:03:02,200 --> 00:03:08,370
as várias tarefas e, em seguida, configurá-los em nosso arquivo Grunt.

35
00:03:08,370 --> 00:03:10,769
Para fazer a configuração,

36
00:03:10,769 --> 00:03:12,605
vamos adicionar no código aqui,

37
00:03:12,605 --> 00:03:19,290
dizendo: Grunt.initConfig

38
00:03:19,410 --> 00:03:28,655
e dentro deste InitConfig,

39
00:03:28,655 --> 00:03:32,805
vamos adicionar na configuração para as tarefas Grunt da roda.

40
00:03:32,805 --> 00:03:34,580
Depois de concluir isso,

41
00:03:34,580 --> 00:03:37,145
vamos salvar as alterações.

42
00:03:37,145 --> 00:03:39,385
Em nosso próximo passo,

43
00:03:39,385 --> 00:03:47,610
vamos configurar alguns plug-ins Grunt para nos permitir converter código SCSS em código CSS.

44
00:03:47,610 --> 00:03:54,240
Para fazer isso, vou instalar um módulo NPM chamado

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

46
00:04:01,875 --> 00:04:03,450
Além disso,

47
00:04:03,450 --> 00:04:07,375
vou configurar mais dois módulos Grunt chamados,

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
Estes dois módulos — Time Grunt e Jit grunhido.

50
00:04:23,430 --> 00:04:31,190
O módulo Time Grunt imprime as estatísticas de tempo para executar as várias tarefas Grunt.

51
00:04:31,190 --> 00:04:35,150
O módulo Jit Grunt é usado para carregar

52
00:04:35,150 --> 00:04:40,420
esses plug-ins Grunt sempre que eles são necessários dentro de qualquer aplicativo.

53
00:04:40,420 --> 00:04:42,860
A outra alternativa é carregar nos

54
00:04:42,860 --> 00:04:49,475
vários módulos Grunt explicitamente em seu arquivo de configuração Grunt.

55
00:04:49,475 --> 00:04:53,085
Eu prefiro usar o Jit Grunt para que ele vai cuidar de carregar

56
00:04:53,085 --> 00:04:56,790
em qualquer plug-ins Grunt que eu preciso como pode ser necessário,

57
00:04:56,790 --> 00:04:59,955
como em quando eu faço uso deles no código.

58
00:04:59,955 --> 00:05:04,785
Instale estes dois Time Grunt e Jit Grunt e uma vez que eles são instalados,

59
00:05:04,785 --> 00:05:11,845
então é hora de configurar nossa tarefa de conversão SASS.

60
00:05:11,845 --> 00:05:14,870
Agora você obviamente deve estar se perguntando por que digitamos este

61
00:05:14,870 --> 00:05:18,250
module.exports e, em seguida, funcionar e assim por diante.

62
00:05:18,250 --> 00:05:21,485
É assim que definimos módulos de nó.

63
00:05:21,485 --> 00:05:26,590
Vamos lidar com a estrutura de módulos de nó e por que usamos essa abordagem

64
00:05:26,590 --> 00:05:33,375
no curso de módulos de nó do lado do servidor mais tarde na especialização.

65
00:05:33,375 --> 00:05:38,415
No momento, basta aceitar que é assim que o código é escrito para Grunt,

66
00:05:38,415 --> 00:05:41,040
porque o arquivo Grunt é em si

67
00:05:41,040 --> 00:05:47,110
um módulo de nó que vai carregar em vários plug-ins Grunt.

68
00:05:47,110 --> 00:05:51,815
Depois de fazermos isso, vamos exigir um par de plugins Grunt aqui.

69
00:05:51,815 --> 00:05:59,080
Para fazer isso, vamos dizer require ('time- grunt'),

70
00:05:59,080 --> 00:06:08,840
e vamos dizer grunhido versus a configuração que usamos para carregar no Time Grunt.

71
00:06:08,840 --> 00:06:12,555
Para exigir, como você vai aprender mais tarde quando você aprender sobre módulos de nó,

72
00:06:12,555 --> 00:06:16,660
é uma maneira de dizer que a carga no módulo de nó Time Grunt a

73
00:06:16,660 --> 00:06:20,815
ser usado dentro deste módulo de nó particular.

74
00:06:20,815 --> 00:06:28,450
Da mesma forma, vou exigir módulo de nó Jit Grunt.

75
00:06:32,190 --> 00:06:37,095
Este módulo de nó Jit Grunt garante que ele irá carregar em

76
00:06:37,095 --> 00:06:42,540
quaisquer outros módulos de nó ou quaisquer outros plug-ins Grunt - que são módulos de nó,

77
00:06:42,540 --> 00:06:50,925
basicamente, como em quando eles são realmente implícitas dentro do meu Grunt para fazer várias tarefas.

78
00:06:50,925 --> 00:06:55,295
A alternativa seria carregar manualmente em cada um

79
00:06:55,295 --> 00:07:00,600
desses plug-ins Grunt explicitamente usando a instrução necessária.

80
00:07:00,600 --> 00:07:04,445
Estou me economizando um pouco de problemas usando apenas Jit Grunt,

81
00:07:04,445 --> 00:07:07,825
que cuida de carregar esses módulos de nó quando necessário.

82
00:07:07,825 --> 00:07:11,395
Agora, movendo-se para a configuração,

83
00:07:11,395 --> 00:07:16,159
como entendemos, Grunt funciona na configuração,

84
00:07:16,159 --> 00:07:21,935
então cada plug-in Grunt que desejamos empregar para executar uma tarefa,

85
00:07:21,935 --> 00:07:27,225
ele precisa ser configurado dentro deste arquivo Grunt InitConfig.

86
00:07:27,225 --> 00:07:32,965
Esta configuração basicamente é um objeto JavaScript basicamente.

87
00:07:32,965 --> 00:07:36,145
Se você está familiarizado com objetos JavaScript,

88
00:07:36,145 --> 00:07:40,275
você começa a entender a sintaxe muito, muito rapidamente.

89
00:07:40,275 --> 00:07:47,330
A primeira tarefa que vou configurar é o SASS.

90
00:07:47,330 --> 00:07:49,855
Então, eu escrevo SASS aqui,

91
00:07:49,855 --> 00:07:55,200
e depois dentro SASS, eu digo dist.

92
00:07:55,920 --> 00:08:01,570
Agora você tem que acreditar que é assim que a configuração é feita.

93
00:08:01,570 --> 00:08:03,280
Então, eu digo dist,

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

95
00:08:05,295 --> 00:08:10,980
eu digo arquivos, e aí dentro,

96
00:08:10,980 --> 00:08:14,125
eu especifico os arquivos que precisam ser convertidos.

97
00:08:14,125 --> 00:08:20,270
Eu digo, CSS/styles.CSS, que

98
00:08:20,270 --> 00:08:28,815
é dependente de CSS/Styles.scss.

99
00:08:28,815 --> 00:08:36,925
Com isso, concluímos a configuração da tarefa SASS aqui.

100
00:08:36,925 --> 00:08:40,620
Depois de concluir a configuração da tarefa SASS,

101
00:08:40,620 --> 00:08:43,485
se você realmente deseja executar a tarefa SASS,

102
00:08:43,485 --> 00:08:52,950
então abaixo você iria configurar a tarefa SASS dizendo “grunt.registerTask”,

103
00:08:54,770 --> 00:08:58,545
e então eu vou chamar essa tarefa CSS,

104
00:08:58,545 --> 00:09:00,280
e então eu vou,

105
00:09:00,280 --> 00:09:04,935
entre colchetes de escriba, dizer “SASS”.

106
00:09:04,935 --> 00:09:07,605
Agora, para entender a sintaxe aqui,

107
00:09:07,605 --> 00:09:13,715
isso, como você pode ver, diz “Grunt.RegisterTask” e o nome desta tarefa é CSS.

108
00:09:13,715 --> 00:09:15,340
E o que essa tarefa envolve?

109
00:09:15,340 --> 00:09:21,685
Esta tarefa envolve a execução da tarefa SASS que já foi configurada aqui.

110
00:09:21,685 --> 00:09:25,080
É assim que lemos esta sintaxe aqui.

111
00:09:25,080 --> 00:09:27,950
Se você não quiser, você não precisa configurar isso,

112
00:09:27,950 --> 00:09:33,065
porque empregaremos o SASS junto com a tarefa watch para

113
00:09:33,065 --> 00:09:38,460
executar automaticamente o SASS quando nosso arquivo SCSS for alterado.

114
00:09:38,460 --> 00:09:40,840
Com isso, vamos salvar as alterações.

115
00:09:40,840 --> 00:09:45,570
Permitam-me que vos mostre esta tarefa em particular em acção.

116
00:09:45,570 --> 00:09:48,990
Se você configurar a tarefa com o nome CSS lá, em

117
00:09:48,990 --> 00:09:50,650
seguida, adicione o prompt,

118
00:09:50,650 --> 00:09:54,655
você pode digitar “grunt.CSS” e, em seguida, ele irá executar

119
00:09:54,655 --> 00:10:00,090
a tarefa de converter o código sass para código CSS.

120
00:10:00,090 --> 00:10:04,005
Indo para o prompt de comando, no prompt,

121
00:10:04,005 --> 00:10:09,070
digite “grunt.CSS” e você verá

122
00:10:09,070 --> 00:10:17,530
a tarefa SASS executando e, em seguida, convertendo o arquivo styles.sess para o arquivo styles.CSS.

123
00:10:17,530 --> 00:10:19,390
Além disso, como você pode ver,

124
00:10:19,390 --> 00:10:23,340
o Time Grunt irá imprimir estatísticas como esta

125
00:10:23,340 --> 00:10:27,800
para indicar quanto tempo cada uma dessas tarefas levou.

126
00:10:27,800 --> 00:10:29,520
Se isso é de seu interesse,

127
00:10:29,520 --> 00:10:32,880
então você pode olhar para esses detalhes aqui.

128
00:10:32,890 --> 00:10:39,360
Em nosso próximo passo, vamos configurar o relógio e o servidor, a

129
00:10:39,360 --> 00:10:41,800
fim de manter um controle sobre

130
00:10:41,800 --> 00:10:45,960
os arquivos SASS e convertê-los automaticamente quando eles são alterados,

131
00:10:45,960 --> 00:10:48,625
e então vamos configurar o servidor,

132
00:10:48,625 --> 00:10:54,045
usando BrowserSync para servir nosso site.

133
00:10:54,045 --> 00:10:56,700
Para configurar as tarefas Watch and Serve,

134
00:10:56,700 --> 00:10:59,740
vou instalar mais alguns plug-ins grunhidos,

135
00:10:59,740 --> 00:11:03,990
então direi npm install,

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

137
00:11:12,465 --> 00:11:15,480
Então este é o relógio grunt-contrib-.

138
00:11:15,480 --> 00:11:21,450
Grunt plug-in que é um módulo de nó, então instale isso.

139
00:11:21,670 --> 00:11:32,030
Assim, o plugin-in Watch permite que você mantenha um controle sobre seus vários arquivos.

140
00:11:32,030 --> 00:11:33,550
O próximo plug-in que vou

141
00:11:33,550 --> 00:11:43,750
instalar é grunt-browser-sync.

142
00:11:44,770 --> 00:11:50,515
O módulo BrowserSync é aquele que eu vou fazer uso,

143
00:11:50,515 --> 00:11:54,230
para salvar os arquivos da pasta do meu projeto, para

144
00:11:54,230 --> 00:12:00,090
que eu possa ver o site em um navegador.

145
00:12:00,090 --> 00:12:04,845
Depois de instalar esses dois módulos,

146
00:12:04,845 --> 00:12:08,295
é hora de entrar no meu grunt.initconfig

147
00:12:08,295 --> 00:12:11,635
e, em seguida, configurar as duas tarefas.

148
00:12:11,635 --> 00:12:13,300
Um para manter um relógio,

149
00:12:13,300 --> 00:12:18,125
o segundo para servir os arquivos usando BrowserSync.

150
00:12:18,125 --> 00:12:20,680
Então, voltando para o meu initconfig,

151
00:12:20,680 --> 00:12:23,710
coloque uma vírgula lá depois do SASS,

152
00:12:23,710 --> 00:12:26,460
e então passe para a próxima linha.

153
00:12:27,050 --> 00:12:32,650
Lembre-se sempre de colocar essa vírgula lá.

154
00:12:32,650 --> 00:12:40,990
Uma vírgula ausente causa muita dor de cabeça quando você está tentando executar suas tarefas grunhidas.

155
00:12:40,990 --> 00:12:44,635
É muito difícil identificar que você perdeu uma vírgula.

156
00:12:44,635 --> 00:12:46,950
Por isso, é importante prestar atenção

157
00:12:46,950 --> 00:12:52,290
à sintaxe e certificar-se de que você não perca nenhuma dessas vírgulas.

158
00:12:52,290 --> 00:12:55,425
Vai voltar para te morder na hora errada.

159
00:12:55,425 --> 00:12:57,105
Então a próxima tarefa,

160
00:12:57,105 --> 00:13:00,190
que eu vou configurar é WatchTask.

161
00:13:00,190 --> 00:13:03,605
Então eu digo Watch e o que eu quero assistir?

162
00:13:03,605 --> 00:13:10,070
Eu quero assistir esses arquivos, que é CSS/*.SCSS.

163
00:13:10,120 --> 00:13:17,680
Então este é o arquivo SCSS que eu quero assistir.

164
00:13:17,680 --> 00:13:22,445
Todos os arquivos SCSS na minha pasta CSS.

165
00:13:22,445 --> 00:13:26,670
Se algum deles for modificado,

166
00:13:26,670 --> 00:13:32,865
então a tarefa correspondente que vou executar é, SASS.

167
00:13:32,865 --> 00:13:36,180
A tarefa SASS que eu já configurei anteriormente.

168
00:13:36,180 --> 00:13:39,710
Então, com isso, eu configurei meu WatchTask,

169
00:13:39,710 --> 00:13:42,820
para manter um controle sobre os arquivos SCSS e, em seguida,

170
00:13:42,820 --> 00:13:46,075
convertê-los automaticamente invocando o SASS.

171
00:13:46,075 --> 00:13:50,475
Agora com o watchTask eu posso realmente manter uma vigilância em vários arquivos

172
00:13:50,475 --> 00:13:55,650
e, em seguida, invocar automaticamente as tarefas correspondentes para esses arquivos.

173
00:13:55,650 --> 00:13:57,895
Então, por exemplo, eu posso manter um controle sobre

174
00:13:57,895 --> 00:14:01,660
meus arquivos JavaScript e, em seguida, automaticamente fazer dicas JS,

175
00:14:01,660 --> 00:14:04,465
quando meus arquivos mudam.

176
00:14:04,465 --> 00:14:07,770
Ou para fazer identificação e assim por diante.

177
00:14:07,770 --> 00:14:12,100
Agora, o próximo que vou configurar é BrowserSync.

178
00:14:12,100 --> 00:14:15,345
Novamente, não esqueça a vírgula após WatchTask

179
00:14:15,345 --> 00:14:19,070
e digite BrowserSync.

180
00:14:20,500 --> 00:14:26,369
Eu diria BrowserSync aqui e, em seguida, para o BrowserSync,

181
00:14:26,369 --> 00:14:30,570
eu diria configurar uma tarefa dentro.

182
00:14:30,570 --> 00:14:35,090
Agora, esta é a sintaxe que usamos para colocar na

183
00:14:35,090 --> 00:14:40,410
configuração dentro do nosso arquivo grunhido.

184
00:14:40,410 --> 00:14:42,840
Então diz BrowserSync dev.

185
00:14:42,840 --> 00:14:44,940
Agora, se você me perguntar por quê,

186
00:14:44,940 --> 00:14:46,895
nós só precisamos ler a documentação,

187
00:14:46,895 --> 00:14:52,275
para cada um desses plug-ins e então descobrir como configurar esses plug-ins.

188
00:14:52,275 --> 00:14:56,000
Então, eu já li a documentação e eu descobri

189
00:14:56,000 --> 00:15:00,885
alguma configuração básica para cada uma dessas tarefas, então é por isso que eu estou apenas digitando-as.

190
00:15:00,885 --> 00:15:03,525
Obviamente, se você quiser mais flexibilidade,

191
00:15:03,525 --> 00:15:07,350
você pode querer ler a documentação correspondente e, em seguida, descobrir

192
00:15:07,350 --> 00:15:11,655
outras maneiras de configurar essas tarefas.

193
00:15:11,655 --> 00:15:18,010
Minha configuração aqui é apenas uma maneira de resolver ou resolver os problemas.

194
00:15:18,010 --> 00:15:22,850
Então aqui eu especifico os arquivos BSFiles,

195
00:15:22,850 --> 00:15:28,685
então este arquivo especifica quais arquivos precisam ser observados

196
00:15:28,685 --> 00:15:36,715
pelo meu BrowserSync e, em seguida, quando qualquer um desses arquivos mudar,

197
00:15:36,715 --> 00:15:44,805
então meu BrowserSync fará com que o navegador seja recarregado.

198
00:15:44,805 --> 00:15:50,185
Então eu vou assistir todos os arquivos na minha pasta CSS,

199
00:15:50,185 --> 00:15:53,220
arquivos HTML na minha pasta do projeto

200
00:15:53,220 --> 00:15:57,945
e, em seguida, todos os meus arquivos JavaScript na pasta JS.

201
00:15:57,945 --> 00:16:03,835
Então, com isso eu configurei todos os arquivos nos quais eu vou manter um relógio

202
00:16:03,835 --> 00:16:10,335
e, em seguida, causar automaticamente uma recarga da minha página quando necessário.

203
00:16:10,335 --> 00:16:14,180
E então, a próxima configuração que eu preciso

204
00:16:14,180 --> 00:16:19,100
fazer é mais algumas opções, para o meu BrowserSync.

205
00:16:19,100 --> 00:16:23,230
Então, as opções que eu vou especificar é

206
00:16:23,510 --> 00:16:29,190
WatchTask true, o que significa que há um watchTask em execução,

207
00:16:29,190 --> 00:16:33,130
e o diretório base para o meu servidor.

208
00:16:33,130 --> 00:16:35,605
Então eu digo BaseDIR,

209
00:16:35,605 --> 00:16:41,960
e então eu especificar, ponto barra.

210
00:16:41,960 --> 00:16:43,720
Então o diretório atual,

211
00:16:43,720 --> 00:16:45,880
como meu diretório base.

212
00:16:45,880 --> 00:16:47,740
Então, com essas alterações,

213
00:16:47,740 --> 00:16:51,815
deixe-me salvar as alterações no meu arquivo grunhido,

214
00:16:51,815 --> 00:17:01,085
e então eu vou descer abaixo e, em seguida, configurar outra tarefa grunhida, aqui chamada padrão.

215
00:17:01,085 --> 00:17:05,145
Então, eu especificaria a tarefa como padrão.

216
00:17:05,145 --> 00:17:08,720
Para esta tarefa padrão, o que eu preciso fazer?

217
00:17:08,720 --> 00:17:12,060
Eu preciso executar

218
00:17:12,160 --> 00:17:20,055
BrowserSync e também segunda tarefa que eu vou fazer é assistir.

219
00:17:20,055 --> 00:17:24,590
Terei que fazer a tarefa BrowserSync primeiro e depois WatchTask.

220
00:17:24,590 --> 00:17:27,310
Porque a tarefa BrowserSync começará a servir o meu servidor.

221
00:17:27,310 --> 00:17:30,605
Se eu fizer o watchTask primeiro e a tarefa BrowserSync mais tarde,

222
00:17:30,605 --> 00:17:32,495
o watchTask irá basicamente,

223
00:17:32,495 --> 00:17:38,260
parar tudo e, em seguida, todas as tarefas restantes atrás que não serão executadas.

224
00:17:38,260 --> 00:17:40,525
Então, se você estiver usando o watchTask,

225
00:17:40,525 --> 00:17:45,624
faça isso como um último na sequência que você especificar neste colchetes.

226
00:17:45,624 --> 00:17:50,415
Com isso, meu projeto agora está configurado,

227
00:17:50,415 --> 00:17:57,100
tanto para manter um controle sobre meus arquivos SASS quanto para servi-lo sempre que necessário.

228
00:17:57,100 --> 00:17:59,670
Então, isto completa o meu ficheiro,

229
00:17:59,670 --> 00:18:02,795
vamos voltar para o nosso terminal.

230
00:18:02,795 --> 00:18:04,740
Voltando ao meu terminal,

231
00:18:04,740 --> 00:18:07,670
eu abri outra guia e, em seguida, nesta guia,

232
00:18:07,670 --> 00:18:11,335
eu vou executar a tarefa grunhida,

233
00:18:11,335 --> 00:18:17,010
que também será manter meu BrowserSync em execução e servirá

234
00:18:17,010 --> 00:18:22,965
arquivos e recarregar automaticamente a página da web,

235
00:18:22,965 --> 00:18:25,055
se algum desses arquivos mudar.

236
00:18:25,055 --> 00:18:30,790
Então, se você configurar uma tarefa como uma tarefa padrão como fizemos no exercício, em

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

238
00:18:32,125 --> 00:18:37,725
eu só preciso digitar grunhido e, em seguida, ele irá executar automaticamente a tarefa padrão.

239
00:18:37,725 --> 00:18:40,680
Uma vez que minhas tarefas grunhidas começa a ser executado,

240
00:18:40,680 --> 00:18:44,015
você pode ver que ele iniciou o BrowserSync e ele está servindo

241
00:18:44,015 --> 00:18:48,600
os arquivos e também está executando o watchTask,

242
00:18:48,600 --> 00:18:54,825
que está esperando por quaisquer alterações para executar automaticamente a tarefa SCSS.

243
00:18:54,825 --> 00:19:01,460
Para demonstrar a você como a tarefa SCSS será acionada,

244
00:19:01,460 --> 00:19:05,120
sempre que eu fizer qualquer alteração no meu arquivo Styles.scss,

245
00:19:05,120 --> 00:19:07,725
então eu trouxe o arquivo Styles.scss,

246
00:19:07,725 --> 00:19:11,845
e eu simplesmente vou salvar esse arquivo.

247
00:19:11,845 --> 00:19:14,175
E então você notará que imediatamente,

248
00:19:14,175 --> 00:19:22,285
no lado esquerdo, a tarefa SASS é invocada e executada e, em seguida, recompila e isso

249
00:19:22,285 --> 00:19:30,705
também fará com que o arquivo Styles.scss seja alterado, depois de ser recompilado.

250
00:19:30,705 --> 00:19:38,045
Em seguida, isso irá acionar o BrowserSync para recarregar automaticamente a minha página web.

251
00:19:38,045 --> 00:19:43,750
Com isso, completamos nosso exercício grunhido parte um.

252
00:19:43,750 --> 00:19:48,659
Este é um bom momento para salvar seus arquivos,

253
00:19:48,659 --> 00:19:54,960
para o Repositório Git com a mensagem Grunt parte um.