Esse cara é o grunt

1.928 visualizações

Publicada em

Publicada em: Tecnologia
2 comentários
20 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.928
No SlideShare
0
A partir de incorporações
0
Número de incorporações
25
Ações
Compartilhamentos
0
Downloads
39
Comentários
2
Gostaram
20
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Esse cara é o grunt

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

×