Automatize suas tarefas: conheça o GulpJS.

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 GulpJS, que não só irá automatizar as nossas tarefas, como ira contribuir com a evolução de nossos projetos. Preocupe-se com o que realmente importa: o seu projeto e o resultado final.

Automatize suas tarefas: conheça o GulpJS.

Transcript

1. Hello Gulp Conheça o mundo da automatização de tarefas.
2. “Não é o mais forte que sobrevive, nem o mais inteligente, mas o que melhor se adapta às mudanças. “ (Charles Darwin)
5. 09/09/2013 . . . 05/11/2014
6. 09/09/2013 . . . 05/11/2014
7. As linguagens e ferramentas que utilizamos também evoluem.
8. • Quanto maior a evolução das linguagens e ferramentas, maiores são as possibilidades. • Quanto mais possibilidades, mais opções. • Quanto mais opções, mais formas para resolver um problema.
10. 2005-2006 2011
12. O que é É uma plataforma construída sobre o motor JavaScript do Google Chrome (V8) , para facilmente construir aplicações de rede rápidas e escaláveis. (http://nodebr.com/o-que-e-node-js/)
13. O que é Com ele, conseguimos desenvolver nossas aplicaçãoes, utilizando apenas a linguagem Javascript.
14. Indo além • Npm: Gerenciador de pacotes • package.json
15. O que ele trouxe ?? O que veio após o Node JS ??
18. O que é: • Ferramenta para a automatização de tarefas, feita em Javascript. • Esta ferramenta funciona em cima do NodeJS
19. O que é necessário ? • Instalar os módulos desejados. • gulpfile.js • Configurar nossas tarefas.
20. Automatizar …
21. Por que devemos automatizar ?? • Nosso tempo é curto. • Temos várias tasks para nos preocupar. • Não vamos lembrar de tudo
22. Por que devemos automatizar ?? • Evitar fazer as mesmas tarefas várias vezes. • Economia de Tempo • Manter o foco no que realmente importa: o projeto e o resultado final.
23. • Minificação de Arquivos • Concatenação de Arquivos • Pre-processar CSS O que podemos utilizar ?
24. • Otimizar Imagens • Live Reload • Tarefas Personalizadas O que podemos utilizar ?
25. gulp-uglify • Minificar arquivos var uglify = require('gulp-uglify'); gulp.task('compress', function() { gulp.src('lib/*.js') .pipe(uglify()) .pipe(gulp.dest('dist')) });
26. gulp-concat • Concatenar arquivos var concat = require('gulp-concat'); gulp.task('scripts', function() { gulp.src('./lib/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist/')) });
27. gulp-jshint • Qualidade de código var jshint = require('gulp-jshint'); var gulp = require('gulp'); gulp.task('lint', function() { return gulp.src('./lib/*.js') .pipe(jshint()) .pipe(jshint.reporter('YOUR_REPORTER_HERE')); });
29. gulp-watch • Acompanhar modificações nos arquivos var gulp = require('gulp'), watch = require('gulp-watch'); gulp.task('default', function () { gulp.src('css/**/*.css') .pipe(watch('css/**/*.css', function(files) { return files.pipe(gulp.dest('./one/')); })) .pipe(gulp.dest('./two/')); // `one` and `two` will contain same files });
30. Mas … é só isso ??
31. http://gulpjs.com/plugins/ Indo além
32. Em que ganhamos ? Quais as vantagens ? • Qualidade • Performance(Diminuímos requests e o tamanho dos arquivos)
33. Em que ganhamos ? Quais as vantagens ? • Organização • Tempo
34. Tudo isso e muito mais …. … com apenas 1 ferramenta.
36. Os nossos projetos agradecem. O usuário agradece.
37. Let’s Practice It’s Demo Time
38. Referências https://www.npmjs.org/package/gulp-uglify/ https://www.npmjs.org/package/gulp-watch/ https://www.npmjs.org/package/gulp-jshint/ http://gulpjs.com/ http://nodejs.org/ http://tableless.com.br/gulp-o-novo-automatizador/#. UuAJqdJTtQI http://blog.caelum.com.br/bye-bye-grunt-js-hello-gulp-js/
39. Referências - Imagens http://boieco.blogspot.com.br/2011/12/deu- merda-na-evolucao-do-homem.html http://br.freepik.com/fotos-gratis/bolo-com- chantilly--cereja--spoon--festa_404149.htm http://www.reactiongifs.com/magic-3/
40. Obrigado! https://speakerdeck.com/yanmagale