1
00:00:03,510 --> 00:00:07,990
Agora que temos uma compreensão

2
00:00:07,990 --> 00:00:12,965
das várias etapas envolvidas na construção e implantação do nosso site,

3
00:00:12,965 --> 00:00:18,690
e também uma breve introdução aos scripts NPM na palestra anterior,

4
00:00:18,690 --> 00:00:22,830
vamos dar um mergulho profundo no desenvolvimento de

5
00:00:22,830 --> 00:00:28,755
scripts NPM para automatizar muitas das tarefas que tínhamos falado anteriormente.

6
00:00:28,755 --> 00:00:31,350
Como você viu na palestra anterior,

7
00:00:31,350 --> 00:00:38,760
já temos alguns scripts NPM que tínhamos incluído em nosso arquivo package.json,

8
00:00:38,760 --> 00:00:41,735
um para iniciar o servidor lite e o segundo

9
00:00:41,735 --> 00:00:46,240
para converter o código SCSS em CSS.

10
00:00:46,240 --> 00:00:49,755
Neste exercício e no próximo,

11
00:00:49,755 --> 00:00:53,055
vamos explorar scripts NPM com um pouco mais de detalhes.

12
00:00:53,055 --> 00:01:00,810
Para começar, vamos primeiro fazer alguma limpeza no arquivo index.html.

13
00:01:00,810 --> 00:01:03,095
Indo para o arquivo index.html,

14
00:01:03,095 --> 00:01:09,325
vemos que temos esse código JavaScript na parte inferior deste arquivo index.html.

15
00:01:09,325 --> 00:01:12,930
Eu preferiria manter este código JavaScript em

16
00:01:12,930 --> 00:01:19,385
um arquivo separado que contém todos os nossos scripts

17
00:01:19,385 --> 00:01:23,015
e, em seguida, incluir esse arquivo no meu index.html.

18
00:01:23,015 --> 00:01:31,155
Para fazer isso, vamos criar outra pasta aqui com o nome js.

19
00:01:31,155 --> 00:01:34,210
E nesta pasta js,

20
00:01:34,210 --> 00:01:41,520
vou criar um novo arquivo com o nome scripts.js.

21
00:01:42,120 --> 00:01:49,060
E indo para index.html,

22
00:01:49,060 --> 00:01:54,890
eu vou simplesmente cortar este código JavaScript a partir daqui e, em

23
00:01:54,890 --> 00:02:01,120
seguida, colá-lo no arquivo scripts.js

24
00:02:01,120 --> 00:02:05,305
e, em seguida, salvar as alterações no arquivo scripts.js.

25
00:02:05,305 --> 00:02:10,915
Agora que movemos todo o nosso código JavaScript em seu próprio arquivo,

26
00:02:10,915 --> 00:02:20,430
vou agora incluir esse arquivo JavaScript no meu index.html bem ali.

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

28
00:02:24,540 --> 00:02:31,040
“js/scripts.js” Assim,

29
00:02:31,040 --> 00:02:35,005
todo o meu código JavaScript agora é incluído de volta no meu arquivo index.html.

30
00:02:35,005 --> 00:02:40,390
Desta forma, meu arquivo index.html contém todo o código html,

31
00:02:40,390 --> 00:02:46,345
e todos os meus códigos CSS e JavaScript estão desligados em seus próprios arquivos separados.

32
00:02:46,345 --> 00:02:52,590
Deixe-me copiar esta linha de scripts da página index.html

33
00:02:52,590 --> 00:02:56,330
e, em seguida, ir para a página aboutus.html,

34
00:02:56,330 --> 00:02:59,365
role para baixo até a parte inferior onde incluí

35
00:02:59,365 --> 00:03:02,540
outros scripts e, em seguida, cole isso.

36
00:03:02,540 --> 00:03:07,405
Da mesma forma, deixe-me ir para a página contactus.html

37
00:03:07,405 --> 00:03:11,545
e novamente role para baixo até a parte inferior do arquivo lá.

38
00:03:11,545 --> 00:03:13,975
Deixe-me colar esta linha.

39
00:03:13,975 --> 00:03:18,205
Vamos salvar as alterações e, em seguida, passar para a próxima etapa.

40
00:03:18,205 --> 00:03:23,075
O próximo passo que eu gostaria de fazer é instalar um par de

