Esse cara é o grunt
-
Upload
almir-filho -
Category
Software
-
view
130 -
download
1
description
Transcript of Esse cara é o grunt
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