Workflow para desenvolvimento mobile usando grunt.js

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
<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/

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
downloads
600k
400k
200k
oct nov dec jan feb mar apr may jun jul aug

20. COMO
COMEÇAR ?

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

22. configurar node?

23. $ 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

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
$ npm install nome-pacote --save-dev
MAKEFILE
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
$ npm install grunt-contrib-compass --save-dev
MAKEFILE
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
watch
widget.scss widget.css

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

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

47. $ grunt concurrent
imagemin:{
join: ['newer:sass:dev', 'newer:concat'],
lint: ['newer:jshint', 'newer:csslint'],
optim: ['newer:uglify', 'newer:imagemin']
};
MAKEFILE
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. obrigado
fellipe.com/talks
github.com/davidsonfellipe
twitter.com/davidsonfellipe