Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Vamos Automatizar!
Conheça o Gulp JS.
● Yan Magalhães Leite.
● 21 anos,
● Desenvolvedor Web na Construsite Brasil.
● Cursando Ciências da Computação.
● Particip...
● Conceitos e primórdios da automatização.
● Por quê precisamos automatizar?
● Introdução ao Gulp.
● Principais vantagens....
“Não é o mais forte que sobrevive, nem o mais
inteligente, mas o que melhor se adapta às
mudanças.” (Charles Darwin)
A evolução é um processo natural.
A automatização é um dos resultados da
evolução.
AUTOMATIZAR???
Automação (do latim Automatus, que significa mover-se por si) é
um sistema automático de controle pelo qual os mecanismos
...
Pode ser definida como um conjunto de técnicas que podem ser
aplicadas sobre um processo, com o objetivo de torná-lo mais
...
As linguagens e ferramentas que utilizamos no
dia-a-dia, também evoluem.
● A medida em que as linguagens e ferramentas evoluem,
maiores são as possibilidades e opções.
● Quanto mais opções, maior...
● Nosso tempo é curto.
● Temos várias tarefas para nos preocupar.
● Não iremos lembrar de tudo.
● Evitar realizar tarefas ...
● Possibilidade de utilizar diversas ferramentas, simultaneamente.
● Economia de Tempo
● Manter o foco no que realmente im...
● Ant(Java)
● Rake(Ruby)
● Grunt, Gulp e Broccoli(Javascript)
https://gist.github.com/callumacrae/9231589
Alguns automatiz...
http://gulpjs.com/
● Ferramenta para a automatização de tarefas e aumentar o seu
fluxo de trabalho.
● Feito em Javascript.
● Para o seu uso é...
● Minificação de arquivos.
● Concatenação de arquivos.
● Pré-processar arquivos CSS.
● Criar sprites automaticamente.
O qu...
● Otimizar imagens.
● Checar a qualidade do nosso código.
● Live Reload.
● Executar testes de performance/unitários.
● Dep...
http://csslint.net/
http://lisperator.net/uglifyjs/
http://jshint.com/
http://lesscss.org/
http://sass-lang.com/
https://learnboost.github.io/stylus/
https://compressor.io/
https://developers.google.com/speed/pagespeed/
**Dados retirados em 12/05/2015
Gulp JS Grunt JS Broccoli JS
Criado em: 2014 Criado em: 2013 Criado em: 2014
Stars no Gith...
● Instalação do Node JS.
● Instalação do Gulp JS.
● Criação do arquivo package.json.
● Instalar os módulos necessários.
● ...
VAMOS PRATICAR.
● gulp.src
Indicamos em qual diretório e em quais arquivos queremos realizar
alguma tarefa.
● gulp.dest
Indicamos para qua...
● gulp.task
Realizamos a criação das tarefas.
● pipe()
Responsável por indicar qual o módulo deverá ser executado, para
a ...
Alguns módulos que podemos utilizar:
Minificar arquivos .JS utilizando o UglifyJS.
npm install --save-dev gulp-uglify
https://www.npmjs.com/package/gulp-uglify...
Concatenar arquivos.
npm install --save-dev gulp-concat
https://www.npmjs.com/package/gulp-concat/
Gulp-Concat
Plugin para a utlização do JS Hint.
npm install --save-dev gulp-jshint
https://www.npmjs.com/package/gulp-jshint/
Gulp-Jsh...
Reduzir o tamanho das imagens PNG,JPG, GIF e SVG.
npm install --save-dev gulp-imagemin
https://www.npmjs.com/package/gulp-...
Minificar arquivos .CSS.
npm install --save-dev gulp-cssmin
https://www.npmjs.com/package/gulp-cssmin
Gulp-Cssmin
Minificar arquivos .HTML.
npm install --save-dev gulp-htmlmin
https://www.npmjs.com/package/gulp-htmlmin/
Gulp-Htmlmin
Mais métodos:
Compilar arquivos .LESS.
npm install --save-dev gulp-less
https://www.npmjs.com/package/gulp-less/
Gulp-Less
Compilar arquivos .SASS.
npm install --save-dev gulp-sass
https://www.npmjs.com/package/gulp-sass/
Gulp-Sass
Compilar arquivos .STYL.
npm install --save-dev gulp-stylus
https://www.npmjs.com/package/gulp-stylus/
Gulp-Stylus
Visualizar as modificações rapidamente no browser.
**Necessita da extensão do livereload.
npm install --save-dev gulp-live...
Realizar o deploy para o seu servidor.
**Necessita que o rsync esteja instalado em seu computador.
***Para Windows - https...
Obter um report da nossa página segundo as métricas do
PageSpeed Insights.
npm install --save-dev psi
https://www.npmjs.co...
Obter um report da nossa página quanto ao nível de acessibilidade
que ela possui, através das recomendações do WCAG(Web
Co...
Acompanhar as alterações realizadas em seus arquivos.
npm install --save-dev gulp-watch
https://www.npmjs.com/package/gulp...
● Qualidade.
● Organização.
● Performance(Diminuímos a quantidade dos arquivos a serem
baixados pelo browser).
● Tempo.
Os...
● http://gulpjs.com/
● http://gulpjs.com/plugins/
● https://www.npmjs.com/
● http://perf-tooling.today/
Links úteis:
● https://gist.github.com/YanMagale/f897e1101a1fc60743db
● https://github.com/YanMagale/gulp_stardart
Links úteis:
OBRIGADO!
Github:https://github.com/yanmagale
Twitter:https://twitter.com/yaanmagale
Vamos automatizar! Conheça o Gulp Js
Vamos automatizar! Conheça o Gulp Js
Vamos automatizar! Conheça o Gulp Js
Vamos automatizar! Conheça o Gulp Js
Upcoming SlideShare
Loading in …5
×

Vamos automatizar! Conheça o Gulp Js

1,183 views

Published on

Nesta palestra, iremos ver por quê é necessário automatizar as nossas tarefas. Quais as vantagens? Quais os ganhos? Neste cenário, será apresentada a ferramenta Gulp JS, que não só irá automatizar as nossas tarefas, como irá contribuir com a evolução de nossos projetos. Preocupe-se com o que realmente importa: o seu projeto e o resultado final.

Published in: Technology
  • Be the first to comment

Vamos automatizar! Conheça o Gulp Js

  1. 1. Vamos Automatizar! Conheça o Gulp JS.
  2. 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. 3. ● Conceitos e primórdios da automatização. ● Por quê precisamos automatizar? ● Introdução ao Gulp. ● Principais vantagens. ● Exemplos e utilização. Agenda:
  4. 4. “Não é o mais forte que sobrevive, nem o mais inteligente, mas o que melhor se adapta às mudanças.” (Charles Darwin)
  5. 5. A evolução é um processo natural.
  6. 6. A automatização é um dos resultados da evolução.
  7. 7. AUTOMATIZAR???
  8. 8. 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:
  9. 9. 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:
  10. 10. As linguagens e ferramentas que utilizamos no dia-a-dia, também evoluem.
  11. 11. ● 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.
  12. 12. ● Nosso tempo é curto. ● Temos várias tarefas para nos preocupar. ● Não iremos lembrar de tudo. ● Evitar realizar tarefas repetidamente. Por quê precisamos automatizar?
  13. 13. ● 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?
  14. 14. ● Ant(Java) ● Rake(Ruby) ● Grunt, Gulp e Broccoli(Javascript) https://gist.github.com/callumacrae/9231589 Alguns automatizadores no mercado:
  15. 15. http://gulpjs.com/
  16. 16. ● 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:
  17. 17. ● Minificação de arquivos. ● Concatenação de arquivos. ● Pré-processar arquivos CSS. ● Criar sprites automaticamente. O que podemos utilizar?
  18. 18. ● Otimizar imagens. ● Checar a qualidade do nosso código. ● Live Reload. ● Executar testes de performance/unitários. ● Deploy. O que podemos utilizar?
  19. 19. http://csslint.net/
  20. 20. http://lisperator.net/uglifyjs/
  21. 21. http://jshint.com/
  22. 22. http://lesscss.org/
  23. 23. http://sass-lang.com/
  24. 24. https://learnboost.github.io/stylus/
  25. 25. https://compressor.io/
  26. 26. https://developers.google.com/speed/pagespeed/
  27. 27. **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.
  28. 28. ● 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:
  29. 29. VAMOS PRATICAR.
  30. 30. ● 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:
  31. 31. ● 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:
  32. 32. Alguns módulos que podemos utilizar:
  33. 33. Minificar arquivos .JS utilizando o UglifyJS. npm install --save-dev gulp-uglify https://www.npmjs.com/package/gulp-uglify/ Gulp-Uglify
  34. 34. Concatenar arquivos. npm install --save-dev gulp-concat https://www.npmjs.com/package/gulp-concat/ Gulp-Concat
  35. 35. Plugin para a utlização do JS Hint. npm install --save-dev gulp-jshint https://www.npmjs.com/package/gulp-jshint/ Gulp-Jshint
  36. 36. 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
  37. 37. Minificar arquivos .CSS. npm install --save-dev gulp-cssmin https://www.npmjs.com/package/gulp-cssmin Gulp-Cssmin
  38. 38. Minificar arquivos .HTML. npm install --save-dev gulp-htmlmin https://www.npmjs.com/package/gulp-htmlmin/ Gulp-Htmlmin
  39. 39. Mais métodos:
  40. 40. Compilar arquivos .LESS. npm install --save-dev gulp-less https://www.npmjs.com/package/gulp-less/ Gulp-Less
  41. 41. Compilar arquivos .SASS. npm install --save-dev gulp-sass https://www.npmjs.com/package/gulp-sass/ Gulp-Sass
  42. 42. Compilar arquivos .STYL. npm install --save-dev gulp-stylus https://www.npmjs.com/package/gulp-stylus/ Gulp-Stylus
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. Acompanhar as alterações realizadas em seus arquivos. npm install --save-dev gulp-watch https://www.npmjs.com/package/gulp-watch/ Gulp-Watch
  48. 48. ● Qualidade. ● Organização. ● Performance(Diminuímos a quantidade dos arquivos a serem baixados pelo browser). ● Tempo. Os benefícios:
  49. 49. ● http://gulpjs.com/ ● http://gulpjs.com/plugins/ ● https://www.npmjs.com/ ● http://perf-tooling.today/ Links úteis:
  50. 50. ● https://gist.github.com/YanMagale/f897e1101a1fc60743db ● https://github.com/YanMagale/gulp_stardart Links úteis:
  51. 51. OBRIGADO! Github:https://github.com/yanmagale Twitter:https://twitter.com/yaanmagale

×