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 
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
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
AAB304 - Windows Workflow Foundation - wcamb
Next
Upcoming SlideShare
AAB304 - Windows Workflow Foundation - wcamb
Next
Download to read offline and view in fullscreen.

Share

Workflow para desenvolvimento Web & Mobile usando grunt.js

Download to read offline

Workflow para desenvolvimento mobile usando grunt.js

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • samukboydoido

    Jul. 28, 2015
  • AndersonGonalves9

    Jul. 20, 2015
  • dannyeuu

    Nov. 10, 2014
  • julianamalta

    Oct. 25, 2014
  • talitacgoulart

    Sep. 9, 2014
  • brunodsgn

    Aug. 30, 2014
  • vitornogueiraa

    Aug. 30, 2014
  • renatodeluna

    Aug. 3, 2014
  • thomastargino

    Jun. 11, 2014
  • sudowilliam

    Jun. 6, 2014
  • onaSousa

    Jun. 6, 2014
  • andredsm

    Jun. 2, 2014
  • maclevison

    Jun. 1, 2014

Workflow para desenvolvimento mobile usando grunt.js

Views

Total views

2,862

On Slideshare

0

From embeds

0

Number of embeds

50

Actions

Downloads

26

Shares

0

Comments

0

Likes

13

×