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

https://github.com/gruntjs/grunt

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