Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Workflow para desenvolvimento Web & Mobile usando grunt.js

2,485 views

Published on

Workflow para desenvolvimento mobile usando grunt.js

Published in: Software

Workflow para desenvolvimento Web & Mobile usando grunt.js

  1. 1. WORKFLOW PARA DESENVOLVIMENTO MOBILE USANDO GRUNT.JS davidson fellipe senior front-end engineer na globo.com
  2. 2. me html desde 2001 senior front-end engineer globo.com ~ 2010 mais em fellipe.com
  3. 3. POR QUE AUTOMATIZAMOS?
  4. 4. GRANDES PROBLEMAS PARA RESOLVER
  5. 5. PREGUIÇOSO !== EFICIENTE
  6. 6. GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC, TESTES, ANALISADORES DE QUALIDADE DE CÓDIGO, TASK RUNNERS, PERFORMANCE
  7. 7. TASK RUNNERS
  8. 8. VAMOS DE GRUNT?
  9. 9. GRUNT NÃO É O ÚNICO
  10. 10. MAKE ANT RAKE CAKE GULP SHELL JAVA RUBY COFFEE JS
  11. 11. ANT <cotamprgielet ">n ame="js-compile-all" description="Compile JavaScript files with Closure" unless="skip-js- <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> MAKEFILE </target> xml http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  12. 12. http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
  13. 13. <3
  14. 14. grunt.js fácil de usar grande número de plugins imensa comunidade open source via linha de comando usa node.js
  15. 15. tasks testes pré-processadores jshint/csslint criar sprites concatenação otimização de imagens
  16. 16. https://github.com/gruntjs/grunt 8420 STARS 967 FORKS
  17. 17. http://npm-stat.vorba.ch/charts.html?package=grunt downloads 600k 400k 200k oct nov dec jan feb mar apr may jun jul aug
  18. 18. COMO COMEÇAR ?
  19. 19. instalação node+npm $ npm install -g grunt-cli
  20. 20. configurar node?
  21. 21. $ make grunt-config 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 MAKEFILE make
  22. 22. 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
  23. 23. instale com -- save-dev $ npm install nome-pacote --save-dev MAKEFILE terminal
  24. 24. .gitignore MAKEFILE .DS_Store ... node_modules
  25. 25. 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
  26. 26. INSTALE O LOAD-GRUNT-TASKS $ npm install load-grunt-tasks --save-dev
  27. 27. 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
  28. 28. $ grunt concat MAKEFILE concat:{ dist: { src: ['js/*.js'], dest: 'js/all.js' } }; js
  29. 29. grunt-contrib-compass a.scss e.scss i.scss o.scss u.scss vogais.css
  30. 30. grunt-contrib-compass $ npm install grunt-contrib-compass --save-dev MAKEFILE terminal
  31. 31. $ grunt compass:dev MAKEFILE grunt.initConfig({ compass: { dev: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }}); js
  32. 32. $ 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
  33. 33. executando $ grunt compass:dev $ grunt compass:prod
  34. 34. grunt-contrib-watch watch widget.scss widget.css
  35. 35. $ grunt watch MAKEFILE grunt.initConfig({ watch: { build: { files: [‘src/**/*.{scss, sass, js}'], tasks: [ 'compass:dev', 'concat', 'uglify' ] } } }); js
  36. 36. WATCH APENAS ARQUIVOS MODIFICADOS
  37. 37. newer:nomeDaTask MAKEFILE grunt.initConfig({ watch: { build: { files: [‘src/**/*.{scss, sass, js}'], tasks: [ 'newer:compass:dev', 'newer:concat', 'newer:uglify' ] } } }); js
  38. 38. $ grunt csslint MAKEFILE csslint:{ lax: { options: { csslintrc: '.csslintrc' }, src: ['css/*.css'] } }; js
  39. 39. $ grunt jshint MAKEFILE jshint: { options: { jshintrc: '.jshintrc' }, all: ['js/*.js'] }; js
  40. 40. $ grunt uglify MAKEFILE uglify: { dist: { files: { 'js/all.min.js': ['js/all.js'] } } }; js
  41. 41. $ grunt imagemin MAKEFILE imagemin: { dist: { files: [{ expand: true, cwd: 'img', src: '{,*/}*.{png,jpg,jpeg}', dest: 'img' }]}}; js
  42. 42. $ 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
  43. 43. $ grunt complexity 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 MAKEFILE ✓ src/js/b.js ███████ 141.28 js
  44. 44. https://github.com/vigetlabs/grunt-complexity
  45. 45. $ grunt concurrent imagemin:{ join: ['newer:sass:dev', 'newer:concat'], lint: ['newer:jshint', 'newer:csslint'], optim: ['newer:uglify', 'newer:imagemin'] }; MAKEFILE js
  46. 46. GRUNT.JS + PHONEGAP
  47. 47. grunt-phonegap npm install phonegap -g wrapping para Phonegap 3.0 CLI https://github.com/logankoester/grunt-phonegap
  48. 48. $ 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
  49. 49. features App Icons versionCode Android Debugging splash screen permissões credenciais do build.phonegap.com mais em http://goo.gl/ozi4pf
  50. 50. https://github.com/davidsonfellipe/grunt-workflow
  51. 51. obrigado fellipe.com/talks github.com/davidsonfellipe twitter.com/davidsonfellipe

×