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.

1. Vamos Automatizar!
Conheça o Gulp JS.

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)

6. A evolução é um processo natural.

7. A automatização é um dos resultados da
evolução.

8. AUTOMATIZAR???

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:

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:

17. http://gulpjs.com/

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?

21. http://csslint.net/

22. http://lisperator.net/uglifyjs/

23. http://jshint.com/

24. http://lesscss.org/

25. http://sass-lang.com/

26. https://learnboost.github.io/stylus/

27. https://compressor.io/

28. https://developers.google.com/speed/pagespeed/

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:

32. VAMOS PRATICAR.

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:

35. Alguns módulos que podemos utilizar:

36. Minificar arquivos .JS utilizando o UglifyJS.
npm install --save-dev gulp-uglify
https://www.npmjs.com/package/gulp-uglify/
Gulp-Uglify

37. Concatenar arquivos.
npm install --save-dev gulp-concat
https://www.npmjs.com/package/gulp-concat/
Gulp-Concat

38. Plugin para a utlização do JS Hint.
npm install --save-dev gulp-jshint
https://www.npmjs.com/package/gulp-jshint/
Gulp-Jshint

39. Reduzir o tamanho das imagens PNG,JPG, GIF e SVG.
npm install --save-dev gulp-imagemin
https://www.npmjs.com/package/gulp-imagemin/
Gulp-Imagemin

40. Minificar arquivos .CSS.
npm install --save-dev gulp-cssmin
https://www.npmjs.com/package/gulp-cssmin
Gulp-Cssmin

41. Minificar arquivos .HTML.
npm install --save-dev gulp-htmlmin
https://www.npmjs.com/package/gulp-htmlmin/
Gulp-Htmlmin

42. Mais métodos:

43. Compilar arquivos .LESS.
npm install --save-dev gulp-less
https://www.npmjs.com/package/gulp-less/
Gulp-Less

44. Compilar arquivos .SASS.
npm install --save-dev gulp-sass
https://www.npmjs.com/package/gulp-sass/
Gulp-Sass

45. Compilar arquivos .STYL.
npm install --save-dev gulp-stylus
https://www.npmjs.com/package/gulp-stylus/
Gulp-Stylus

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:

53. ● http://gulpjs.com/
● http://gulpjs.com/plugins/
● https://www.npmjs.com/
● http://perf-tooling.today/
Links úteis:

54. ● https://gist.github.com/YanMagale/f897e1101a1fc60743db
● https://github.com/YanMagale/gulp_stardart
Links úteis:

55. OBRIGADO!
Github:https://github.com/yanmagale
Twitter:https://twitter.com/yaanmagale