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
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
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?
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
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
54. https://github.com/davidsonfellipe/grunt-workflow
55. fellipe.com/talks github.com/davidsonfellipe twitter.com/davidsonfellipe obrigado