iniciando com yeoman, grunt e bower

fluxo de desenvolvimento

Instale o Node.js para ter acesso ao npm(Node Packaged Modules)

http://nodejs.org/necessário para instalar o Grunt e o Bower

Após instalar o nodejs, digite na console:

$ npm install -g yo

para instalar o yeoman. Isto irá instalar o Grunt e o Bower automaticamente para você.

Generators

$ npm install -g generator-webapp

Para instalar o default web application generator, que irá criar toda a estrutura de pastas e arquivos necessários para o projeto. Este generator contém o HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap

Criar um projeto novo

$ yo webapp

com isso criamos um projeto novo a partir do zero com toda estrutura e configurações necessárias$ bower cache clean (necessário caso o passo acima não funcione)$ npm cache clean && npm update -g yo (necessário caso o passo acima não funcione)

hello word

$ grunt serve

Agora vamos iniciar o projeto. Ao rodar o comando acima, subimos um server e ativamos o liveReload. Com o LiveReload podemos trabalhar sem precisar dar F5 toda hora no browser, basta salvar um arquivo para atualizar automaticamente.

Listando os pacotes instalados

$ bower list

Adicionando um novo pacote

# Instala o pacote e salva no arquivo bower.json$ bower install respond --save

a opção --save grava no arquivo bower.json que o pacote foi instalado. É uma boa prática para ter uma lista de tudo que há no projeto e fazer futuros updates.

Listando os pacotes novamente

$ bower list

como podem observar o pacote “respond” está listado acima, pois o mesmo está relacionado no arquivo “bower.json” e fisicamente na pasta “bower_components”

Atualizando um pacote

abra o arquivo bower.json e coloque latest na propriedade jquery e depois rode o comando:$ bower update jquery

Criando um build de produção final otimizado pronto para publicação

$ grunt

o conteúdo será colocado dentro da pasta “dist”

OBRIGADOemail: mateuspaduaweb@gmail.comlinkedin: www.linkedin.com/in/mateuspaduawebface: /mateus.padua.3site: www.mateuspaduaweb.com.br

link desta apresentação: http://pt.slideshare.net/mateuspadua3/iniciando-com-yeoman-grunt-e-bower