Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Esse cara é o Grunt

Esse cara é o Grunt

Davidson Fellipe

December 15, 2013
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

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