Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Esse cara é o Grunt
Search
Davidson Fellipe
December 15, 2013
Programming
9
770
Esse cara é o Grunt
Davidson Fellipe
December 15, 2013
Tweet
Share
More Decks by Davidson Fellipe
See All by Davidson Fellipe
Adventures from Enzyme to React Testing Library
fellipe
1
300
O melhor da monitoração de web performance
fellipe
0
420
Guia do Front-end das galáxias
fellipe
3
250
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
120
Como é trabalhar na Globo.com?
fellipe
3
100
Guia prático de desenvolvimento front-end para django devs
fellipe
1
150
Practical guide for front-end development for Django Devs
fellipe
0
79
It's Javascript Time
fellipe
6
490
Frontend Engineers: Passado, presente e futuro
fellipe
2
410
Other Decks in Programming
See All in Programming
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
630
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.5k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
800
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
230
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
11
6.5k
Goで作る、開発・CI環境
sin392
0
240
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
410
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How STYLIGHT went responsive
nonsquared
100
5.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
A designer walks into a library…
pauljervisheath
207
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Transcript
grunt esse cara é o @almirfilho @davidsonfellipe
None
@almirfilho @davidsonfellipe
globo .com
do workflow rei 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 nov out set ago jul
jun mai abr mar fev jan
None
automatizamos? por que
repetitivo minimizar trabalho
detalhes muitos 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 otimizar imagens
criar sprites live reloading minificação e obfuscação concatenação pré-processadores:prod gerar release deploy dev prod
eficiência! produtividade!
paz de espírito
grunt iniciando com
node.js & npm primeiro as coisas primeiras
grunt-cli instalação global instalação local configuração configuração grunt & tools
package.json Gruntfile.js
$ npm install -g grunt-cli grunt-cli instalação global
{ "name": "dave-fulero", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify":
"~0.2.2" } } package.json configuração
$ npm install grunt & tools instalaçã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.js configuração
grunt.initConfig({ uglify: { options: { banner: ‘/* dave fulêro */\n’
}, build: { src: ‘src/<%= pkg.name %>.js’, dest: ‘build/<%= pkg.name %>.min.js’ } } });
pop quem é
concatenação de arquivos a.js e.js i.js o.js u.js vogais.js
$ npm install grunt-contrib-concat --save-dev grunt-contrib-concat o cara que concatena
seus arquivos
grunt.initConfig({ concat: { options: { separator: ';', }, dist: {
src: ['src/a.js', 'src/e.js'], dest: 'build/vogais.js', } } }); concat no Gruntfile.js
$ grunt concat concatenação rodando manualmente
obfuscação e minificação de scripts all.min.js all.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-uglify o cara que comprime
seus arquivos
grunt.initConfig({ uglify: { build: { src: 'src/all.js', dest: 'build/all.min.js' }
} }); uglify no Gruntfile.js
$ grunt uglify obfuscação e minificação rodando manualmente
pré-processadores de código widget.scss widget.css
$ npm install grunt-contrib-compass --save-dev grunt-contrib-compass o cara que compila
seu sass
grunt.initConfig({ compass: { dev: { options: { sassDir: 'src/scss', cssDir:
'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }}); compass no Gruntfile.js
grunt.initConfig({ compass: { dev: { /* ... */ }, prod:
{ options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img', outputStyle: 'compressed', noLineComments: true }}}}); compass no Gruntfile.js
$ grunt compass:dev compilação de sass $ grunt compass:prod rodando
manualmente
pré-processadores grunt-contrib-sass sass stylus less coffeescript grunt-contrib-stylus grunt-contrib-less grunt-contrib-coffee
testes automatizados specs sucesso erro
$ npm install grunt-contrib-jasmine --save-dev grunt-contrib-jasmine o cara que testa
seu código e te avisa
grunt.initConfig({ jasmine: { src: 'src/**/*.js', options: { specs: 'spec/*Spec.js', helpers:
'spec/*Helper.js' } } }); jasmine no Gruntfile.js
$ grunt jasmine rodando manualmente testes automatizados
suites de testes grunt-contrib-jasmine jasmine mocha qunit grunt-simple-mocha grunt-contrib-qunit
watch fique de olho widget.scss widget.css save file all.min.js all.js
$ npm install grunt-contrib-watch --save-dev grunt-contrib-watch o cara que vigia
tudo para você
grunt.initConfig({ watch: { build: { files: ['src/**/*.{scss, js}'], tasks: [
'compass:dev', 'concat', 'uglify' ] } } }); watch no Gruntfile.js
testes pré-processadores js/css lint criar sprites live reloading concatenação tarefas
comuns para watch
na prática globo esporte setup
6 semanas!
faça suas escolhas sabiamente
globo .com /talentos github.com/globocom/ IWantToWorkAtGloboCom
obrigado!
obrigado! /almirfilho /almirfilho /davidsonfellipe /davidsonfellipe
obrigado!