workflow para desenvolvimento mobile usando grunt.js
DESCRIPTION
Workflow para desenvolvimento mobile usando grunt.jsTRANSCRIPT
WORKFLOW PARA
DESENVOLVIMENTO
MOBILE USANDO
GRUNT.JSdavidson fellipe
front-end engineer na globo.com
- HTML ~ 2001
- front-end engineer
- globo.com ~ 2010
- mais em fellipe.com
me
POR QUE
AUTOMATIZAMOS?
PREGUIÇOSOS
GRANDES
PROBLEMAS PARA
RESOLVER
TASK RUNNERS
GRUNT NÃO
É O ÚNICO
MAKE
ANT
RAKE
CAKE
GULP
SHELL
JAVA
RUBY
COFFEE
JS
ANT
MAKEFILE
<target name="js-compile-all" description="Compile JavaScript files with Closure" unless="skip-js-compile">
<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>
</target>xml
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
http://i1-news.softpedia-static.com/images/news2/Three-of-the-Windows-Users-Fears-and-Misconceptions-About-Linux-427770-2.jpg
VAMOS DE GRUNT?
<3
grunt.js
- fácil de usar
- grande número de plugins
- imensa comunidade open source
VIA LINHA DE COMANDO
USA NODE.JS
grunt.js
tasks
- testes
- pré-processadores
- js/css lint
- criar sprites
- concatenação
- otimização de imagens
200k
400k
600k
DOWNLOADS 2013/14
mayaprmarfebjandecnovaugjuljunmay
http://npm-stat.vorba.ch/charts.html?package=grunt
COMO
COMEÇAR ?
instalação
- instalar NODE + NPM
- $ npm install -g grunt-cli
configurar node?
$ make grunt-config
MAKEFILE
grunt-config:
@echo "✖ installing node..."; brew install node;
@echo '✖ installing npm...'; sudo curl https://npmjs.org/install.sh -k | sh;
@echo '✖ installing grunt...'; sudo npm install -g grunt-cli;
@sudo npm i --save-dev
make
package.json
{
"name": "poll",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.5",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-watch": "~0.5.3",
"load-grunt-tasks": "~0.2.0",
"grunt-contrib-compass": "~0.6.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-shell": "~0.6.1"
}
}js
instalando definições
MAKEFILE
$ sudo npm i --save-dev
terminal
.gitignore
MAKEFILE
.DS_Store
...
node_modules
Gruntfile.json
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), pathBase: 'poll/static/poll/',
pathSrc: '<%= pathBase %>src/',
pathBuild: '<%= pathBase %>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
INSTALE O
LOAD-GRUNT-TASKS
$ npm install grunt-phonegap --save-dev
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
-- save-dev
MAKEFILE
$ npm install nome-pacote --save-dev
terminal
task exemplogrunt-contrib-compass
widget.scss widget.css
grunt-contrib-compass
MAKEFILE
$ npm install grunt-contrib-compass --save-dev
terminal
package.json
MAKEFILE
{
"name": "projeto",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.2",
"load-grunt-tasks": "~0.2.0",
"grunt-contrib-compass": "~0.6.0"
}
}
js
taskcompass:dev
MAKEFILE
grunt.initConfig({
compass: {
dev: {
options: {
sassDir: 'src/scss',
cssDir: 'build/css',
imagesDir: 'src/img',
generatedImagesDir: 'build/img'
}
},
prod: { /* ... */ }
}});js
taskcompass: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
executando
$ grunt compass:dev
$ grunt compass:prod
grunt-contrib-watch
widget.scss widget.css
watch
taskwatch
MAKEFILE
grunt.initConfig({
watch: {
build: {
files: ['src/**/*.{scss, js}'],
tasks: [
'compass:dev', 'concat', 'uglify'
]
}
}
}); js
executando
$ grunt watch
grunt-phonegap
- npm install grunt-phonegap --save-dev
- wrapping para Phonegap 3.0 CLI
https://github.com/logankoester/grunt-phonegap
- fellipe.com/talks
- github.com/davidsonfellipe
- twitter.com/davidsonfellipe
obrigado