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 Bo...
Após instalar o nodejs, digite na
console:
$ npm install -g yo
para instalar o yeoman. Isto irá instalar o Grunt
e o Bower...
Generators
$ npm install -g generator-webapp
Para instalar o default web application
generator, que irá criar toda a estru...
Criar um projeto novo
$ yo webapp
com isso criamos um projeto novo a partir do
zero com toda estrutura e configurações
nec...
hello word
$ grunt serve
Agora vamos iniciar o projeto. Ao rodar o comando
acima, subimos um server e ativamos o
liveReloa...
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 ...
Listando os pacotes novamente
$ bower list
como podem observar o pacote “respond” está listado
acima, pois o mesmo está re...
Atualizando um pacote
abra o arquivo bower.json e coloque latest na
propriedade jquery e depois rode o comando:
$ bower up...
Criando um build de produção final
otimizado pronto para publicação
$ grunt
o conteúdo será colocado dentro da pasta
“dist”
OBRIGADO
email: mateuspaduaweb@gmail.com
linkedin: www.linkedin.com/in/mateuspaduaweb
face: /mateus.padua.3
site: www.mate...
Iniciando com Yeoman, Grunt e Bower
Próximos SlideShares
Carregando em…5
×

Iniciando com Yeoman, Grunt e Bower

2.801 visualizações

Publicada em

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

Publicada em: Internet
0 comentários
12 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.801
No SlideShare
0
A partir de incorporações
0
Número de incorporações
33
Ações
Compartilhamentos
0
Downloads
42
Comentários
0
Gostaram
12
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Iniciando com Yeoman, Grunt e Bower

  1. 1. fluxo de desenvolvimento
  2. 2. Instale o Node.js para ter acesso ao npm(Node Packaged Modules) http://nodejs.org/ necessário para instalar o Grunt e o Bower
  3. 3. 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ê.
  4. 4. 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
  5. 5. 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)
  6. 6. 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.
  7. 7. Listando os pacotes instalados $ bower list
  8. 8. 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.
  9. 9. 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”
  10. 10. Atualizando um pacote abra o arquivo bower.json e coloque latest na propriedade jquery e depois rode o comando: $ bower update jquery
  11. 11. Criando um build de produção final otimizado pronto para publicação $ grunt o conteúdo será colocado dentro da pasta “dist”
  12. 12. 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

×