WORKFLOW PARA 
DESENVOLVIMENTO 
MOBILE USANDO 
GRUNT.JS 
davidson fellipe 
senior front-end engineer na globo.com
me 
html desde 2001 
senior front-end engineer 
globo.com ~ 2010 
mais em fellipe.com
POR QUE 
AUTOMATIZAMOS?
GRANDES 
PROBLEMAS PARA 
RESOLVER
PREGUIÇOSO 
!== 
EFICIENTE
GESTÃO DE DEPENDÊNCIAS, 
FRAMEWORKS MVC, TESTES, 
ANALISADORES DE QUALIDADE 
DE CÓDIGO, TASK RUNNERS, 
PERFORMANCE
TASK RUNNERS
VAMOS DE GRUNT?
GRUNT NÃO 
É O ÚNICO
MAKE 
ANT 
RAKE 
CAKE 
GULP 
SHELL 
JAVA 
RUBY 
COFFEE 
JS
ANT 
<cotamprgielet ">n ame="js-compile-all" description="Compile JavaScript files with Closure" unless="skip-js- 
<echo>C...
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2....
<3
grunt.js 
fácil de usar 
grande número de plugins 
imensa comunidade open source 
via linha de comando 
usa node.js
tasks 
testes 
pré-processadores 
jshint/csslint 
criar sprites 
concatenação 
otimização de imagens
https://github.com/gruntjs/grunt 
8420 STARS 
967 FORKS
http://npm-stat.vorba.ch/charts.html?package=grunt 
downloads 
600k 
400k 
200k 
oct nov dec jan feb mar apr may jun jul a...
COMO 
COMEÇAR ?
instalação node+npm 
$ npm install -g grunt-cli
configurar node?
$ make grunt-config 
grunt-config: 
@brew install node; #node 
@sudo curl https://npmjs.org/install.sh -k|sh;#npm 
@sudo n...
package 
.json { 
"name": "poll", 
"version": "0.0.1", 
"devDependencies": { 
"grunt": "~0.4.2", 
"grunt-contrib-watch": "...
instale com -- save-dev 
$ npm install nome-pacote --save-dev 
MAKEFILE 
terminal
.gitignore 
MAKEFILE 
.DS_Store 
... 
node_modules
Gruntfile 
.json 
module.exports = function(grunt) { 
grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
pathS...
INSTALE O 
LOAD-GRUNT-TASKS 
$ npm install load-grunt-tasks --save-dev
Gruntfile 
.json 
module.exports = function(grunt) { 
grunt.initConfig({ 
pkg: grunt.file.readJSON('package.json'), 
pathB...
$ grunt concat 
MAKEFILE 
concat:{ 
dist: { 
src: ['js/*.js'], 
dest: 'js/all.js' 
} 
}; 
js
grunt-contrib-compass 
a.scss 
e.scss 
i.scss 
o.scss 
u.scss 
vogais.css
grunt-contrib-compass 
$ npm install grunt-contrib-compass --save-dev 
MAKEFILE 
terminal
$ grunt compass:dev 
MAKEFILE 
grunt.initConfig({ 
compass: { 
dev: { 
options: { 
sassDir: 'src/scss', 
cssDir: 'build/cs...
$ grunt compass:prod 
MAKEFILE 
grunt.initConfig({ 
compass: { 
dev: { /* ... */ }, 
prod: { 
options: { 
sassDir: 'src/sc...
executando 
$ grunt compass:dev 
$ grunt compass:prod
grunt-contrib-watch 
watch 
widget.scss widget.css
$ grunt watch 
MAKEFILE 
grunt.initConfig({ 
watch: { 
build: { 
files: [‘src/**/*.{scss, sass, js}'], 
tasks: [ 
'compass...
WATCH APENAS 
ARQUIVOS 
MODIFICADOS
newer:nomeDaTask 
MAKEFILE 
grunt.initConfig({ 
watch: { 
build: { 
files: [‘src/**/*.{scss, sass, js}'], 
tasks: [ 
'newe...
$ grunt csslint 
MAKEFILE 
csslint:{ 
lax: { 
options: { 
csslintrc: '.csslintrc' 
}, 
src: ['css/*.css'] 
} 
}; js
$ grunt jshint 
MAKEFILE 
jshint: { 
options: { 
jshintrc: '.jshintrc' 
}, 
all: ['js/*.js'] 
}; 
js
$ grunt uglify 
MAKEFILE 
uglify: { 
dist: { 
files: { 
'js/all.min.js': ['js/all.js'] 
} 
} 
}; js
$ grunt imagemin 
MAKEFILE 
imagemin: { 
dist: { 
files: [{ 
expand: true, 
cwd: 'img', 
src: '{,*/}*.{png,jpg,jpeg}', 
de...
$ grunt complexity 
MAKEFILE 
complexity: { 
src: ['<%= path %>js/*.js’], 
options: { 
breakOnErrors: true, 
errorsOnly: f...
$ grunt complexity 
Running "complexity:generic" (complexity) task 
✗ src/js/c.js ███ 82.923 
✗ src/js/c.js:11 - <anonymou...
https://github.com/vigetlabs/grunt-complexity
$ grunt concurrent 
imagemin:{ 
join: ['newer:sass:dev', 'newer:concat'], 
lint: ['newer:jshint', 'newer:csslint'], 
optim...
GRUNT.JS 
+ 
PHONEGAP
grunt-phonegap 
npm install phonegap -g 
wrapping para Phonegap 3.0 CLI 
https://github.com/logankoester/grunt-phonegap
$ grunt phonegap 
MAKEFILE 
phonegap: { 
config: { 
root: 'www', 
config: 'www/config.xml', 
cordova: '.cordova', 
html : ...
features 
App Icons 
versionCode 
Android Debugging 
splash screen 
permissões 
credenciais do build.phonegap.com 
mais em...
https://github.com/davidsonfellipe/grunt-workflow
obrigado 
fellipe.com/talks 
github.com/davidsonfellipe 
twitter.com/davidsonfellipe
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.js
Upcoming SlideShare
Loading in...5
×

Workflow para desenvolvimento Web & Mobile usando grunt.js

1,727

Published on

Workflow para desenvolvimento mobile usando grunt.js

Published in: Software
2 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,727
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
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
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×