gruntesse cara é o@almirfilho@davidsonfellipe
View Slide
@almirfilho@davidsonfellipe
globo.com
do workflowreiofront-end
linha de comandonodejsautomatizador de tarefas
o grunt nãoé o único
ant javamake shellcake coffeescriptrake ruby
downloads 2013
100k200k300kdownloads 2013novoutsetagojuljunmaiabrmarfevjan
automatizamos?por que
repetitivominimizar trabalho
detalhesmuitosparalembrar
conversãoframeworkse libscompilaçãolintingtestesminificação
complexosútil para projetos
rodar testespré-processadores:devjs/css lintweb serverscaffoldingotimizar imagenscriar spriteslive reloadingminificação e obfuscaçãoconcatenaçãopré-processadores:prodgerar releasedeploydevprod
eficiência!produtividade!
paz deespírito
gruntiniciando com
node.js & npmprimeiro as coisas primeiras
grunt-cliinstalação globalinstalação localconfiguraçãoconfiguraçãogrunt & toolspackage.jsonGruntfile.js
$ npm install -g grunt-cligrunt-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 installgrunt & 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/.js’,dest: ‘build/.min.js’}}});
popquem é
concatenaçãode arquivosa.jse.jsi.jso.jsu.jsvogais.js
$ npm install grunt-contrib-concat --save-devgrunt-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 concatconcatenaçãorodando manualmente
obfuscação eminificaçãode scriptsall.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çãominificação
$ npm install grunt-contrib-uglify --save-devgrunt-contrib-uglifyo cara que comprime seus arquivos
grunt.initConfig({uglify: {build: {src: 'src/all.js',dest: 'build/all.min.js'}}});uglifyno Gruntfile.js
$ grunt uglifyobfuscação e minificaçãorodando manualmente
pré-processadoresde códigowidget.scss widget.css
$ npm install grunt-contrib-compass --save-devgrunt-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:devcompilação de sass$ grunt compass:prodrodando manualmente
pré-processadoresgrunt-contrib-sasssassstyluslesscoffeescriptgrunt-contrib-stylusgrunt-contrib-lessgrunt-contrib-coffee
testesautomatizadosspecssucessoerro
$ npm install grunt-contrib-jasmine --save-devgrunt-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 jasminerodando manualmentetestes automatizados
suites de testesgrunt-contrib-jasminejasminemochaqunitgrunt-simple-mochagrunt-contrib-qunit
watchfique de olhowidget.scsswidget.csssave fileall.min.jsall.js
$ npm install grunt-contrib-watch --save-devgrunt-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çãotarefas comuns parawatch
na práticaglobo esportesetup
6 semanas!
faça suas escolhassabiamente
globo.com/talentosgithub.com/globocom/IWantToWorkAtGloboCom
obrigado!
obrigado!/almirfilho/almirfilho/davidsonfellipe/davidsonfellipe