Gulp | Guia Definitivo – Automatizando tarefas de build e deploy de um Web App – Mão na Massa – Processo de Build – #3

Olá a todos. Sejam bem vindos aos Canal e Blog SW9 (http://blog.sw9.com.br)

No vídeo de hoje, quinto vídeo da série, vou continuar o processo de desenvolvimento de tarefas seguindo o workflow proposto no vídeo 2.

Desta vez explicarei passo a passo como construir as tarefas de transformação de manipulação de arquivos .html, na sequencia as tarefas para manipulação das folhas de estilo [CSS].

[Tarefa – Html App]

Esta tarefa vai trabalhar com todos os arquivos .html que existem dentro das pasta [app] e suas sub-pastas. O objetivo da tarefa será apenas ler os arquivos .html, em seguida minificar e na sequencia salvar os arquivos transformados na pasta de destino.

Dependendo do tipo de build escolhido pelo usuário, seguiremos passos diferentes.

Caso o build seja do tipo [Debug], não executaremos a atividade de minificação de arquivos, simplesmente copiaremos os arquivos .html da pasta origem “src/app” para o destino “build/dev/app”.

Caso o build seja do tipo [Production], a atividade de minificação será executada em todos os arquivos. Na sequencia, os arquivos minificados serão salvos na pasta de destino “build/prod/app”.

[Tarefa – Html Templates]

Esta tarefa vai trabalhar com os arquivos .html existentes na pasta [templates]. O objetivo será ler os arquivos da pasta de origem “src/templates”, minificar os arquivos e salvá-los na pasta de destino.

Para esta tarefa também teremos uma diferença no workflow. Caso o build seja do tipo [Debug], os arquivos .html serão apenas copiados da pasta “src/templates” e salvos na pasta “build/dev/templates”.

Caso o build seja do tipo [Production], a atividade de minificação será executada e então teremos todos os arquivos minificados na pasta de destino “build/prod/templates”.

[Tarefa – Html Index]

Esta tarefa vai tratar apenas do arquivo index.html localizado na pasta “src”. Para esta tarefa seguiremos fluxos diferentes dependendo do tipo de build.

Se o usuário optar por um build do tipo [Debug], vamos primeiro ler o arquivo “index.html” localizado na pasta “src”, na sequencia o arquivo passará por um processo para renomear algumas referências e por último salvaremos o arquivo na pasta de destino “build/prod”.

Agora, caso o usuário escolha executar um build do tipo [Production], vamos ler o arquivo “index.html” localizado na pasta “src”, na sequencia executaremos uma processo de renomear referências, minificaremos o arquivo e por último salvaremos o arquivo na pasta “build/prod”.

O ponto crucial desta tarefa é o processo de renomear algumas referências. Sem esta etapa, o app Web não funcionará.

Mas o que seria este processo de renomear? Em um dos vídeos anteriores, mostrei uma tarefa chamada copy3rdParty. Esta tarefa copiava as bibliotecas Js necessárias para o projeto de internacionalização, e copiamos para o diretório de destino “build/dev” ou “build/prod” dentro de uma única pasta chamada “node_modules”.

Portanto, se pegarmos o arquivo index.html original, onde temos referências do tipo:

  Se apenas copiarmos o index.html do jeito que está para a pasta de destino, o nosso WebApp não vai funcionar (as referências estarão quebradas).   Para resolver este problema, usamos o plugin gulp-html-replace para renomear estas referências conforme exemplo abaixo:  

Já nesta segunda forma, após processo de “rename”, o nosso WebApp vai conseguir carregar as referências e funcionar 100%.

[Tarefa – CSS]

Para a tarefa que vou chamar de , farei apenas a minificação de todos os arquivo .css localizados na pasta “src/css” e copiaremos o arquivos transformados na pasta de destino “build/dev/css” ou “build/prod/css”.

Para concluir, vou adicionar estas tarefas na tarefa principal chamada [run], desta forma, com um simples comando conseguimos executar todas as tarefas.

Comando que deve ser utilizado: npm run build

Bom, por hoje é só. Aproveitem o vídeo e bons estudos.

Dica: Deixarei na descrição do vídeo o link para a área de plugins do Gulp. Conforme comentei, a ferramenta possui mais de 3.000 plugins disponíveis para facilitar nosso processo de automatização de tarefas.

Como de costume, deixarei um link no final da descrição para baixarem o código fonte parcial. O processo é bem simples, basta acessar o link, informar um e-mail válido e dentro de instantes receberá o link para acesso irrestrito em minha área de downloads.

O que estão esperando? Baixem agora mesmo o código fonte e bons estudos.

Nome do arquivo disponível na área de Downloads: Gulp – Video – 5.zip

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

Links úteis:

Plugins Gulp: http://gulpjs.com/plugins/

Código Fonte: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

Link do vídeo: https://youtu.be/pCHjlH5QlT4

Playlist sobre Gulp: https://www.youtube.com/playlist?list=PLtluGZbI5EShPP

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se