O documento descreve como automatizar tarefas com a ferramenta Gulp.js. Ele explica que Gulp ajuda a automatizar tarefas repetitivas como concatenar arquivos, minificar e rodar testes. Também fornece exemplos de como usar Gulp para rodar testes JavaScript, minificar HTML, CSS e JavaScript e otimizar imagens. Recomenda pré-processadores e plugins úteis e encoraja a explorar mais funcionalidades de Gulp.

1. Automatizando tarefas com Gulp.js
João Gabriel Lima
@jgabriel_lima
linkedin.com/in/joaogabriellima

2. linkedin.com/in/joaogabriellima
IT Hacker, Docente, Instrutor em
treinamentos, Co-fundador da Huddle3, Senior
AI Engineer na NexusEdge.
Doutorando em Computação Aplicada com
ênfase em Inteligência Artificial, Mineração de
Dados e BigData.

3. http://gulpjs.com/

4. Para que serve e por que eu devo utilizar?

5. Automatizadores de tarefa são ferramentas que ajudam
programadores a realizarem tarefas repetitivas e
essenciais para o desenvolvimento como: concatenação
de arquivos, minificação, testes...

6. Fácil de usar:
Ao preferir código ao invés de configuração, Gulp mantém simples o que é
simples e faz tarefas complexas mais bem administráveis.
Eficiente:
Gulp usa o poder de streams do Node, o que permite builds muitos mais rápidos e dispensa a necessidade
de gravação de arquivos intermediários em disco.
Alta qualidade:
As diretrizes estritas para plugins do Gulp garantem que seus plugins permaneçam simples e trabalhem
da maneira que se espera.
Fácil de aprender:
Com uma API mínima, aprende-se a trabalhar com o Gulp quase que na hora!

7. Vamos falar de pré-processadores

8. Alguns exemplos de pré-processadores
Markdown
HAML
Slim
Jade
CoffeeKup
Sass
Less
Stylus
Compass
CoffeeScript
LiveScript
TypeScript
Babel
Processing.js

9. Alguns exemplos

10. http://dillinger.io/

15. Iniciando os trabalhos
Pré-requisitos

16. nodejs.org

17. npm install -g gulp
gulp -v

18. LET’S CODE

19. Exemplo 1:
Realizando testes no javascript

20. /exemplo1
- index.html
- script.js
- style.css
npm init
npm install gulp --save-dev
npm install gulp-jshint --save-dev

21. Exemplo 2:
Minificando Html, CSS, JS

22. var minifyHTML = require('gulp-minify-html');
gulp.task('minify-html', function() {
var opts = {
conditionals: true,
spare:true
};
return gulp.src('./static/html/*.html')
.pipe(minifyHTML(opts))
.pipe(gulp.dest('./dist/'));
});

23. ● empty - remove atributos vazios
● comments - remove comentários
● conditionals - remove comentários condicionais para Internet Explorer
● spare - remove atributos redundantes
● loose - preserva os espaços em branco

24. Exemplo 3:
Otimizando Imagens

25. https://www.npmjs.com/package/gulp-imagemin

26. Exemplo 4:
Browser Sync e Watch Task

27. https://www.npmjs.com/package/gulp-deploy-ftp

28. Você não precisa fazer tudo DO ZERO...

29. https://html5boilerplate.com/

30. https://github.com/tomaszbujnowicz/html5-boilerplate-gulp-less

31. Explore mais plugins...
http://gulpjs.com/plugins/

32. Obrigado!
https://github.com/jgabriellima/aula-gulpjs-iesam

33. Automatizando tarefas com Gulp.js
João Gabriel Lima
@jgabriel_lima
linkedin.com/in/joaogabriellima