41
00:03:23,075 --> 00:03:29,905
módulos NPM que eu vou fazer uso de para automatizar algumas tarefas.

42
00:03:29,905 --> 00:03:34,310
O primeiro módulo NMP que vou instalar é chamado onchange.

43
00:03:34,310 --> 00:03:42,335
Este módulo onchange vai assistir arquivos na minha pasta do projeto,

44
00:03:42,335 --> 00:03:44,445
e, em seguida, sempre que esses arquivos mudam,

45
00:03:44,445 --> 00:03:48,865
em seguida, ele automaticamente aciona uma tarefa a ser executada.

46
00:03:48,865 --> 00:03:50,660
Desta forma, por exemplo,

47
00:03:50,660 --> 00:03:56,860
se eu configurar uma citação unquote watch em alguns arquivos,

48
00:03:56,860 --> 00:03:59,305
digamos, por exemplo, meu arquivo SCSS,

49
00:03:59,305 --> 00:04:02,270
então sempre que eu fizer alterações no meu arquivo SCSS,

50
00:04:02,270 --> 00:04:07,220
ele será automaticamente recompilado no arquivo CSS correspondente.

51
00:04:07,220 --> 00:04:11,565
Já temos o script que faz a recompilação.

52
00:04:11,565 --> 00:04:16,080
Então, tudo o que preciso fazer é vigiar esse arquivo em particular.

53
00:04:16,080 --> 00:04:20,675
Agora é aqui que eu vou fazer uso do módulo NPM chamado Onchange.

54
00:04:20,675 --> 00:04:23,170
Há outro modelo NPM chamado Watch,

55
00:04:23,170 --> 00:04:25,945
que você também pode usar para o mesmo propósito.

56
00:04:25,945 --> 00:04:29,240
Neste exercício eu vou usar o módulo Onchange,

57
00:04:29,240 --> 00:04:34,765
então nós lidamos com concessão e gole nas lições posteriores,

58
00:04:34,765 --> 00:04:37,580
vamos usar o módulo Watch para o mesmo propósito.

59
00:04:37,580 --> 00:04:42,845
Além disso, eu também vou instalar outro módulo NPM chamado shell paralelo.

60
00:04:42,845 --> 00:04:46,250
Este módulo Parallelshell me permite executar

61
00:04:46,250 --> 00:04:51,320
vários scripts NPM em Parallelshells como o nome indica.

62
00:04:51,320 --> 00:04:55,095
Dessa forma, vários scripts NPM podem ser

63
00:04:55,095 --> 00:04:59,785
executados simultaneamente e me permitir manter vigiado vários arquivos,

64
00:04:59,785 --> 00:05:03,835
e também realizar outras tarefas.

65
00:05:03,835 --> 00:05:06,340
Então, vamos instalar esses dois módulos NPM.

66
00:05:06,340 --> 00:05:09,645
Vamos instalá-los localmente neste projeto em particular.

67
00:05:09,645 --> 00:05:14,555
Então, para fazer isso eu vou digitar npm install.

68
00:05:14,555 --> 00:05:20,420
Eu devo —save-dev e então eu diria onchange

69
00:05:20,420 --> 00:05:27,540
e paralelshell e, em seguida, esperar que esses dois módulos NPM sejam instalados.

70
00:05:27,540 --> 00:05:29,755
Uma vez que os dois módulos são instalados,

71
00:05:29,755 --> 00:05:35,745
então eu vou incluir um par de scripts NPM no meu arquivo package.json.

72
00:05:35,745 --> 00:05:40,930
E eu vou explicar a razão porque incluímos esses roteiros lá.

73
00:05:40,930 --> 00:05:43,650
Voltando ao meu arquivo package.json,

74
00:05:43,650 --> 00:05:46,270
logo após este SCSS,

75
00:05:46,270 --> 00:05:52,565
vou incluir outro script chamado “watch:scss”.

76
00:05:52,565 --> 00:05:55,125
E como o nome indica,

77
00:05:55,125 --> 00:05:59,290
isso vai manter um controle sobre os arquivos SCSS.

78
00:05:59,290 --> 00:06:07,435
Então é aqui que eu vou invocar o módulo NPM onchange que eu acabei de instalar,

79
00:06:07,435 --> 00:06:12,610
e então eu diria código único 'css/*.scss”.

