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

downloads 2013

100k

200k

300k

downloads 2013

novoutsetagojuljunmaiabrmarfevjan

automatizamos?por que

repetitivominimizar trabalho

detalhesmuitos

para lembrar

conversão

frameworkse libs

compilação

linting

testes

minificação

complexosútil para projetos

rodar testespré-processadores:devjs/css lintweb serverscaffoldingotimizar imagenscriar spriteslive reloading

minificação e obfuscaçãoconcatenaçãopré-processadores:prodgerar releasedeploy

dev

prod

eficiência!produtividade!

paz deespí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": "dave-fulero", "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({ pkg: grunt.file.readJSON(‘package.json’), uglify: {/* configuração da tarefa */} }); grunt.loadNpmTasks(‘grunt-contrib-uglify’); grunt.registerTask(‘default’, [‘uglify’]);}

Gruntfile.jsconfiguração

grunt.initConfig({ uglify: { options: { banner: ‘/* dave fulêro */\n’ }, build: { src: ‘src/<%= pkg.name %>.js’, dest: ‘build/<%= pkg.name %>.min.js’ } }});

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.scss widget.css

$ 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

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

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

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

watchno Gruntfile.js

testespré-processadoresjs/css lintcriar spriteslive reloadingconcatenação

tarefas comuns para watch

na práticaglobo esporte

setup

6 semanas!

faça suas escolhas sabiamente

globo .com

/talentosgithub.com/globocom/

IWantToWorkAtGloboCom

obrigado!

obrigado!

/almirfilho

/almirfilho

/davidsonfellipe

/davidsonfellipe

obrigado!