gruntesse cara é o

@almirfilho@davidsonfellipe

@almirfilho

@davidsonfellipe

globo .com

do workflowrei

o

front-end

linha de comando

nodejs

automatizador de tarefas

o grunt não é o único

ant java

make shell

cake coffeescript

rake ruby

100k

200k

300k

downloads 2013

novoutsetagojuljunmaiabrmarfevjan

400k

dez

100k

200k

300k

downloads 2013-14

novoutsetagojuljunmaiabrmarfevjan

400k

dez

500k

600k

700k

mai 2014

automatizamos?por que

repetitivominimizar trabalho

detalhesmuitos

para lembrar

conversão

frameworks e libs

compilação

linting

testes

minificação

complexosútil para projetos

rodar testes pré-processadores:dev js/css lint web server scaffolding criar sprites live reloading

otimizar imagens concatenação pré-processadores:prod minificação e obfuscação gerar release deploy

dev

prod

eficiência!produtividade!

paz de espírito

gruntiniciando com

node.js & npmprimeiro as coisas primeiras

grunt-cliinstalação global

instalação local

configuração

configuração

grunt & tools

package.json

Gruntfile.js

$ npm install -g grunt-cli

grunt-cliinstalação global

{ "name": “lusac-noob", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify": "~0.2.2" } }

package.jsonconfiguração

$ npm install

grunt & toolsinstalação local

--save-dev

$ npm install nome-pacote --save-dev

module.exports = function(grunt){ grunt.initConfig({ uglify: {/* config da tarefa */}, jasmine: {/* config da tarefa */}, compass: {/* config da tarefa */} }); grunt.loadNpmTasks(‘grunt-contrib-uglify’); grunt.loadNpmTasks(‘grunt-contrib-jasmine’); grunt.loadNpmTasks(‘grunt-contrib-compass’); }

Gruntfile.jsconfiguração

grunt.initConfig({ uglify: { options: { banner: ‘/* dave fulêro */\n’ }, build: { src: ‘src/app.js’, dest: ‘build/app.min.js’ } }, jasmine: {/* config da tarefa */}, compass: {/* config da tarefa */} });

grunt.registerTask(‘build’, [ ‘jasmine’, ‘uglify’, ‘compass’ ]); !

grunt.registerTask(‘run’, [ ‘build’, ‘connect’ ]); !

grunt.registerTask(‘default’, ['run']);

popquem é

concatenaçãode arquivos

a.js

e.js

i.js

o.js

u.js

vogais.js

$ npm install grunt-contrib-concat --save-dev

grunt-contrib-concato cara que concatena seus arquivos

grunt.initConfig({ concat: { options: { separator: ';', }, dist: { src: ['src/a.js', 'src/e.js'], dest: 'build/vogais.js', } } });

concatno Gruntfile.js

$ grunt concat

concatenação

rodando manualmente

obfuscação e minificação

de scripts

all.min.jsall.js

var toSeconds = function(hour) { !

return hour * 3600; !};

var toSeconds = function(a) { !

return a * 3600; !};

var toSeconds=function(a){return a*3600;};

obfuscação

minificação

$ npm install grunt-contrib-uglify --save-dev

grunt-contrib-uglifyo cara que comprime seus arquivos

grunt.initConfig({ uglify: { build: { src: 'src/all.js', dest: 'build/all.min.js' } } });

uglifyno Gruntfile.js

$ grunt uglify

obfuscação e minificação

rodando manualmente

pré-processadoresde código

widget.scsswidget.cs

s

$ npm install grunt-contrib-compass --save-dev

grunt-contrib-compasso cara que compila seu sass

grunt.initConfig({ compass: { dev: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img',

generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }});

compassno Gruntfile.js

grunt.initConfig({ compass: { dev: { /* ... */ }, prod: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img',

generatedImagesDir: 'build/img', outputStyle: 'compressed', noLineComments: true

}}}});

compassno Gruntfile.js

$ grunt compass:dev

compilação de sass

$ grunt compass:prod

rodando manualmente

pré-processadores

grunt-contrib-sasssass

stylus

less

coffeescript

grunt-contrib-stylus

grunt-contrib-less

grunt-contrib-coffee

testesautomatizados

specs

sucesso

erro

$ npm install grunt-contrib-jasmine --save-dev

grunt-contrib-jasmineo cara que testa seu código e te avisa

grunt.initConfig({ jasmine: { src: 'src/**/*.js', options: { specs: 'spec/*Spec.js', helpers: 'spec/*Helper.js' } } });

jasmineno Gruntfile.js

$ grunt jasmine

rodando manualmentetestes automatizados

suites de testes

grunt-contrib-jasminejasmine

mocha

qunit

grunt-simple-mocha

grunt-contrib-qunit

watchfique de olho

widget.scss

widget.css

save file

all.min.jsall.js

uglify

compass

$ npm install grunt-contrib-watch --save-dev

grunt-contrib-watcho cara que vigia tudo para você

grunt.initConfig({ watch: { scripts: { files: ['src/**/*.js'], tasks: ['concat:scripts', 'uglify'] } } });

watchno Gruntfile.js

concatenação js/css lint testes criar sprites pré-processadores live reloading

tarefas comuns para watch

na práticaglobo esporte

setup

6 semanas!

faça suas escolhas sabiamente

obrigado!

/almirfilho

/almirfilho

/davidsonfellipe

/davidsonfellipe