esse cara é o grunt
TRANSCRIPT
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!