Gulp | Guia Definitivo – Automatizando tarefas de build e deploy de um WebApp

Olá a todos. Sejam bem vindos aos Canal e Blog SW9

Hoje iniciarei uma nova série de vídeos, agora para falar um pouco sobre a ferramenta chamada Gulp.

O Gulp é uma ferramenta de automatização de tarefas que visa auxiliar e reduzir drasticamente o tempo que os desenvolvedores perdem executando tarefas repetitivas. E pode ter certeza, o Gulp realmente vai auxiliar bastante e trazer benefícios em nosso dia a dia.

[Porque utilizar um automatizador de tarefas?]

Bom, como comentei logo acima, a proposta de utilizar uma ferramenta de automatização é justamente reduzir nosso tempo com tarefas repetitivas, focando mais em codificação e nas necessidades do negócio.

[Porque utilizar o Gulp?]

A resposta é simples. O Gulp é simples e rápido de utilizar. Além disso, ele possui milhares de plugins que podem ser utilizados para facilitar a construção das tarefas.

[Introdução]

O Gulp é orientado a tarefas. Mas o que isso significa? A base do Gulp são as tarefas. Para iniciar qualquer processo de automatização, você precisa, em primeiro lugar, criar pelo menos uma tarefa. Dentro de uma tarefa voce define o que deve ser feito.

O Gulp é orientado a workflow. Eu recomendo fortemente que antes de voce iniciar a construir as tarefas, você defina um workflow, mapeando todos as atividades que precisa seguir para cheagr ao seu objetivo.

No próximo vídeo da série, começaremos a colocar a mão na massa. Neste segundo vídeo irei apresentar um workflow e seguí-lo até o final para construir um processo de build e deploy.

[Build e Deploy]

O grande potencial do Gulp é nos auxiliar no processo de automatização de rotinas de build e deploy. É justamente este processo que vamos explicar passo a passo nesta série.

Durante o processo de build, nos deparamos com várias situações que precisamos considerar. Por exemplo: para realizar um build para produção, recomendo minificar arquivos JS, HTML e CSS, além disso, recomendo também, executar um processo de compactação das imagens que serão utilizadas em nosso WebApp.
Todas estas tarefas poderiam ser facilmente executadas de forma manual, utilizando várias ferramentas. Agora você já imaginou ficar fazendo isso de forma frequente e manual? Imagina usar várias ferramentas distintas para chegarmos ao resultado esperado. A pergunta que precisamos fazer é:
Porque não automatizar estas tarefas? É neste ponto que os automatizadores de tarefas entram em ação.

Após o processo de build, passamos para a etapa de deploy. Posso citar aqui alguns exemplos de deploy que podemos automatizar.

1-> Subir automaticamente um servidor HTTP para testar nosso webApp
2-> Subir a pasta contendo o build para um ftp
3-> Publicar nosso WebApp para a nuvem Amazon
4-> Sincronizar os fontes via SSH

[Recursos disponíveis]

O Gulp possui 4 métodos principais que iremos utilizar durante a construção de nossas tarefas.

1-> gulp.task: método para criação das tarefas. Podemos inclusive configurar se a tarefa será executada em paralelo com as demais tarefas ou
deve ser executada de forma síncrona, logo após o encerramento de uma determinada tarefa.

2-> gulp.src: método utilizado para configurarmos o diretório de origem dos arquivos que serão transformados.

3-> gulp.dest: método utilizado para configurarmos o diretório de destino, onde serão salvos os arquivos já transformados.

4-> .pipe: pode ser chamado inúmeras vezes entre os métodos .src e .dest e serve para realizarmos chamadas nos plugins que devemos usar para
atingirmos o objetivo da tarefa.

Exemplo de código usando os 4 métodos:

Gulp – Compactar Imagens

O trecho de código exibido logo acima, tem como objetivo criar uma tarefa para compactação de imagens. Em primeiro lugar, chamamos o método gulp.task e dentro dele chamamos os outros métodos na seguinte sequencia:

gulp.src -> .pipe(imagemin) -> gulp.dest

Em resumo, configuramos o diretório de origem, executamos o plugin de compactação de imagens e salvamos as imagens compactadas no caminho apontado no método gulp.dest.

Simples e rápido.

Bom pessoal, chegamos ao final do primeiro vídeo da série.

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:

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/HB0BSA93K4M

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se