1
00:00:00,000 --> 00:00:04,674
[MÚSICA]

2
00:00:04,674 --> 00:00:08,968
Até agora, temos nos concentrado em projetar e

3
00:00:08,968 --> 00:00:14,540
implementar nosso site, seja HTML, CSS ou código JavaScript.

4
00:00:16,170 --> 00:00:21,890
Uma vez que seu site está pronto, o próximo passo é ser capaz de construir seu site e

5
00:00:21,890 --> 00:00:26,010
implantá-lo em um servidor web, para que ele se torne publicamente disponível.

6
00:00:27,300 --> 00:00:30,750
Em seguida, nosso segundo conjunto de passos que precisamos passar antes que

7
00:00:30,750 --> 00:00:34,580
seu site esteja pronto para implantação em um servidor web.

8
00:00:34,580 --> 00:00:39,079
Isto é o que vamos ver nesta e na próxima lição.

9
00:00:40,915 --> 00:00:43,479
Como eu mencionei, desenvolvimento e

10
00:00:43,479 --> 00:00:47,870
implantação web envolve um monte de tarefas repetitivas.

11
00:00:47,870 --> 00:00:54,820
Obviamente, a escrita do código HTML/CSS e JavaScript é uma parte dele.

12
00:00:54,820 --> 00:00:57,600
Mas a outra parte é o fato de que se você escrever

13
00:00:59,200 --> 00:01:04,170
o código CSS usando uma das linguagens de pré-processamento CSS, como Sass ou

14
00:01:04,170 --> 00:01:09,200
Less, então você precisa converter esse código no código CSS correspondente.

15
00:01:09,200 --> 00:01:14,614
Depois disso, você precisa fazer processamento adicional em seus

16
00:01:14,614 --> 00:01:20,810
arquivos CSS, como minificação, compactação e concatenação.

17
00:01:20,810 --> 00:01:24,850
Falaremos um pouco mais sobre isso nos próximos slides.

18
00:01:24,850 --> 00:01:30,090
Da mesma forma, com seu código JavaScript, você precisa fazer

19
00:01:30,090 --> 00:01:34,580
JShinting, verificando possíveis erros.

20
00:01:34,580 --> 00:01:40,590
Em seguida, concatenação de vários arquivos de script e

21
00:01:40,590 --> 00:01:45,100
, em seguida, até mesmo uglification e a mutilação do código.

22
00:01:45,100 --> 00:01:49,240
Falaremos um pouco sobre isso nos próximos slides.

23
00:01:49,240 --> 00:01:54,889
Todas essas tarefas são tarefas repetitivas, que gostaríamos de automatizar na

24
00:01:54,889 --> 00:02:00,536
medida do possível, para que possamos nos concentrar no projeto e

25
00:02:00,536 --> 00:02:05,730
construção real do nosso site, e não nessas tarefas repetitivas.

26
00:02:05,730 --> 00:02:09,623
Para que o princípio DRY, não se repita princípio,

27
00:02:09,623 --> 00:02:11,840
é muito essencial neste caso.

28
00:02:11,840 --> 00:02:16,840
Nós não queremos desperdiçar nosso tempo em tais tarefas repetitivas de combustão,

29
00:02:16,840 --> 00:02:20,140
e em vez disso, tentar automatizá-los o mais longe possível para

30
00:02:20,140 --> 00:02:23,410
que eles possam ser executados sempre que necessário.

31
00:02:23,410 --> 00:02:27,649
Vamos falar sobre algumas dessas tarefas repetitivas com um pouco mais de detalhes.

32
00:02:28,950 --> 00:02:33,580
Vamos tomar o exemplo de CSS como um caso.

33
00:02:33,580 --> 00:02:37,470
Quando escrevemos código CSS, muitas vezes escrevemos o código

34
00:02:37,470 --> 00:02:41,440
usando uma das linguagens de pré-processamento como Less ou Sass.

35
00:02:41,440 --> 00:02:46,920
Agora, uma vez que o código é escrito, então ele precisa ser convertido em CSS usando

36
00:02:46,920 --> 00:02:52,460
um dos pré-processadores como vimos na lição anterior.

37
00:02:54,130 --> 00:02:59,660
Lá, podemos precisar fazer algum prefixo específico do fornecedor para o

38
00:02:59,660 --> 00:03:06,300
nosso código CSS para resolver os problemas que podem surgir com vários navegadores.

39
00:03:06,300 --> 00:03:12,599
Então é aqui que a tarefa de fazer auto-prefixação é usada,

40
00:03:12,599 --> 00:03:16,980
pelo que isso pode ser feito automaticamente para nós.

41
00:03:16,980 --> 00:03:20,430
Da mesma forma, uma vez que seu código CSS é escrito, obviamente,

42
00:03:20,430 --> 00:03:26,010
a maneira como escrevemos o código CSS é ser humanamente legível.

