Workflow para desenvolvimento web e mobile usando gruntjs

Transcript

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

   View Slide

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

   View Slide

3. POR QUE
   AUTOMATIZAMOS?
   

   View Slide

4. GRANDES
   PROBLEMAS PARA
   RESOLVER
   

   View Slide

5. View Slide

6. PREGUIÇOSO
   !==
   EFICIENTE
   

   View Slide

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

   View Slide

8. TASK RUNNERS
   

   View Slide

9. VAMOS DE GRUNT?
   

   View Slide

10. View Slide

11. GRUNT NÃO
    É O ÚNICO
    

    View Slide

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

    View Slide

13. 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 Slide

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

    View Slide

15. <3
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. 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 Slide

20. COMO
    COMEÇAR ?
    

    View Slide

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

    View Slide

22. configurar node?
    

    View Slide

23. $ 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 Slide

24. 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 Slide

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

    View Slide

26. .gitignore
    MAKEFILE
    .DS_Store
    ...
    node_modules
    

    View Slide

27. 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 Slide

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

    View Slide

29. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. $ 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. WATCH APENAS
    ARQUIVOS
    MODIFICADOS
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. $ 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 Slide

45. $ 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 Slide

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

    View Slide

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

    View Slide

48. GRUNT.JS
    +
    PHONEGAP
    

    View Slide

49. View Slide

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

    View Slide

51. $ 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 Slide

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

    View Slide

53. View Slide

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

    View Slide

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

    View Slide