[MÚSICA]
Até agora, temos nos concentrado em projetar e
implementar nosso site, seja HTML, CSS ou código JavaScript.
Uma vez que seu site está pronto, o próximo passo é ser capaz de construir seu site e
implantá-lo em um servidor web, para que ele se torne publicamente disponível.
Em seguida, nosso segundo conjunto de passos que precisamos passar antes que
seu site esteja pronto para implantação em um servidor web.
Isto é o que vamos ver nesta e na próxima lição.
Como eu mencionei, desenvolvimento e
implantação web envolve um monte de tarefas repetitivas.
Obviamente, a escrita do código HTML/CSS e JavaScript é uma parte dele.
Mas a outra parte é o fato de que se você escrever
o código CSS usando uma das linguagens de pré-processamento CSS, como Sass ou
Less, então você precisa converter esse código no código CSS correspondente.
Depois disso, você precisa fazer processamento adicional em seus
arquivos CSS, como minificação, compactação e concatenação.
Falaremos um pouco mais sobre isso nos próximos slides.
Da mesma forma, com seu código JavaScript, você precisa fazer
JShinting, verificando possíveis erros.
Em seguida, concatenação de vários arquivos de script e
, em seguida, até mesmo uglification e a mutilação do código.
Falaremos um pouco sobre isso nos próximos slides.
Todas essas tarefas são tarefas repetitivas, que gostaríamos de automatizar na
medida do possível, para que possamos nos concentrar no projeto e
construção real do nosso site, e não nessas tarefas repetitivas.
Para que o princípio DRY, não se repita princípio,
é muito essencial neste caso.
Nós não queremos desperdiçar nosso tempo em tais tarefas repetitivas de combustão,
e em vez disso, tentar automatizá-los o mais longe possível para
que eles possam ser executados sempre que necessário.
Vamos falar sobre algumas dessas tarefas repetitivas com um pouco mais de detalhes.
Vamos tomar o exemplo de CSS como um caso.
Quando escrevemos código CSS, muitas vezes escrevemos o código
usando uma das linguagens de pré-processamento como Less ou Sass.
Agora, uma vez que o código é escrito, então ele precisa ser convertido em CSS usando
um dos pré-processadores como vimos na lição anterior.
Lá, podemos precisar fazer algum prefixo específico do fornecedor para o
nosso código CSS para resolver os problemas que podem surgir com vários navegadores.
Então é aqui que a tarefa de fazer auto-prefixação é usada,
pelo que isso pode ser feito automaticamente para nós.
Da mesma forma, uma vez que seu código CSS é escrito, obviamente,
a maneira como escrevemos o código CSS é ser humanamente legível.
Mas para uma máquina, ele realmente não se importa se há espaços suficientes
entre o código ou se ele está devidamente formatado ou não.
Então, minificação é o processo de remover todos os caracteres desnecessários,
o espaço em branco, novas linhas, comentários, do seu código CSS.
Para que seu resultado final seja um arquivo muito compacto com número mínimo
de caracteres, de modo que pode ser servido muito, muito rapidamente.
Mas, ao mesmo tempo,
você deseja preservar a funcionalidade que você projetou em seu código CSS.
Da mesma forma, você pode distribuir seu código CSS em muitos arquivos,
enquanto você está projetando e construindo seu site.
Você pode querer concatenar todos eles em um único arquivo CSS no final, de
modo que apenas um único arquivo CSS precisa ser baixado
pelo navegador quando ele estiver renderizando seu site.
Portanto, a concatenação é
mais uma tarefa que está envolvida quando você está construindo seu site.
Da mesma forma, quando você escreve código JavaScript, seja puro JavaScript ou
jQuery ou um dos frameworks que usaremos
nos futuros cursos desta especialização, você precisaria escrever código JavaScript.
Então, uma vez que você tenha escrito o código JavaScript, você vai querer ser capaz de verificar
o código JavaScript para erros e possíveis problemas.
Coisas como ponto e vírgula faltando,
uso impróprio da linguagem, e assim por diante, então o que chamamos de análise de código estático.
Então, se você quiser ser capaz de realizar isso, mesmo antes de implantar nosso
site no servidor web.
Da mesma forma, podemos organizar nosso código em vários arquivos JavaScript.
Quando realmente implantamos, podemos querer concatenar todos esses arquivos em
um único arquivo JavaScript e, em seguida, usá-lo em nossas páginas da web.
E essa concatenação pode ser feita automaticamente.
Da mesma forma, a uglificação do código JavaScript, que significa
minificação, o que significa remover todo o espaço em branco desnecessário e
comentários e assim por diante.
E mutilação do código, o que significa reduzir os nomes das
variáveis locais para letras únicas sempre que possível.
Agora, do ponto de vista de um computador,
ele realmente não se importa com o que o código parece, desde que ele funcione corretamente.
Para o formato legível por humanos, obviamente escrevemos código de
forma muito mais elaborada, para que seja mais fácil para nós seguir o que o código está fazendo.
Então, quando você realmente implantar,
você pode querer remover todos os recursos estranhos do seu código.
E, em seguida, compacte-o para que a quantidade mínima de código seja servida.
Ao mesmo tempo, após a conclusão do
processo de concatenação e uglificação do JShint,
você ainda pode querer se certificar de que seu código resultante ainda funcionará corretamente.
Então, você pode querer verificar novamente seu código para possíveis erros.
CSS e JavaScript são dois aspectos principais do seu desenvolvimento web que você
obviamente precisa prestar muita atenção.
Mas há muitas outras tarefas menores que você precisa executar
antes que seu site esteja pronto para implantação.
Você pode incluir muitas imagens em suas páginas da Web.
Uma vez que seu site esteja pronto, você pode querer compactar essas imagens para
que você otimize os tamanhos dos arquivos, para
que suas imagens sejam arquivos de tamanho mínimo a serem implantados.
Da mesma forma, enquanto você está fazendo desenvolvimento, você pode estar fazendo modificações em,
por exemplo, seus arquivos Sass ou seu código JavaScript.
Quando essas modificações são feitas,
você quer ser capaz de executar automaticamente essas tarefas,
como tarefas de concatenação, minificação e feificação.
Então poderíamos usar tarefas de observação,
cujo principal trabalho é manter um controle em todos esses arquivos.
E se alguma alteração for feita nesses arquivos,
as tarefas serão executadas automaticamente.
Isso liberará muito do nosso tempo de fazer tarefas repetitivas manualmente.
Vamos analisar alguns desses com mais detalhes nos exercícios que se seguem.
Um outro aspecto, enquanto você está fazendo seu desenvolvimento,
é poder servir seu código e
assistir o código em seu navegador.
Então vimos o uso do servidor live em nosso desenvolvimento anterior,
onde tínhamos o servidor funcionando e servindo o código.
Para que possamos ver as mudanças que fazemos instantaneamente
sendo renderizadas no navegador.
Então, para isso, precisamos servidor e mecanismo de livereload, e
servidor ao vivo que vimos anteriormente é um exemplo de como podemos conseguir isso.
Finalmente, se você está escrevendo código, você obviamente precisa realizar testes
de seu código, o que, no caso do Bootstrap, é muito menos de consideração.
Mas à medida que você passa a usar vários frameworks JavaScript, o
teste se torna uma tarefa igualmente importante.
Finalmente, você quer ser capaz de realizar todas essas tarefas e,
em seguida, construir seu código de implantação final que pode então ser carregado
para o seu servidor web para tornar seu site disponível para o público em geral.
As etapas envolvidas na construção de seu site para implantação, o que chamamos
de construção de arquivos de distribuição, também é uma tarefa igualmente importante.
Vamos analisar alguns deles através de exemplos no próximo exercício e
também na próxima lição onde analisaremos os corredores de tarefas.
[ MUSIC]