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 full-size slide

  2. @almirfilho
    @davidsonfellipe

    View full-size slide

  3. do workflow
    rei
    o
    front-end

    View full-size slide

  4. linha de comando
    nodejs
    automatizador de tarefas

    View full-size slide

  5. o grunt não
    é o único

    View full-size slide

  6. ant java
    make shell
    cake coffeescript
    rake ruby

    View full-size slide

  7. downloads 2013

    View full-size slide

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

    View full-size slide

  9. automatizamos?
    por que

    View full-size slide

  10. repetitivo
    minimizar trabalho

    View full-size slide

  11. detalhes
    muitos
    para
    lembrar

    View full-size slide

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

    View full-size slide

  13. complexos
    útil para projetos

    View full-size slide

  14. 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 full-size slide

  15. eficiência!
    produtividade!

    View full-size slide

  16. paz de
    espírito

    View full-size slide

  17. grunt
    iniciando com

    View full-size slide

  18. node.js & npm
    primeiro as coisas primeiras

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. $ grunt concat
    concatenação
    rodando manualmente

    View full-size slide

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

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  41. testes
    automatizados
    specs
    sucesso
    erro

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. $ grunt jasmine
    rodando manualmente
    testes automatizados

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. na prática
    globo esporte
    setup

    View full-size slide

  51. faça suas escolhas
    sabiamente

    View full-size slide

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

    View full-size slide

  53. obrigado!
    /almirfilho
    /almirfilho
    /davidsonfellipe
    /davidsonfellipe

    View full-size slide