Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Esse cara é o Grunt
Davidson Fellipe
December 15, 2013
Programming
9
540
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
92
O melhor da monitoração de web performance
fellipe
0
330
Guia do Front-end das galáxias
fellipe
3
210
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
86
Como é trabalhar na Globo.com?
fellipe
3
80
Guia prático de desenvolvimento front-end para django devs
fellipe
1
110
Practical guide for front-end development for Django Devs
fellipe
0
51
It's Javascript Time
fellipe
6
410
Frontend Engineers: Passado, presente e futuro
fellipe
2
170
Other Decks in Programming
See All in Programming
From Java 11 to 17 and beyond
josepaumard
0
280
C言語でメモリ管理を考えた話
hkawai
0
180
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
250
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
130
WindowsコンテナDojo:準備編
oniak3ibm
PRO
0
450
CLIツールにSwift Concurrencyを適用させようとしている話
417_72ki
3
120
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
420
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
300
Let's make a contract: the art of designing a Java API
mariofusco
0
150
Go API クライアントの実装 〜Go Conference に載せれなかったTIPS〜
yyoshiki41
0
180
Jetpack DataStore
djain2405
1
170
About Type Syntax Proposal
quramy
1
690
Featured
See All Featured
What the flash - Photography Introduction
edds
61
9.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Optimizing for Happiness
mojombo
365
63k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
314
19k
Building Applications with DynamoDB
mza
83
4.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
420
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
4 Signs Your Business is Dying
shpigford
169
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
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!