Grunt é uma ferramenta para automatizar tarefas como concatenação, minificação, compilação de pré-processadores, testes e watch. Ele permite configurar essas tarefas no Gruntfile.js e executá-las individualmente ou em sequência. Módulos como grunt-contrib-uglify, grunt-contrib-compass e grunt-contrib-jasmine adicionam funcionalidades específicas ao Grunt.

1. grunt
esse cara é o
@almirfilho
@davidsonfellipe

2. @almirfilho
@davidsonfellipe

3. globo
.com

4. do workflow
rei
o
front-end

5. linhadecomando
nodejs
automatizadordetarefas

6. o grunt não
é o único

7. ant java
make shell
cake coffeescript
rake ruby

8. 100k
200k
300k
downloads 2013
novoutsetagojuljunmaiabrmarfevjan
400k
dez

9. 100k
200k
300k
downloads 2013-14
novoutsetagojuljunmaiabrmarfevjan
400k
dez
500k
600k
700k
mai
2014

11. automatizamos?
por que

12. repetitivo
minimizar trabalho

13. detalhesmuitos
para lembrar

14. conversão
frameworks
e libs
compilação
linting
testes
minificação

15. complexos
útil para projetos

16. rodar testes
pré-processadores:dev
js/css lint
web server
scaffolding
criar sprites
live reloading
otimizar imagens
concatenação
pré-processadores:prod
minificação e obfuscação
gerar release
deploy
dev
prod

17. eficiência!
produtividade!

18. paz de
espírito

19. grunt
iniciando com

20. node.js & npm
primeiro as coisas primeiras

21. grunt-cliinstalação global
instalação local
configuração
configuração
grunt & tools
package.json
Gruntfile.js

22. $ npm install -g grunt-cli
grunt-cli
instalação global

23. {
"name": “lusac-noob",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-uglify": "~0.2.2"
}
}
package.json
configuração

24. $ npm install
grunt & tools
instalação local

25. --save-dev
$ npm install nome-pacote --save-dev

26. module.exports = function(grunt){
grunt.initConfig({
uglify: {/* config da tarefa */},
jasmine: {/* config da tarefa */},
compass: {/* config da tarefa */}
});
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-jasmine’);
grunt.loadNpmTasks(‘grunt-contrib-compass’);
}
Gruntfile.js
configuração

27. grunt.initConfig({
uglify: {
options: {
banner: ‘/* dave fulêro */n’
},
build: {
src: ‘src/app.js’,
dest: ‘build/app.min.js’
}
},
jasmine: {/* config da tarefa */},
compass: {/* config da tarefa */}
});

28. grunt.registerTask(‘build’, [
‘jasmine’,
‘uglify’,
‘compass’
]);
!
grunt.registerTask(‘run’, [
‘build’,
‘connect’
]);
!
grunt.registerTask(‘default’, ['run']);

29. pop
quem é

30. concatenação
de arquivos
a.js
e.js
i.js
o.js
u.js
vogais.js

31. $ npm install grunt-contrib-concat --save-dev
grunt-contrib-concat
o cara que concatena seus arquivos

32. grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/a.js', 'src/e.js'],
dest: 'build/vogais.js',
}
}
});
concat
no Gruntfile.js

33. $ grunt concat
concatenação
rodando manualmente

34. obfuscação e
minificação
de scripts
all.min.j
sall.js

35. var toSeconds = function(hour) {
!
return hour * 3600;
!
};
var toSeconds = function(a) {
!
return a * 3600;
!
};
var toSeconds=function(a){return a*3600;};
obfuscação
minificação

36. $ npm install grunt-contrib-uglify --save-dev
grunt-contrib-uglify
o cara que comprime seus arquivos

37. grunt.initConfig({
uglify: {
build: {
src: 'src/all.js',
dest: 'build/all.min.js'
}
}
});
uglify
no Gruntfile.js

38. $ grunt uglify
obfuscação e minificação
rodando manualmente

39. pré-processadores
de código
widget.scss
widget.cs
s

40. $ npm install grunt-contrib-compass --save-dev
grunt-contrib-compass
o cara que compila seu sass

41. grunt.initConfig({
compass: {
dev: {
options: {
sassDir: 'src/scss',
cssDir: 'build/css',
imagesDir: 'src/img',
generatedImagesDir: 'build/img'
}
},
prod: { /* ... */ }
}});
compass
no Gruntfile.js

42. grunt.initConfig({
compass: {
dev: { /* ... */ },
prod: {
options: {
sassDir: 'src/scss',
cssDir: 'build/css',
imagesDir: 'src/img',
generatedImagesDir: 'build/img',
outputStyle: 'compressed',
noLineComments: true
}}}});
compass
no Gruntfile.js

43. $ grunt compass:dev
compilação de sass
$ grunt compass:prod
rodando manualmente

44. pré-processadores
grunt-contrib-sasssass
stylus
less
coffeescript
grunt-contrib-stylus
grunt-contrib-less
grunt-contrib-coffee

45. testes
automatizados
specs
sucess
o
erro

46. $ npm install grunt-contrib-jasmine --save-dev
grunt-contrib-jasmine
o cara que testa seu código e te avisa

47. grunt.initConfig({
jasmine: {
src: 'src/**/*.js',
options: {
specs: 'spec/*Spec.js',
helpers: 'spec/*Helper.js'
}
}
});
jasmine
no Gruntfile.js

48. $ grunt jasmine
rodando manualmente
testes automatizados

49. suites de testes
grunt-contrib-jasminejasmine
mocha
qunit
grunt-simple-mocha
grunt-contrib-qunit

50. watch
fique de olho
widget.scss
widget.cs
s
save file
all.min.j
sall.js
uglify
compass

51. $ npm install grunt-contrib-watch --save-dev
grunt-contrib-watch
o cara que vigia tudo para você

52. grunt.initConfig({
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['concat:scripts', 'uglify']
}
}
});
watch
no Gruntfile.js

53. concatenação
js/css lint
testes
criar sprites
pré-processadores
live reloading
tarefas comuns para
watch

54. na prática
globo esporte
setup

55. 6 semanas!

56. faça suas escolhas
sabiamente

57. obrigado!
/almirfilho
/almirfilho
/davidsonfellipe
/davidsonfellipe