Esse cara é o Grunt

Transcript

1. grunt
   esse cara é o
   @almirfilho
   @davidsonfellipe
   

   View Slide

2. View Slide

3. @almirfilho
   @davidsonfellipe
   

   View Slide

4. globo
   .com
   

   View Slide

5. do workflow
   rei
   o
   front-end
   

   View Slide

6. linha de comando
   nodejs
   automatizador de tarefas
   

   View Slide

7. o grunt não
   é o único
   

   View Slide

8. ant java
   make shell
   cake coffeescript
   rake ruby
   

   View Slide

9. downloads 2013
   

   View Slide

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

    View Slide

11. View Slide

12. automatizamos?
    por que
    

    View Slide

13. repetitivo
    minimizar trabalho
    

    View Slide

14. detalhes
    muitos
    para
    lembrar
    

    View Slide

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

    View Slide

16. complexos
    útil para projetos
    

    View Slide

17. 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
    dev
    prod
    

    View Slide

18. eficiência!
    produtividade!
    

    View Slide

19. paz de
    espírito
    

    View Slide

20. grunt
    iniciando com
    

    View Slide

21. node.js & npm
    primeiro as coisas primeiras
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. 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’]);
    }
    Gruntfile.js
    configuração
    

    View Slide

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

    View Slide

29. pop
    quem é
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. $ grunt concat
    concatenação
    rodando manualmente
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

45. testes
    automatizados
    specs
    sucesso
    erro
    

    View Slide

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

    View Slide

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

    View Slide

48. $ grunt jasmine
    rodando manualmente
    testes automatizados
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. na prática
    globo esporte
    setup
    

    View Slide

55. 6 semanas!
    

    View Slide

56. faça suas escolhas
    sabiamente
    

    View Slide

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

    View Slide

58. obrigado!
    

    View Slide

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

    View Slide

60. obrigado!
    

    View Slide