80
00:06:13,960 --> 00:06:20,465
Então, o que significa que manter a vigilância em todos os arquivos SCSS que estão lá na pasta CSS.

81
00:06:20,465 --> 00:06:22,095
Se algum deles mudar,

82
00:06:22,095 --> 00:06:29,535
então você vai acionar este script específico e o script é “—npm

83
00:06:29,535 --> 00:06:35,915
run scss” porque esse

84
00:06:35,915 --> 00:06:42,380
é o script que vai fazer a recompilação do meu código SCSS no código CSS correspondente.

85
00:06:42,380 --> 00:06:46,075
Então, com isso, montei um relógio para o meu SCSS.

86
00:06:46,075 --> 00:06:49,160
Obviamente eu posso digitar “nmp watch:scss”.

87
00:06:49,160 --> 00:06:56,700
E então ele irá acionar o script lá com o módulo onchange,

88
00:06:56,700 --> 00:06:58,690
então ele vai manter um relógio sobre isso.

89
00:06:58,690 --> 00:07:02,960
Se você estiver fazendo esse exercício em uma máquina Windows,

90
00:07:02,960 --> 00:07:06,345
em vez da aspas simples no script,

91
00:07:06,345 --> 00:07:10,760
você deve substituí-lo pela barra invertida e aspas duplas.

92
00:07:10,760 --> 00:07:13,660
Da mesma forma, as outras aspas simples

93
00:07:13,660 --> 00:07:16,490
também substituem isso com a barra invertida e aspas duplas.

94
00:07:16,490 --> 00:07:22,770
Então, é assim que o script ficará em um computador Windows.

95
00:07:22,770 --> 00:07:28,385
Agora, eu vou fazer uso do Parallelshell

96
00:07:28,385 --> 00:07:35,765
para acionar vários desses scripts para serem simultaneamente ativos.

97
00:07:35,765 --> 00:07:39,670
Então eu diria “paralelshell”

98
00:07:39,990 --> 00:07:42,660
e, em seguida, entre aspas,

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

100
00:07:49,590 --> 00:07:55,605
Assim, o Parallelshell leva vários desses como parâmetros,

101
00:07:55,605 --> 00:07:58,380
cada um entre aspas simples lá.

102
00:07:58,380 --> 00:08:05,380
E o segundo é 'npm run lite'.

103
00:08:05,550 --> 00:08:11,630
Então você pode ver que este Parallelshell me permite executar dois scripts simultaneamente,

104
00:08:11,630 --> 00:08:14,370
um para manter um olho no meu arquivo SCSS,

105
00:08:14,370 --> 00:08:17,745
o outro para executar o shell lite.

106
00:08:17,745 --> 00:08:21,840
Se você estiver fazendo esse exercício em uma máquina Windows, em

107
00:08:21,840 --> 00:08:25,245
vez do código único no script,

108
00:08:25,245 --> 00:08:29,665
você deve substituí-lo pela barra invertida e aspas duplas.

109
00:08:29,665 --> 00:08:32,560
Da mesma forma, as outras aspas simples

110
00:08:32,560 --> 00:08:35,390
também substituem isso com a barra invertida e aspas duplas.

111
00:08:35,390 --> 00:08:41,685
Então é assim que o script ficará em uma máquina Windows.

112
00:08:41,685 --> 00:08:44,335
Agora, depois de fazer essas alterações,

113
00:08:44,335 --> 00:08:48,160
deixe-me salvar as alterações e então eu vou subir

114
00:08:48,160 --> 00:08:52,890
aqui e, em seguida, começar um script que eu tenho aqui.

115
00:08:52,890 --> 00:08:59,480
Vou mudar isso de “npm run lite” para “npm run watch:all”.

116
00:09:01,950 --> 00:09:05,145
E salve as alterações aqui.

117
00:09:05,145 --> 00:09:10,460
Então, com isso, os scripts que eu preciso agora estão configurados.

118
00:09:10,460 --> 00:09:15,745
Então agora, eu posso ir em frente e fazer

119
00:09:15,745 --> 00:09:21,124
“npm start” e que basicamente iniciará esses dois scripts simultaneamente,

120
00:09:21,124 --> 00:09:24,850
um mantendo um olho em meus arquivos SCSS que por sua vez irá

121
00:09:24,850 --> 00:09:28,825
acionar a compilação do SCSS para CSS,

122
00:09:28,825 --> 00:09:32,150
o outro que inicia meu servidor lite.

