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

Workflow para desenvolvimento web e mobile usando gruntjs

Workflow para desenvolvimento web e mobile usando gruntjs

Davidson Fellipe

May 31, 2014
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. WORKFLOW PARA
    DESENVOLVIMENTO
    MOBILE USANDO
    GRUNT.JS
    davidson fellipe
    senior front-end engineer na globo.com

    View full-size slide

  2. me
    html desde 2001
    senior front-end engineer
    globo.com ~ 2010
    mais em fellipe.com

    View full-size slide

  3. POR QUE
    AUTOMATIZAMOS?

    View full-size slide

  4. GRANDES
    PROBLEMAS PARA
    RESOLVER

    View full-size slide

  5. PREGUIÇOSO
    !==
    EFICIENTE

    View full-size slide

  6. GESTÃO DE DEPENDÊNCIAS,
    FRAMEWORKS MVC, TESTES,
    ANALISADORES DE QUALIDADE
    DE CÓDIGO, TASK RUNNERS,
    PERFORMANCE

    View full-size slide

  7. TASK RUNNERS

    View full-size slide

  8. VAMOS DE GRUNT?

    View full-size slide

  9. GRUNT NÃO
    É O ÚNICO

    View full-size slide

  10. MAKE
    ANT
    RAKE
    CAKE
    GULP
    SHELL
    JAVA
    RUBY
    COFFEE
    JS

    View full-size slide

  11. ANT
    MAKEFILE

    Compiling JS files in ${input.scripts.dir} in closure...










    Finished compiling JS files
    xml
    http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

    View full-size slide

  12. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

    View full-size slide

  13. grunt.js
    fácil de usar
    grande número de plugins
    imensa comunidade open source
    via linha de comando
    usa node.js

    View full-size slide

  14. tasks
    testes
    pré-processadores
    jshint/csslint
    criar sprites
    concatenação
    otimização de imagens

    View full-size slide

  15. https://github.com/gruntjs/grunt
    8420 STARS
    967 FORKS

    View full-size slide

  16. http://npm-stat.vorba.ch/charts.html?package=grunt
    200k
    400k
    600k
    aug
    jul
    jun
    may
    apr
    mar
    feb
    jan
    dec
    nov
    oct
    downloads

    View full-size slide

  17. COMO
    COMEÇAR ?

    View full-size slide

  18. instalação node+npm
    $ npm install -g grunt-cli

    View full-size slide

  19. configurar node?

    View full-size slide

  20. $ make grunt-config
    MAKEFILE
    grunt-config:
    @brew install node; #node
    @sudo curl https://npmjs.org/install.sh -k|sh;#npm
    @sudo npm install -g grunt-cli; #grunt
    @npm i --save-dev #dependencias
    make

    View full-size slide

  21. package
    .json {
    "name": "poll",
    "version": "0.0.1",
    "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-watch": "~0.5.3",
    "load-grunt-tasks": "~0.2.0",
    "grunt-shell": “~0.6.1"
    }
    }
    js

    View full-size slide

  22. instale com -- save-dev
    MAKEFILE
    $ npm install nome-pacote --save-dev
    terminal

    View full-size slide

  23. .gitignore
    MAKEFILE
    .DS_Store
    ...
    node_modules

    View full-size slide

  24. Gruntfile
    .json
    module.exports = function(grunt) {
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),


    pathSrc: 'src/',
    pathBuild: 'build/',
    compass: {},
    shell: {}
    });
    !
    grunt.loadNpmTasks(‘grunt-contrib-compass’);
    grunt.loadNpmTasks(‘grunt-contrib-shell’);
    grunt.loadNpmTasks(‘grunt-contrib-uglify’);
    grunt.registerTask('build', ['compass:min',
    'shell']);
    !
    };
    js

    View full-size slide

  25. INSTALE O
    LOAD-GRUNT-TASKS
    $ npm install load-grunt-tasks --save-dev

    View full-size slide

  26. Gruntfile
    .json
    module.exports = function(grunt) {
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),


    pathBase: 'static/poll/',
    compass: {},
    minify: {},
    uglify: {},
    shell: {}
    });
    // Load all tasks
    require('load-grunt-tasks')(grunt);
    grunt.registerTask('build', ['compass:min',
    'uglify',
    'shell']);
    };
    js

    View full-size slide

  27. $ grunt concat
    MAKEFILE
    concat:{
    dist: {
    src: ['js/*.js'],
    dest: 'js/all.js'
    }
    };
    js

    View full-size slide

  28. grunt-contrib-compass
    a.scss
    e.scss
    i.scss
    o.scss
    u.scss
    vogais.css

    View full-size slide

  29. grunt-contrib-compass
    MAKEFILE
    $ npm install grunt-contrib-compass --save-
    dev
    terminal

    View full-size slide

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

    View full-size slide

  31. $ grunt compass:prod
    MAKEFILE
    grunt.initConfig({
    compass: {
    dev: { /* ... */ },
    prod: {
    options: {
    sassDir: 'src/scss',
    cssDir: 'build/css',
    imagesDir: 'src/img',
    generatedImagesDir: 'build/img',
    outputStyle: 'compressed',
    noLineComments: true
    }}}});
    js

    View full-size slide

  32. executando
    $ grunt compass:dev
    $ grunt compass:prod

    View full-size slide

  33. grunt-contrib-watch
    widget.scss widget.css
    watch

    View full-size slide

  34. $ grunt watch
    MAKEFILE
    grunt.initConfig({
    watch: {
    build: {
    files: [‘src/**/*.{scss, sass, js}'],
    tasks: [
    'compass:dev', 'concat', 'uglify'
    ]
    }
    }
    });
    js

    View full-size slide

  35. WATCH APENAS
    ARQUIVOS
    MODIFICADOS

    View full-size slide

  36. newer:nomeDaTask
    MAKEFILE
    grunt.initConfig({
    watch: {
    build: {
    files: [‘src/**/*.{scss, sass, js}'],
    tasks: [
    'newer:compass:dev', 'newer:concat', 'newer:uglify'
    ]
    }
    }
    });
    js

    View full-size slide

  37. $ grunt csslint
    MAKEFILE
    csslint:{
    lax: {
    options: {
    csslintrc: '.csslintrc'
    },
    src: ['css/*.css']
    }
    }; js

    View full-size slide

  38. $ grunt jshint
    MAKEFILE
    jshint: {
    options: {
    jshintrc: '.jshintrc'
    },
    all: ['js/*.js']
    };
    js

    View full-size slide

  39. $ grunt uglify
    MAKEFILE
    uglify: {
    dist: {
    files: {
    'js/all.min.js': ['js/all.js']
    }
    }
    }; js

    View full-size slide

  40. $ grunt imagemin
    MAKEFILE
    imagemin: {
    dist: {
    files: [{
    expand: true,
    cwd: 'img',
    src: '{,*/}*.{png,jpg,jpeg}',
    dest: 'img'
    }]}}; js

    View full-size slide

  41. $ grunt complexity
    MAKEFILE
    complexity: {
    src: ['<%= path %>js/*.js’],
    options: {
    breakOnErrors: true,
    errorsOnly: false,
    cyclomatic: [4, 8, 12],
    halstead: [10, 15, 20],
    maintainability: 100,
    hideComplexFunctions: false
    }}
    js

    View full-size slide

  42. $ grunt complexity
    MAKEFILE
    Running "complexity:generic" (complexity) task
    ✗ src/js/c.js ███ 82.923
    ✗ src/js/c.js:11 - .init is too complicated
    Cyclomatic: 21
    Halstead: 105.1875
    | Effort: 1.5177e+5
    | Volume: 1442.9
    | Vocabulary: 17
    ✓ src/js/b.js ███████ 141.28
    js

    View full-size slide

  43. https://github.com/vigetlabs/grunt-complexity

    View full-size slide

  44. $ grunt concurrent
    MAKEFILE
    imagemin:{
    join: ['newer:sass:dev', 'newer:concat'],
    lint: ['newer:jshint', 'newer:csslint'],
    optim: ['newer:uglify', 'newer:imagemin']
    };
    js

    View full-size slide

  45. GRUNT.JS
    +
    PHONEGAP

    View full-size slide

  46. grunt-phonegap
    npm install phonegap -g
    wrapping para Phonegap 3.0 CLI
    https://github.com/logankoester/grunt-phonegap

    View full-size slide

  47. $ grunt phonegap
    MAKEFILE
    phonegap: {
    config: {
    root: 'www',
    config: 'www/config.xml',
    cordova: '.cordova',
    html : 'index.html', // (Optional) You may change this to any other.html
    path: 'phonegap',
    cleanBeforeBuild: true // when false the build path doesn't get regenerated
    plugins: ['/local/path/to/plugin', 'http://example.com/path/to/plugin.git'],
    platforms: ['android'],
    maxBuffer: 200, // You may need to raise this for iOS.
    verbose: false,
    releases: 'releases',
    releaseName: function(){
    var pkg = grunt.file.readJSON('package.json');
    return(pkg.name + '-' + pkg.version);
    }
    debuggable: false, js

    View full-size slide

  48. features
    App Icons
    versionCode
    Android Debugging
    splash screen
    permissões
    credenciais do build.phonegap.com
    mais em http://goo.gl/ozi4pf

    View full-size slide

  49. https://github.com/davidsonfellipe/grunt-workflow

    View full-size slide

  50. fellipe.com/talks
    github.com/davidsonfellipe
    twitter.com/davidsonfellipe
    obrigado

    View full-size slide