Tutorial, Instalando, Iniciando com Yeoman, Grunt e Bower, HTML5 Boilerplate, jQuery, Modernizr e Bootstrap bower install grunt serve npm install -g generator-webapp npm install -g yo yo webapp

2. fluxo de desenvolvimento

3. Instale o Node.js para ter acesso ao
npm(Node Packaged Modules)
http://nodejs.org/
necessário para instalar o Grunt e o Bower

4. 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ê.

5. 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

6. 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)

7. 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.

8. Listando os pacotes instalados
$ bower list

9. 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.

10. 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”

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

12. Criando um build de produção final
otimizado pronto para publicação
$ grunt
o conteúdo será colocado dentro da pasta
“dist”

13. OBRIGADO
email: mateuspaduaweb@gmail.com
linkedin: www.linkedin.com/in/mateuspaduaweb
face: /mateus.padua.3
site: www.mateuspaduaweb.com.br
link desta apresentação: http://pt.slideshare.
net/mateuspadua3/iniciando-com-yeoman-grunt-e-bower