O documento descreve as funcionalidades e benefícios do Grunt, um framework para automatização de tarefas no frontend. Ele explica como configurar o Grunt para tarefas como concatenação, minificação, compilação de pré-processadores, testes automatizados e monitoramento de arquivos. Além disso, recomenda pacotes do Grunt para diferentes finalidades e dá exemplos de uso.

1. esse cara é o
grunt
@almirfilho
@davidsonfellipe

3. @davidsonfellipe
@almirfilho

4. globo
.com

5. o
rei
do workflow
front-end

6. automatizador de tarefas
linha de comando
nodejs

7. o grunt não
é o único

8. make
shell
ant
java
rake
ruby
cake
coffeescript

9. downloads 2013

10. downloads 2013
300k
200k
100k
jan
fev
mar
abr
mai
jun
jul
ago
set
out
nov

12. por que
automatizamos?

13. minimizar trabalho
repetitivo

14. muitos
para
detalhes
lembrar

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

16. útil para projetos
complexos

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

18. eficiência!
produtividade!

19. paz de
espírito

20. iniciando com
grunt

21. primeiro as coisas primeiras
node.js & npm

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

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

24. configuração
package.json
{
"name": "dave-fulero",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-uglify": "~0.2.2"
}
}

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

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

27. configuração
Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
uglify: {/* configuração da tarefa */}
});
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.registerTask(‘default’, [‘uglify’]);
}

28. grunt.initConfig({
uglify: {
options: {
banner: ‘/* dave fulêro */n’
},
build: {
src: ‘src/<%= pkg.name %>.js’,
dest: ‘build/<%= pkg.name %>.min.js’
}
}
});

29. quem é
pop

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

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

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

33. concatenação
rodando manualmente
$ grunt concat

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

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

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

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

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

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

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

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

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

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

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

45. testes
automatizados
sucesso
specs
erro

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

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

48. testes automatizados
rodando manualmente
$ grunt jasmine

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

50. watch
fique de olho
all.js
all.min.js
save file
widget.css
widget.scss

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

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

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

54. na prática
globo esporte
setup

55. 6 semanas!

56. faça suas escolhas
sabiamente

57. globo
.com
/talentos
github.com/globocom/
IWantToWorkAtGloboCom

58. obrigado!

59. obrigado!
/almirfilho
/davidsonfellipe
/almirfilho
/davidsonfellipe

60. obrigado!