Este documento introduz a ferramenta Gulp para automatização de tarefas, explicando seus benefícios como economia de tempo e melhoria da qualidade dos projetos. É demonstrado como Gulp pode ser usado para minificar, concatenar e monitorar arquivos através de plugins como gulp-uglify, gulp-concat e gulp-watch.

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. O que podemos utilizar ?
● Minificação de Arquivos
● Concatenação de Arquivos
● Pre-processar CSS

24. O que podemos utilizar ?
● Otimizar Imagens
● Live Reload
● Tarefas Personalizadas

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. Indo além
http://gulpjs.com/plugins/

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