123
00:09:32,150 --> 00:09:41,125
Agora, eu comecei na guia tabela e, em seguida, movido para a pasta do projeto

124
00:09:41,125 --> 00:09:42,665
e, em seguida, adicione o prompt.

125
00:09:42,665 --> 00:09:44,705
Vou digitar “npm start”.

126
00:09:44,705 --> 00:09:46,585
E isso deve acionar

127
00:09:46,585 --> 00:09:54,435
tanto o meu servidor lite que irá salvar os arquivos da minha pasta de confusão,

128
00:09:54,435 --> 00:10:02,290
e também acionar o módulo Onchange para manter uma vigilância sobre os arquivos SCSS.

129
00:10:02,290 --> 00:10:09,100
Para ajudar a ilustrar como este Onchange mantém uma vigilância sobre meus arquivos SCSS,

130
00:10:09,100 --> 00:10:14,705
o que eu vou fazer é ir para o meu arquivo styles.scss aqui,

131
00:10:14,705 --> 00:10:18,675
e então eu simplesmente vou salvar o arquivo novamente.

132
00:10:18,675 --> 00:10:20,860
Agora, sempre que este arquivo for salvo,

133
00:10:20,860 --> 00:10:22,620
eu não vou fazer nenhuma alteração nele.

134
00:10:22,620 --> 00:10:25,755
Eu só vou acertar a gravação no arquivo.

135
00:10:25,755 --> 00:10:27,840
Assim, sempre que este arquivo for alterado,

136
00:10:27,840 --> 00:10:30,620
você verá que imediatamente

137
00:10:32,750 --> 00:10:40,495
Onchange irá acionar o script SAS nó a ser executado,

138
00:10:40,495 --> 00:10:47,555
que irá compilar o arquivo de SCSS para CSS e criar o arquivo CSS aqui,

139
00:10:47,555 --> 00:10:50,335
e então salva o arquivo que também irá acionar

140
00:10:50,335 --> 00:10:55,450
minha página da Web para ser recarregada no navegador.

141
00:10:55,450 --> 00:11:03,285
Então, isso é essencialmente o que conseguimos usando o módulo Onchange para manter

142
00:11:03,285 --> 00:11:07,660
um controle sobre os arquivos que então mudaram

143
00:11:07,660 --> 00:11:12,395
irá acionar alguns dos scripts NPM automaticamente.

144
00:11:12,395 --> 00:11:20,790
Agora, isso nos liberta das preocupações sobre ter que acionar manualmente essas tarefas.

145
00:11:20,790 --> 00:11:25,390
Assim, por exemplo, se você tiver um conjunto de tarefas que deseja acionar automaticamente

146
00:11:25,390 --> 00:11:27,395
, algumas alterações ocorrerão.

147
00:11:27,395 --> 00:11:35,100
Você pode facilmente configurar essas tarefas de observação para manter um controle sobre essas alterações.

148
00:11:35,100 --> 00:11:37,785
Agora eu ilustrei isso com um único exemplo.

149
00:11:37,785 --> 00:11:39,985
No meu exemplo aqui,

150
00:11:39,985 --> 00:11:45,260
eu só estou modificando os arquivos CSS que precisam ser compilados.

151
00:11:45,260 --> 00:11:50,125
Mas mais tarde, então trabalhamos com frameworks JavaScript.

152
00:11:50,125 --> 00:11:57,335
Você verá que talvez queira acionar compilações quando vários arquivos tiverem sido alterados.

153
00:11:57,335 --> 00:12:02,964
E tudo isso pode ser facilmente gerenciado usando essas tarefas de observação.

154
00:12:02,964 --> 00:12:07,560
Será que isso, nós completamos este exercício.

155
00:12:07,560 --> 00:12:13,685
Aqui, aprendemos como configurar mais alguns scripts NPM

156
00:12:13,685 --> 00:12:20,855
e acionar automaticamente alguns dos scripts usando o módulo NPM onchange.

157
00:12:20,855 --> 00:12:24,550
Também vimos o uso do módulo shell paralelo para executar

158
00:12:24,550 --> 00:12:32,050
vários scripts NPM simultaneamente em nossa janela terminal.

159
00:12:32,200 --> 00:12:42,890
Este é um bom ponto para você fazer um comentário do Git com a mensagem “NPM Scripts Part 1".