Esse cara é o grunt - Speaker Deck

Slide 1

Slide 1 text

grunt esse cara é o @almirfilho @davidsonfellipe

Slide 2

Slide 2 text

@almirfilho @davidsonfellipe

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

do workflow rei o front-end

Slide 5

Slide 5 text

linha de comando nodejs automatizador de tarefas

Slide 6

Slide 6 text

o grunt não é o único

Slide 7

Slide 7 text

ant java make shell cake coffeescript rake ruby

Slide 8

Slide 8 text

100k 200k 300k downloads 2013 nov out set ago jul jun mai abr mar fev jan 400k dez

Slide 9

Slide 9 text

100k 200k 300k downloads 2013-14 nov out set ago jul jun mai abr mar fev jan 400k dez 500k 600k 700k mai 2014

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

automatizamos? por que

Slide 12

Slide 12 text

repetitivo minimizar trabalho

Slide 13

Slide 13 text

detalhes muitos para lembrar

Slide 14

Slide 14 text

conversão frameworks e libs compilação linting testes minificação

Slide 15

Slide 15 text

complexos útil para projetos

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

eficiência! produtividade!

Slide 18

Slide 18 text

paz de espírito

Slide 19

Slide 19 text

grunt iniciando com

Slide 20

Slide 20 text

node.js & npm primeiro as coisas primeiras

Slide 21

Slide 21 text

grunt-cli instalação global instalação local configuração configuração grunt & tools package.json Gruntfile.js

Slide 22

Slide 22 text

$ npm install -g grunt-cli grunt-cli instalação global

Slide 23

Slide 23 text

{ "name": “lusac-noob", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify": "~0.2.2" } } package.json configuração

Slide 24

Slide 24 text

$ npm install grunt & tools instalação local

Slide 25

Slide 25 text

--save-dev $ npm install nome-pacote --save-dev

Slide 26

Slide 26 text

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.js configuração

Slide 27

Slide 27 text

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 */} });

Slide 28

Slide 28 text

grunt.registerTask(‘build’, [ ‘jasmine’, ‘uglify’, ‘compass’ ]); ! grunt.registerTask(‘run’, [ ‘build’, ‘connect’ ]); ! grunt.registerTask(‘default’, ['run']);

Slide 29

Slide 29 text

pop quem é

Slide 30

Slide 30 text

concatenação de arquivos a.js e.js i.js o.js u.js vogais.js

Slide 31

Slide 31 text

$ npm install grunt-contrib-concat --save-dev grunt-contrib-concat o cara que concatena seus arquivos

Slide 32

Slide 32 text

grunt.initConfig({ concat: { options: { separator: ';', }, dist: { src: ['src/a.js', 'src/e.js'], dest: 'build/vogais.js', } } }); concat no Gruntfile.js

Slide 33

Slide 33 text

$ grunt concat concatenação rodando manualmente

Slide 34

Slide 34 text

obfuscação e minificação de scripts all.min.j s all.js

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

$ npm install grunt-contrib-uglify --save-dev grunt-contrib-uglify o cara que comprime seus arquivos

Slide 37

Slide 37 text

grunt.initConfig({ uglify: { build: { src: 'src/all.js', dest: 'build/all.min.js' } } }); uglify no Gruntfile.js

Slide 38

Slide 38 text

$ grunt uglify obfuscação e minificação rodando manualmente

Slide 39

Slide 39 text

pré-processadores de código widget.scss widget.cs s

Slide 40

Slide 40 text

$ npm install grunt-contrib-compass --save-dev grunt-contrib-compass o cara que compila seu sass

Slide 41

Slide 41 text

grunt.initConfig({ compass: { dev: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }}); compass no Gruntfile.js

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

$ grunt compass:dev compilação de sass $ grunt compass:prod rodando manualmente

Slide 44

Slide 44 text

pré-processadores grunt-contrib-sass sass stylus less coffeescript grunt-contrib-stylus grunt-contrib-less grunt-contrib-coffee

Slide 45

Slide 45 text

testes automatizados specs sucess o erro

Slide 46

Slide 46 text

$ npm install grunt-contrib-jasmine --save-dev grunt-contrib-jasmine o cara que testa seu código e te avisa

Slide 47

Slide 47 text

grunt.initConfig({ jasmine: { src: 'src/**/*.js', options: { specs: 'spec/*Spec.js', helpers: 'spec/*Helper.js' } } }); jasmine no Gruntfile.js

Slide 48

Slide 48 text

$ grunt jasmine rodando manualmente testes automatizados

Slide 49

Slide 49 text

suites de testes grunt-contrib-jasmine jasmine mocha qunit grunt-simple-mocha grunt-contrib-qunit

Slide 50

Slide 50 text

watch fique de olho widget.scss widget.cs s save file all.min.j s all.js uglify compass

Slide 51

Slide 51 text

$ npm install grunt-contrib-watch --save-dev grunt-contrib-watch o cara que vigia tudo para você

Slide 52

Slide 52 text

grunt.initConfig({ watch: { scripts: { files: ['src/**/*.js'], tasks: ['concat:scripts', 'uglify'] } } }); watch no Gruntfile.js

Slide 53

Slide 53 text

concatenação js/css lint testes criar sprites pré-processadores live reloading tarefas comuns para watch