Yan Magalhães Leite apresenta o Gulp JS como uma ferramenta para automatizar tarefas e aumentar a produtividade. O documento discute os conceitos de automação e por que é necessário automatizar, e introduz o Gulp JS destacando suas principais vantagens e exemplos de utilização.
2. ● Yan Magalhães Leite.
● 21 anos,
● Desenvolvedor Web na Construsite Brasil.
● Cursando Ciências da Computação.
● Participante de fóruns,grupos e eventos
promovidos pela comunidade.
Quem Sou Eu?
3. ● Conceitos e primórdios da automatização.
● Por quê precisamos automatizar?
● Introdução ao Gulp.
● Principais vantagens.
● Exemplos e utilização.
Agenda:
4. “Não é o mais forte que sobrevive, nem o mais
inteligente, mas o que melhor se adapta às
mudanças.” (Charles Darwin)
9. Automação (do latim Automatus, que significa mover-se por si) é
um sistema automático de controle pelo qual os mecanismos
verificam seu próprio funcionamento, efetuando medições e
introduzindo correções, sem a necessidade da interferência do
homem. Ela diminui os custos e aumenta a velocidade da
produção. (2004 - Lacombe)
Conceito:
10. Pode ser definida como um conjunto de técnicas que podem ser
aplicadas sobre um processo, com o objetivo de torná-lo mais
eficiente, maximizando a produção e com menor consumo de
energia ou recursos.
https://prezi.com/monbpk60_bx0/automacao-da-producao/
Conceito:
11.
12. As linguagens e ferramentas que utilizamos no
dia-a-dia, também evoluem.
13. ● A medida em que as linguagens e ferramentas evoluem,
maiores são as possibilidades e opções.
● Quanto mais opções, maiores são as formas para se resolver
um problema.
14. ● Nosso tempo é curto.
● Temos várias tarefas para nos preocupar.
● Não iremos lembrar de tudo.
● Evitar realizar tarefas repetidamente.
Por quê precisamos automatizar?
15. ● Possibilidade de utilizar diversas ferramentas, simultaneamente.
● Economia de Tempo
● Manter o foco no que realmente importa: o projeto e o seu
resultado final.
Por quê precisamos automatizar?
16. ● Ant(Java)
● Rake(Ruby)
● Grunt, Gulp e Broccoli(Javascript)
https://gist.github.com/callumacrae/9231589
Alguns automatizadores no mercado:
18. ● Ferramenta para a automatização de tarefas e aumentar o seu
fluxo de trabalho.
● Feito em Javascript.
● Para o seu uso é necessário a instalação do Node JS.
Gulp JS:
19. ● Minificação de arquivos.
● Concatenação de arquivos.
● Pré-processar arquivos CSS.
● Criar sprites automaticamente.
O que podemos utilizar?
20. ● Otimizar imagens.
● Checar a qualidade do nosso código.
● Live Reload.
● Executar testes de performance/unitários.
● Deploy.
O que podemos utilizar?
30. **Dados retirados em 12/05/2015
Gulp JS Grunt JS Broccoli JS
Criado em: 2014 Criado em: 2013 Criado em: 2014
Stars no Github: ~13.600 Stars no Github: ~9.475 Stars no Github: ~2.169
Quant. Plugins: ~1.577 Quant. Plugins: ~4.672 Quant. Plugins: ~221
Menos plugins Muitos plugins Mais instável
Mais rápido; Fácil de
utilizar.
Mais lento; Curva de
aprendizagem mais
acentuada.
Mais rápido;
Possibilidade de
acompanhar a evolução
do projeto.
31. ● Instalação do Node JS.
● Instalação do Gulp JS.
● Criação do arquivo package.json.
● Instalar os módulos necessários.
● Criação do arquivo gulpfile.js.
Primeiros passos com o Gulp JS:
33. ● gulp.src
Indicamos em qual diretório e em quais arquivos queremos realizar
alguma tarefa.
● gulp.dest
Indicamos para qual diretório queremos enviar os arquivos que
foram modificados por alguma tarefa.
Comandos básicos:
34. ● gulp.task
Realizamos a criação das tarefas.
● pipe()
Responsável por indicar qual o módulo deverá ser executado, para
a realização de uma determinada tarefa.
Comandos básicos:
46. Visualizar as modificações rapidamente no browser.
**Necessita da extensão do livereload.
npm install --save-dev gulp-livereload
https://www.npmjs.com/package/gulp-livereload/
Gulp-Livereload
47. Realizar o deploy para o seu servidor.
**Necessita que o rsync esteja instalado em seu computador.
***Para Windows - https://www.cygwin.com/
npm install --save-dev gulp-rsync
https://www.npmjs.com/package/gulp-rsync/
Gulp-Rsync
48. Obter um report da nossa página segundo as métricas do
PageSpeed Insights.
npm install --save-dev psi
https://www.npmjs.com/package/psi
Psi
49. Obter um report da nossa página quanto ao nível de acessibilidade
que ela possui, através das recomendações do WCAG(Web
Content Accessibility Guidelines).
npm install --save-dev gulp-accessibility
https://www.npmjs.com/package/gulp-accessibility/
Gulp-Accessibility
50. Acompanhar as alterações realizadas em seus arquivos.
npm install --save-dev gulp-watch
https://www.npmjs.com/package/gulp-watch/
Gulp-Watch
51. ● Qualidade.
● Organização.
● Performance(Diminuímos a quantidade dos arquivos a serem
baixados pelo browser).
● Tempo.
Os benefícios:
Agradecimento a Una pelo convite e ao GDG
Tempo de palestra: 40 minutos
Rápida apresentação.
Premissa que todas as coisas evoluem.
As coisas ao nosso redor evoluem. Os seres humanos evoluem.O nosso mundo evolui.
A evolução é um processo natural do ser humano; E ela pode acontecer por vários motivos
A automatização é um dos resultados e exemplos da evolução do homem.
Mas o que é exatamente automatizar ???
Por que o homem descobriu a necessidade de automatizar as suas coisas ??
Conceito da automatização
Conceito da automatização
O ser humano esta sempre procurando formas de automatizar as coisas em sua volta
Encontrar uma forma mais rápida para realizar tarefas repetitivas
Assim como o ser humano evolui, as linguagens de programação e ferramentas que utilizamos, também evoluem.
Motivos em geral que nos levam a automatizar
Motivos em geral que nos levam a automatizar
A necessidade de automatização já foi percebida por nós, desenvolvedores
Exemplos de outros automatizadores, mais conhecidos, em outras linguagens
Começando a falar do Gulp em Si
Tempo estimado ate aqui: 7 minutos
Definindo o gulp
Dar uma rápida passada no conceito do Node e realçar a sua importância.
O que podemos utilizar:
O que podemos utilizar:
Ou seja, a partir de agora, ao invés de utilizar todos estes serviços, de forma separada em cada um destes sites
Passamos a utilizar todos eles em juntos, em uma única ferramenta.
Comparativo entre Gulp, Grunt e Broccoli
Primeiros passos
Tempo estimado até aqui: 15 minutos
Comandos básicos:
Tempo estimado: 30 minutos
Podemos utilizar ainda outros modulos do npm, que nao sejam puglins do gulp
Focar bastante nesta parte.
Todos estes benefícios, com apenas 1 ferramenta
Chegar aqui em: 36 minutos