Your SlideShare is downloading. ×
Automação de tarefas com grunt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Automação de tarefas com grunt

3,450

Published on

Slides do talk de automação de tarefas de frontend com GruntJS apresentado no DevCast do dia 24/9/13

Slides do talk de automação de tarefas de frontend com GruntJS apresentado no DevCast do dia 24/9/13

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,450
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
10
Comments
1
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WHY GOOD PROGRAMMERS ARE LAZY AND DUMB? Philipp Lenssen
  • 2. PORQUE PREGUIÇOSO? Preguiçosos, porque apenas programadores preguiçosos irão querer escrever o tipo de ferramentas que podem substituí- los no final. Preguiçosos, porque somente um programador preguiçoso vai evitar escrever código monótono e repetitivo – assim evitando redundância, o inimigo da mantenabilidade e flexibilidade de software. No mais, as ferramentas e processos que vêm disso, disparados pela preguiça, irão aumentar a produção.
  • 3. E PORQUE IDIOTA? Isso porque para ele encontrar as melhores soluções a um problema, precisa manter uma mente aberta e pensar fora da caixa. De certa forma, isso leva à mentalidade de uma criança, incrivelmente criativa porque ele nunca ouviu “não” como resposta.
  • 4. E ISSO ME LEMBRA... RUBBER DUCK DEBUGGING
  • 5. THE PRAGMATIC PROGRAMMER BY ANDREW HUNT AND DAVID THOMAS Andrew Hunt é um dos 17 autores do manifesto ágil. David Thomas é o autor da famosa frase "DRY" | Don't Repeat Yourself.
  • 6. GRUNTJS O GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITO EM JAVASCRIPT.
  • 7. MAS QUE TIPO DE TAREFAS O GRUNT VAI GERENCIAR PRA MIM? Testar Minificar Concatenar Compilar
  • 8. E PORQUE USAR O GRUNT? A comunidade do grunt é enorme e cresce a cada dia, já são centenas de plugins do grunt que fazem praticamente tudo que você precisa.
  • 9. E QUEM USA O GRUNT? A Adobe usa o grunt no brackets. O jQuery usa o grunt no jQuery no jQuery UI e no QUnit O twitter usa o Grunt no TweetDeck e no Typeahead O Apontador.com usa o grunt nos seus projetos. ... E BUSCANDO O TERMO GRUNTJS NO GITHUB EU ENCONTREI: 476 repositorios públicos 898 issues (a maioria pedindo para instalar o gruntjs nos projetos)
  • 10. E POR ONDE COMEÇAR?
  • 11. O grunt e os plugins do grunt são instalados e controlados pelo NPM, o gerenciador de pacotes do Node.js Para começar você tem que ter o node e o npm instalados na sua máquina.
  • 12. MAS AFINAL, O QUE É NODEJS? O NodeJS é uma plataforma que foi desenvolvida em cima do V8 que é o motor de javascript do Chrome, aonde você pode escrever aplicações escaláveis em javascript.
  • 13. E COMO EU INSTALO O NODEJS? Instalar o NodeJS é muito fácil: http://nodejs.org/ (Current Version: v0.10.18)
  • 14. O NPM é o gerenciador de pacotes do Node.js, é por ele que você pode facilmente instalar programas em nodejs na sua máquina. https://npmjs.org/ O NPM não precisa ser instalado, ele vem com o nodejs.
  • 15. npm install -g grunt-cli sudo npm install -g grunt-cli VAMOS AO GRUNT: Para começar a usar o grunt, você tem que instalar o grunt-cli que é a interface de linha de comando do grunt: OU
  • 16. Ele vai adicionar o comando grunt no ao seu terminal e permitir que você use esse comando em qualquer lugar. Porém o grunt-cli não instala o grunt em sí, o que o grunt-cli faz é rodar a versão do grunt que está instalada no seu projeto, o que permite que você tenha varias versões do grunt instaladas na mesma maquina simultaneamente.
  • 17. COMO ELE FUNCIONA? Cada vez que você executa o grunt-cli ele usa o sistema de require do node pra encontrar um grunt instalado, o que permite que você tenha o grunt instalado nas pastas do seu projeto. Se ele encontrar um grunt instalado na pasta que você rodou o comando, ele carrega as bibliotecas do seu grunt aplicas as configurações dele e roda as tarefas que você pediu para ele rodar.
  • 18. npm init Para usar o grunt nós precisamos de 2 arquivos básicos: O package.json e o Gruntfile.js (ou .coffee) e ambos devem ficar na pasta raiz do projeto.
  • 19. npm install grunt --save-dev. AGORA SÓ PRECISAMOS INSTALAR O GRUNT NO NOSSO PROJETO:
  • 20. Temos então a ultima versão do grunt instalado, só precisamos criar o nosso Gruntfile.js. O Gruntfile.js é composto pelas seguintes partes: A função "wrapper". As configurações do projeto e das tarefas. O carregamento dos plugins e das tarefas. As suas tarefas customizadas.
  • 21. module.exports = function(grunt) { 'use strict'; }; A FUNÇÃO WRAPPER USA O OBJETO MODULE.EXPORTS DO NODEJS.
  • 22. module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); }; Ela vai receber um objeto grunt com um metodo initConfig onde você vai colocar as configurações do seu projeto e das tasks. As configurações do nosso projeto podemos passar para o grunt pelo arquivo package.json:
  • 23. npm install grunt-contrib-connect --save-dev. VAMOS ENTÃO INSTALAR UM PLUGIN DO GRUNT VIA NPM
  • 24. module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); //carregando plugins grunt.loadNpmTasks('grunt-contrib-connect'); }; Agora vamos carregar o plugin:
  • 25. module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), connect: { server: { options: { port: 9001 } } } }); //carregando plugins grunt.loadNpmTasks('grunt-contrib-connect'); //registrando tarefas grunt.registerTask('createserver', ['connect:server']); }; E finalmente vamos registrar uma tarefa para o nosso plugin:
  • 26. RAFAEL LYRA front end developer at apontador.com github: twitter: linkedin: rafaellyra @rafaellyra br.linkedin.com/in/rafaellyra/

×