43
00:03:26,010 --> 00:03:30,550
Mas para uma máquina, ele realmente não se importa se há espaços suficientes

44
00:03:30,550 --> 00:03:34,000
entre o código ou se ele está devidamente formatado ou não.

45
00:03:35,100 --> 00:03:41,274
Então, minificação é o processo de remover todos os caracteres desnecessários,

46
00:03:41,274 --> 00:03:46,080
o espaço em branco, novas linhas, comentários, do seu código CSS.

47
00:03:46,080 --> 00:03:51,280
Para que seu resultado final seja um arquivo muito compacto com número mínimo

48
00:03:51,280 --> 00:03:56,306
de caracteres, de modo que pode ser servido muito, muito rapidamente.

49
00:03:56,306 --> 00:03:57,812
Mas, ao mesmo tempo,

50
00:03:57,812 --> 00:04:03,099
você deseja preservar a funcionalidade que você projetou em seu código CSS.

51
00:04:04,550 --> 00:04:09,140
Da mesma forma, você pode distribuir seu código CSS em muitos arquivos,

52
00:04:09,140 --> 00:04:12,870
enquanto você está projetando e construindo seu site.

53
00:04:12,870 --> 00:04:17,620
Você pode querer concatenar todos eles em um único arquivo CSS no final, de

54
00:04:17,620 --> 00:04:21,430
modo que apenas um único arquivo CSS precisa ser baixado

55
00:04:21,430 --> 00:04:25,290
pelo navegador quando ele estiver renderizando seu site.

56
00:04:25,290 --> 00:04:27,150
Portanto, a concatenação é

57
00:04:27,150 --> 00:04:32,340
mais uma tarefa que está envolvida quando você está construindo seu site.

58
00:04:33,660 --> 00:04:38,940
Da mesma forma, quando você escreve código JavaScript, seja puro JavaScript ou

59
00:04:38,940 --> 00:04:44,800
jQuery ou um dos frameworks que usaremos

60
00:04:44,800 --> 00:04:50,640
nos futuros cursos desta especialização, você precisaria escrever código JavaScript.

61
00:04:50,640 --> 00:04:53,550
Então, uma vez que você tenha escrito o código JavaScript, você vai querer ser capaz de verificar

62
00:04:53,550 --> 00:04:57,510
o código JavaScript para erros e possíveis problemas.

63
00:04:57,510 --> 00:05:00,576
Coisas como ponto e vírgula faltando,

64
00:05:02,810 --> 00:05:09,030
uso impróprio da linguagem, e assim por diante, então o que chamamos de análise de código estático.

65
00:05:09,030 --> 00:05:13,490
Então, se você quiser ser capaz de realizar isso, mesmo antes de implantar nosso

66
00:05:14,830 --> 00:05:18,180
site no servidor web.

67
00:05:18,180 --> 00:05:23,379
Da mesma forma, podemos organizar nosso código em vários arquivos JavaScript.

68
00:05:23,379 --> 00:05:28,135
Quando realmente implantamos, podemos querer concatenar todos esses arquivos em

69
00:05:28,135 --> 00:05:33,515
um único arquivo JavaScript e, em seguida, usá-lo em nossas páginas da web.

70
00:05:33,515 --> 00:05:36,775
E essa concatenação pode ser feita automaticamente.

71
00:05:36,775 --> 00:05:42,340
Da mesma forma, a uglificação do código JavaScript, que significa

72
00:05:42,340 --> 00:05:46,720
minificação, o que significa remover todo o espaço em branco desnecessário e

73
00:05:46,720 --> 00:05:48,880
comentários e assim por diante.

74
00:05:48,880 --> 00:05:53,670
E mutilação do código, o que significa reduzir os nomes das

75
00:05:53,670 --> 00:05:58,100
variáveis locais para letras únicas sempre que possível.

76
00:05:58,100 --> 00:06:01,562
Agora, do ponto de vista de um computador,

77
00:06:01,562 --> 00:06:06,790
ele realmente não se importa com o que o código parece, desde que ele funcione corretamente.

78
00:06:06,790 --> 00:06:12,230
Para o formato legível por humanos, obviamente escrevemos código de

79
00:06:12,230 --> 00:06:17,960
forma muito mais elaborada, para que seja mais fácil para nós seguir o que o código está fazendo.

80
00:06:17,960 --> 00:06:19,620
Então, quando você realmente implantar,

81
00:06:19,620 --> 00:06:23,460
você pode querer remover todos os recursos estranhos do seu código.

82
00:06:23,460 --> 00:06:29,226
E, em seguida, compacte-o para que a quantidade mínima de código seja servida.

83
00:06:29,226 --> 00:06:35,270
Ao mesmo tempo, após a conclusão do

84
00:06:35,270 --> 00:06:37,200
processo de concatenação e uglificação do JShint,

