Workflow para desenvolvimento web e mobile usando gruntjs

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

POR QUE AUTOMATIZAMOS?

Slide 4

Slide 4 text

GRANDES PROBLEMAS PARA RESOLVER

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

PREGUIÇOSO !== EFICIENTE

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

TASK RUNNERS

Slide 9

Slide 9 text

VAMOS DE GRUNT?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

GRUNT NÃO É O ÚNICO

Slide 12

Slide 12 text

MAKE ANT RAKE CAKE GULP SHELL JAVA RUBY COFFEE JS

Slide 13

Slide 13 text

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/

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

http://npm-stat.vorba.ch/charts.html?package=grunt 200k 400k 600k aug jul jun may apr mar feb jan dec nov oct downloads

Slide 20

Slide 20 text

COMO COMEÇAR ?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

configurar node?

Slide 23

Slide 23 text

$ 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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

.gitignore MAKEFILE .DS_Store ... node_modules

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

$ 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

Slide 35

Slide 35 text

executando $ grunt compass:dev $ grunt compass:prod

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

WATCH APENAS ARQUIVOS MODIFICADOS

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

$ 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

Slide 45

Slide 45 text

$ 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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

GRUNT.JS + PHONEGAP

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

$ 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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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