More Related Content Similar to Workflow para desenvolvimento Web & Mobile usando grunt.js (20) More from Davidson Fellipe (19) Workflow para desenvolvimento Web & Mobile usando grunt.js2. me
html desde 2001
senior front-end engineer
globo.com ~ 2010
mais em fellipe.com
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/
16. grunt.js
fácil de usar
grande número de plugins
imensa comunidade open source
via linha de comando
usa node.js
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
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
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
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
37. $ grunt watch
MAKEFILE
grunt.initConfig({
watch: {
build: {
files: [‘src/**/*.{scss, sass, js}'],
tasks: [
'compass:dev', 'concat', '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
47. $ grunt concurrent
imagemin:{
join: ['newer:sass:dev', 'newer:concat'],
lint: ['newer:jshint', 'newer:csslint'],
optim: ['newer:uglify', 'newer:imagemin']
};
MAKEFILE
js
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