85
00:06:37,200 --> 00:06:41,990
você ainda pode querer se certificar de que seu código resultante ainda funcionará corretamente.

86
00:06:41,990 --> 00:06:46,490
Então, você pode querer verificar novamente seu código para possíveis erros.

87
00:06:47,550 --> 00:06:52,127
CSS e JavaScript são dois aspectos principais do seu desenvolvimento web que você

88
00:06:52,127 --> 00:06:55,640
obviamente precisa prestar muita atenção.

89
00:06:55,640 --> 00:06:59,640
Mas há muitas outras tarefas menores que você precisa executar

90
00:06:59,640 --> 00:07:02,870
antes que seu site esteja pronto para implantação.

91
00:07:02,870 --> 00:07:08,601
Você pode incluir muitas imagens em suas páginas da Web.

92
00:07:08,601 --> 00:07:14,574
Uma vez que seu site esteja pronto, você pode querer compactar essas imagens para

93
00:07:14,574 --> 00:07:17,881
que você otimize os tamanhos dos arquivos, para

94
00:07:17,881 --> 00:07:23,440
que suas imagens sejam arquivos de tamanho mínimo a serem implantados.

95
00:07:24,510 --> 00:07:30,310
Da mesma forma, enquanto você está fazendo desenvolvimento, você pode estar fazendo modificações em,

96
00:07:30,310 --> 00:07:35,580
por exemplo, seus arquivos Sass ou seu código JavaScript.

97
00:07:35,580 --> 00:07:38,268
Quando essas modificações são feitas,

98
00:07:38,268 --> 00:07:42,748
você quer ser capaz de executar automaticamente essas tarefas,

99
00:07:42,748 --> 00:07:47,990
como tarefas de concatenação, minificação e feificação.

100
00:07:47,990 --> 00:07:52,110
Então poderíamos usar tarefas de observação,

101
00:07:52,110 --> 00:07:56,480
cujo principal trabalho é manter um controle em todos esses arquivos.

102
00:07:56,480 --> 00:07:59,340
E se alguma alteração for feita nesses arquivos,

103
00:07:59,340 --> 00:08:03,070
as tarefas serão executadas automaticamente.

104
00:08:03,070 --> 00:08:09,260
Isso liberará muito do nosso tempo de fazer tarefas repetitivas manualmente.

105
00:08:10,610 --> 00:08:15,320
Vamos analisar alguns desses com mais detalhes nos exercícios que se seguem.

106
00:08:16,660 --> 00:08:22,060
Um outro aspecto, enquanto você está fazendo seu desenvolvimento,

107
00:08:22,060 --> 00:08:25,940
é poder servir seu código e

108
00:08:25,940 --> 00:08:30,570
assistir o código em seu navegador.

109
00:08:30,570 --> 00:08:37,960
Então vimos o uso do servidor live em nosso desenvolvimento anterior,

110
00:08:37,960 --> 00:08:42,330
onde tínhamos o servidor funcionando e servindo o código.

111
00:08:42,330 --> 00:08:46,530
Para que possamos ver as mudanças que fazemos instantaneamente

112
00:08:48,230 --> 00:08:51,020
sendo renderizadas no navegador.

113
00:08:51,020 --> 00:08:55,549
Então, para isso, precisamos servidor e mecanismo de livereload, e

114
00:08:55,549 --> 00:09:01,340
servidor ao vivo que vimos anteriormente é um exemplo de como podemos conseguir isso.

115
00:09:02,740 --> 00:09:07,850
Finalmente, se você está escrevendo código, você obviamente precisa realizar testes

116
00:09:07,850 --> 00:09:14,210
de seu código, o que, no caso do Bootstrap, é muito menos de consideração.

117
00:09:14,210 --> 00:09:18,930
Mas à medida que você passa a usar vários frameworks JavaScript, o

118
00:09:18,930 --> 00:09:21,915
teste se torna uma tarefa igualmente importante.

119
00:09:23,190 --> 00:09:28,680
Finalmente, você quer ser capaz de realizar todas essas tarefas e,

120
00:09:28,680 --> 00:09:34,250
em seguida, construir seu código de implantação final que pode então ser carregado

121
00:09:34,250 --> 00:09:40,790
para o seu servidor web para tornar seu site disponível para o público em geral.

122
00:09:42,450 --> 00:09:48,115
As etapas envolvidas na construção de seu site para implantação, o que chamamos

123
00:09:48,115 --> 00:09:53,950
de construção de arquivos de distribuição, também é uma tarefa igualmente importante.

124
00:09:53,950 --> 00:09:59,754
Vamos analisar alguns deles através de exemplos no próximo exercício e

125
00:09:59,754 --> 00:10:04,470
também na próxima lição onde analisaremos os corredores de tarefas.

126
00:10:04,470 --> 00:10:10,569
[ MUSIC]