Automatizando tarefas com grunt - O que era chato não é mais
Iniciando com Yeoman, Grunt e Bower
-
Upload
mateus-padua -
Category
Internet
-
view
1.223 -
download
1
description
Transcript of 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: [email protected]: 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