grunt
esse cara é o
@almirfilho
@davidsonfellipe
@almirfilho
@davidsonfellipe
globo
.com
do workflow
rei
o
front-end
linhadecomando
nodejs
automatizadordetarefas
o grunt não
é o único
ant java
make shell
cake coffeescript
rake ruby
100k
200k
300k
downloads 2013
novoutsetagojuljunmaiabrmarfevjan
400k
dez
100k
200k
300k
downloads 2013-14
novoutsetagojuljunmaiabrmarfevjan
400k
dez
500k
600k
700k
mai
2014
automatizamos?
por que
repetitivo
minimizar trabalho
detalhesmuitos
para lembrar
conversão
frameworks
e libs
compilação
linting
testes
minificação
complexos
útil para projetos
rodar testes
pré-processadores:dev
js/css lint
web server
scaffolding
criar sprites
live reloading
otimizar imagens
concat...
eficiência!
produtividade!
paz de
espírito
grunt
iniciando com
node.js & npm
primeiro as coisas primeiras
grunt-cliinstalação global
instalação local
configuração
configuração
grunt & tools
package.json
Gruntfile.js
$ npm install -g grunt-cli
grunt-cli
instalação global
{
"name": “lusac-noob",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-uglify": "~0.2.2"
}
}
p...
$ npm install
grunt & tools
instalação local
--save-dev
$ npm install nome-pacote --save-dev
module.exports = function(grunt){
grunt.initConfig({
uglify: {/* config da tarefa */},
jasmine: {/* config da tarefa */},
...
grunt.initConfig({
uglify: {
options: {
banner: ‘/* dave fulêro */n’
},
build: {
src: ‘src/app.js’,
dest: ‘build/app.min.j...
grunt.registerTask(‘build’, [
‘jasmine’,
‘uglify’,
‘compass’
]);
!
grunt.registerTask(‘run’, [
‘build’,
‘connect’
]);
!
gr...
pop
quem é
concatenação
de arquivos
a.js
e.js
i.js
o.js
u.js
vogais.js
$ npm install grunt-contrib-concat --save-dev
grunt-contrib-concat
o cara que concatena seus arquivos
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/a.js', 'src/e.js'],
dest: 'build/vogais.js',...
$ grunt concat
concatenação
rodando manualmente
obfuscação e
minificação
de scripts
all.min.j
sall.js
var toSeconds = function(hour) {
!
return hour * 3600;
!
};
var toSeconds = function(a) {
!
return a * 3600;
!
};
var toSe...
$ npm install grunt-contrib-uglify --save-dev
grunt-contrib-uglify
o cara que comprime seus arquivos
grunt.initConfig({
uglify: {
build: {
src: 'src/all.js',
dest: 'build/all.min.js'
}
}
});
uglify
no Gruntfile.js
$ grunt uglify
obfuscação e minificação
rodando manualmente
pré-processadores
de código
widget.scss
widget.cs
s
$ npm install grunt-contrib-compass --save-dev
grunt-contrib-compass
o cara que compila seu sass
grunt.initConfig({
compass: {
dev: {
options: {
sassDir: 'src/scss',
cssDir: 'build/css',
imagesDir: 'src/img',
generatedI...
grunt.initConfig({
compass: {
dev: { /* ... */ },
prod: {
options: {
sassDir: 'src/scss',
cssDir: 'build/css',
imagesDir: ...
$ grunt compass:dev
compilação de sass
$ grunt compass:prod
rodando manualmente
pré-processadores
grunt-contrib-sasssass
stylus
less
coffeescript
grunt-contrib-stylus
grunt-contrib-less
grunt-contrib-co...
testes
automatizados
specs
sucess
o
erro
$ npm install grunt-contrib-jasmine --save-dev
grunt-contrib-jasmine
o cara que testa seu código e te avisa
grunt.initConfig({
jasmine: {
src: 'src/**/*.js',
options: {
specs: 'spec/*Spec.js',
helpers: 'spec/*Helper.js'
}
}
});
ja...
$ grunt jasmine
rodando manualmente
testes automatizados
suites de testes
grunt-contrib-jasminejasmine
mocha
qunit
grunt-simple-mocha
grunt-contrib-qunit
watch
fique de olho
widget.scss
widget.cs
s
save file
all.min.j
sall.js
uglify
compass
$ npm install grunt-contrib-watch --save-dev
grunt-contrib-watch
o cara que vigia tudo para você
grunt.initConfig({
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['concat:scripts', 'uglify']
}
}
});
watch
no Gruntf...
concatenação
js/css lint
testes
criar sprites
pré-processadores
live reloading
tarefas comuns para
watch
na prática
globo esporte
setup
6 semanas!
faça suas escolhas
sabiamente
obrigado!
/almirfilho
/almirfilho
/davidsonfellipe
/davidsonfellipe
Esse cara é o grunt
Próximos SlideShares
Carregando em…5
×

Esse cara é o grunt

326 visualizações

Publicada em

♫ O cara que observa seus arquivos toda hora
O cara que te avisa quando você quebra o build
O cara que faz o reload por você
O cara que após o save, te chama
Pra dizer se o teste passou ou quebrou
Esse cara é o Grunt!

Publicada em: Software
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
326
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Esse cara é o grunt

  1. 1. grunt esse cara é o @almirfilho @davidsonfellipe
  2. 2. @almirfilho @davidsonfellipe
  3. 3. globo .com
  4. 4. do workflow rei o front-end
  5. 5. linhadecomando nodejs automatizadordetarefas
  6. 6. o grunt não é o único
  7. 7. ant java make shell cake coffeescript rake ruby
  8. 8. 100k 200k 300k downloads 2013 novoutsetagojuljunmaiabrmarfevjan 400k dez
  9. 9. 100k 200k 300k downloads 2013-14 novoutsetagojuljunmaiabrmarfevjan 400k dez 500k 600k 700k mai 2014
  10. 10. automatizamos? por que
  11. 11. repetitivo minimizar trabalho
  12. 12. detalhesmuitos para lembrar
  13. 13. conversão frameworks e libs compilação linting testes minificação
  14. 14. complexos útil para projetos
  15. 15. 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
  16. 16. eficiência! produtividade!
  17. 17. paz de espírito
  18. 18. grunt iniciando com
  19. 19. node.js & npm primeiro as coisas primeiras
  20. 20. grunt-cliinstalação global instalação local configuração configuração grunt & tools package.json Gruntfile.js
  21. 21. $ npm install -g grunt-cli grunt-cli instalação global
  22. 22. { "name": “lusac-noob", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify": "~0.2.2" } } package.json configuração
  23. 23. $ npm install grunt & tools instalação local
  24. 24. --save-dev $ npm install nome-pacote --save-dev
  25. 25. 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
  26. 26. 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 */} });
  27. 27. grunt.registerTask(‘build’, [ ‘jasmine’, ‘uglify’, ‘compass’ ]); ! grunt.registerTask(‘run’, [ ‘build’, ‘connect’ ]); ! grunt.registerTask(‘default’, ['run']);
  28. 28. pop quem é
  29. 29. concatenação de arquivos a.js e.js i.js o.js u.js vogais.js
  30. 30. $ npm install grunt-contrib-concat --save-dev grunt-contrib-concat o cara que concatena seus arquivos
  31. 31. grunt.initConfig({ concat: { options: { separator: ';', }, dist: { src: ['src/a.js', 'src/e.js'], dest: 'build/vogais.js', } } }); concat no Gruntfile.js
  32. 32. $ grunt concat concatenação rodando manualmente
  33. 33. obfuscação e minificação de scripts all.min.j sall.js
  34. 34. 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
  35. 35. $ npm install grunt-contrib-uglify --save-dev grunt-contrib-uglify o cara que comprime seus arquivos
  36. 36. grunt.initConfig({ uglify: { build: { src: 'src/all.js', dest: 'build/all.min.js' } } }); uglify no Gruntfile.js
  37. 37. $ grunt uglify obfuscação e minificação rodando manualmente
  38. 38. pré-processadores de código widget.scss widget.cs s
  39. 39. $ npm install grunt-contrib-compass --save-dev grunt-contrib-compass o cara que compila seu sass
  40. 40. grunt.initConfig({ compass: { dev: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }}); compass no Gruntfile.js
  41. 41. 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
  42. 42. $ grunt compass:dev compilação de sass $ grunt compass:prod rodando manualmente
  43. 43. pré-processadores grunt-contrib-sasssass stylus less coffeescript grunt-contrib-stylus grunt-contrib-less grunt-contrib-coffee
  44. 44. testes automatizados specs sucess o erro
  45. 45. $ npm install grunt-contrib-jasmine --save-dev grunt-contrib-jasmine o cara que testa seu código e te avisa
  46. 46. grunt.initConfig({ jasmine: { src: 'src/**/*.js', options: { specs: 'spec/*Spec.js', helpers: 'spec/*Helper.js' } } }); jasmine no Gruntfile.js
  47. 47. $ grunt jasmine rodando manualmente testes automatizados
  48. 48. suites de testes grunt-contrib-jasminejasmine mocha qunit grunt-simple-mocha grunt-contrib-qunit
  49. 49. watch fique de olho widget.scss widget.cs s save file all.min.j sall.js uglify compass
  50. 50. $ npm install grunt-contrib-watch --save-dev grunt-contrib-watch o cara que vigia tudo para você
  51. 51. grunt.initConfig({ watch: { scripts: { files: ['src/**/*.js'], tasks: ['concat:scripts', 'uglify'] } } }); watch no Gruntfile.js
  52. 52. concatenação js/css lint testes criar sprites pré-processadores live reloading tarefas comuns para watch
  53. 53. na prática globo esporte setup
  54. 54. 6 semanas!
  55. 55. faça suas escolhas sabiamente
  56. 56. obrigado! /almirfilho /almirfilho /davidsonfellipe /davidsonfellipe

×