Iniciando com Yeoman, Grunt e Bower

2,946 views

Published on

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

Published in: Internet

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

×