Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

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

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

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

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

Explicarei como construir a tarefa de transformação de arquivos Js e algumas tarefas simples de cópia de arquivos entre o diretório de origem e destino (cópia de bibliotecas da pasta node_modules, cópia de arquivos .json e cópia de arquivos da biblioteca angular-i18n).

[Tarefa de Transformação Js – Pasta App]

Vou explicar passo a passo a construção de duas tarefas de transformação de arquivos .Js (implementação Javascript).

Na primeira tarefa vou tratar apenas das implementações Javascript dentro da pasta [app]. Esta pasta app contém implementação AngularJS.

Para esta tarefa haverá uma diferença quando o usuário optar por build do tipo [Debug] ou build do tipo [Production]

Para o tipo [Debug], vou simplesmente copiar todos os arquivos .js da origem [pasta src] para o destino [pasta build/dev].

Para o tipo [Production], faremos as seguintes trasnformações: 1. Retirada das referências a debug (exemplo: retirada dos comandos console.log);

2. Utilização do plugin ngannotate para manter a compatibilidade das implementações em AngularJS após a execução do processo de minificação.

3. Por último, passar os arquivos por um processo de minificação.

[Tarefa de Transformação Js – Pasta JS]

Nesta segunda tarefa vou tratar apenas das implementações Javascript dentro da pasta . Esta pasta js contém scripts diversos implantados usando AngularJS, Jquery, etc.

Para esta tarefa haverá uma diferença quando o usuário optar por build do tipo [Debug] ou build do tipo [Production]

Para o tipo [Debug], vou simplesmente copiar todos os arquivos .js da origem [pasta src] para o destino [pasta build/dev].

Para o tipo [Production], faremos as seguintes trasnformações: 1. Retirada das referências a debug (exemplo: retirada dos comandos console.log);

2. Utilização do plugin ngannotate para manter a compatibilidade das implementações em AngularJS após a execução do processo de minificação.

3. Por último, passar os arquivos por um processo de minificação.

[Tarefa de cópia de arquivos node_modules]

Esta será uma tarefa simples, cujo objetivo é copiar todas as bibliotecas necessárias (referenciadas no arquivo index.html) para a pasta de build.

O mesmo processo será aplicado tanto para build do tipo [Debug] como para build do tipo [Production].

Importante: Algumas bibliotecas precisam do arquivo .map para funcionar, neste caso estes também devem ser copiados para a pasta de destino.

[Tarefa de cópia de arquivos JSON]

Para o projeto de internacionalização que estamos usando como base para construção das tarefas de build e deploy, fazemos uso de vários arquivos do tipo [JSON] que representam as tabelas de tradução das página do WebApp.

Neste caso, criaremos uma tarefa simples que vai localizar os arquivos .json dentro da pasta [App] (varrendo inclusive os sub diretórios)

e vai copiá-los para a pasta de destino do build, seja um build de [Debug] ou build de [Production].

[Tarefa de cópia de arquivos da biblioteca angular-i18n]

Além da existência de arquivos do tipo .json, o projeto de internacionalização utiliza a biblioteca [angular-i18n] que possui tabelas de tradução para os formatos de data, moeda e números dentro de arquivos do tipo .js (Exemplo: angular-locale_pt-br.js]

O objetivo desta tarefa é basicamente copiar todos estes arquivos da biblioteca [angular-i18n] e salvá-las na pasta de destino do build.

Caso o build seja do tipo [Debug], os arquivos serão salvos em [‘build/dev/node_modules/angular-i18n/’].

Caso o build seja do tipo [Production], os arquivos serão salvos em [‘build/prod/node_modules/angular-i18n/’].

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 – 4.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/67YQC-yLpIA

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?