Workflow para desenvolvimento Web & Mobile usando grunt.js

2,213 views

Published on

Workflow para desenvolvimento mobile usando grunt.js

Published in: Software
2 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total views
2,213
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
23
Comments
2
Likes
13
Embeds 0
No embeds

No notes for slide

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

×