Workflow para desenvolvimento web e mobile usando gruntjs

Workflow para desenvolvimento web e mobile usando gruntjs

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

May 31, 2014
Tweet

Transcript

  1. WORKFLOW PARA DESENVOLVIMENTO MOBILE USANDO GRUNT.JS davidson fellipe senior front-end

    engineer na globo.com
  2. me html desde 2001 senior front-end engineer globo.com ~ 2010

    mais em fellipe.com
  3. POR QUE AUTOMATIZAMOS?

  4. GRANDES PROBLEMAS PARA RESOLVER

  5. None
  6. PREGUIÇOSO !== EFICIENTE

  7. GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC, TESTES, ANALISADORES DE QUALIDADE DE

    CÓDIGO, TASK RUNNERS, PERFORMANCE
  8. TASK RUNNERS

  9. VAMOS DE GRUNT?

  10. None
  11. GRUNT NÃO É O ÚNICO

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

  13. ANT MAKEFILE <target name="js-compile-all" description="Compile JavaScript files with Closure" unless="skip-js-

    compile"> <echo>Compiling JS files in ${input.scripts.dir} in closure...</echo> <apply executable="java" dest="${output.scripts.dir}"> <arg value="-jar"/> <arg path="${jar.lib.dir}/closure-compiler.jar"/> <arg line="--js"/> <srcfile/> <arg line="--js_output_file"/> <targetfile/> <fileset dir="${output.scripts.dir}" includes="**/*-main.debug.js" /> <mapper type="glob" from="*-main.debug.js" to="*-main.min.js"/> </apply> <echo>Finished compiling JS files</echo> </target> xml http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  14. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg

  15. <3

  16. grunt.js fácil de usar grande número de plugins imensa comunidade

    open source via linha de comando usa node.js
  17. tasks testes pré-processadores jshint/csslint criar sprites concatenação otimização de imagens

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

  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
  20. COMO COMEÇAR ?

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

  22. configurar node?

  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
  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
  25. instale com -- save-dev MAKEFILE $ npm install nome-pacote --save-dev

    terminal
  26. .gitignore MAKEFILE .DS_Store ... node_modules

  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
  28. INSTALE O LOAD-GRUNT-TASKS $ npm install load-grunt-tasks --save-dev

  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
  30. $ grunt concat MAKEFILE concat:{ dist: { src: ['js/*.js'], dest:

    'js/all.js' } }; js
  31. grunt-contrib-compass a.scss e.scss i.scss o.scss u.scss vogais.css

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

  33. $ grunt compass:dev MAKEFILE grunt.initConfig({ compass: { dev: { options:

    { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }}); js
  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
  35. executando $ grunt compass:dev $ grunt compass:prod

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

  37. $ grunt watch MAKEFILE grunt.initConfig({ watch: { build: { files:

    [‘src/**/*.{scss, sass, js}'], tasks: [ 'compass:dev', 'concat', 'uglify' ] } } }); js
  38. WATCH APENAS ARQUIVOS MODIFICADOS

  39. newer:nomeDaTask MAKEFILE grunt.initConfig({ watch: { build: { files: [‘src/**/*.{scss, sass,

    js}'], tasks: [ 'newer:compass:dev', 'newer:concat', 'newer:uglify' ] } } }); js
  40. $ grunt csslint MAKEFILE csslint:{ lax: { options: { csslintrc:

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

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

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

    expand: true, cwd: 'img', src: '{,*/}*.{png,jpg,jpeg}', dest: 'img' }]}}; js
  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
  45. $ grunt complexity MAKEFILE Running "complexity:generic" (complexity) task ✗ src/js/c.js

    ███ 82.923 ✗ src/js/c.js:11 - <anonymous>.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
  46. https://github.com/vigetlabs/grunt-complexity

  47. $ grunt concurrent MAKEFILE imagemin:{ join: ['newer:sass:dev', 'newer:concat'], lint: ['newer:jshint',

    'newer:csslint'], optim: ['newer:uglify', 'newer:imagemin'] }; js
  48. GRUNT.JS + PHONEGAP

  49. None
  50. grunt-phonegap npm install phonegap -g wrapping para Phonegap 3.0 CLI

    https://github.com/logankoester/grunt-phonegap
  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
  52. features App Icons versionCode Android Debugging splash screen permissões credenciais

    do build.phonegap.com mais em http://goo.gl/ozi4pf
  53. None
  54. https://github.com/davidsonfellipe/grunt-workflow

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