[Tutorial] Gerando estrutura de aplicação web com NodeJS + Yeoman

yeoman
Yeoman

Aprendemos a instalar o NodeJS no ubuntu 14.04 LTS uns dias atrás, agora vamos entender porque o NodeJS é tão popular entre os desenvolvedores front-ends. Vamos trabalhar com alguns componentes que deixam nossa vida mais automatizada, trazendo redução de tempo na produção dos projetos realizados, e alguns eles são:

  1. Yeoman
  2. Gulp
  3. Bower
  4. Sass(Scss)
  5. jQuery
  6. Modernizr

O Conceito

Imagine só, todo projeto seja ele de estudo ou de produção tem que criar toda uma estrutura de pastas e arquivos para poder começar a trabalhar, levando em consideração que precisaremos configurar o Gulpfile.js, Bower.json, linkar jQuery,Modernizr, fazer os testes, estruturar o Sass(scss) e etc.., ufa! É um saco não é mesmo? Pensando nisso um grupo de desenvolvedores web decidiu criar algo que pudesse automatizar este processo.

Então surgiu o Yeoman, imagine que para qualquer tipo de projeto, seja ele webapp, angularJS, emberJS, backbone, wordpress, ghost, ele já cria a estrutura inicializando cada componente utilizando grunt ou gulp, bower, ruby, nodeJs, e ainda um LiveReload para evitar o tão famoso F5, eita é muita coisa heim?

Yeoman ainda faz isso:

  • Compila CoffeScript automaticamente
  • Verifica JavaScript automaticamente com JSHint
  • Minifica e faz o merge de seus scripts
  • Otimiza suas imagens
  • Faz LiveReload de sua página com um preview server local
  • Realiza testes unitários

Agora vamos ver, como podemos fazer para criar um projeto simples, um webapp, utilizando esta maravilhosa ferramenta.

O que precisamos?

Muita gente tem problemas nesta parte, ocorrem muitos erros, e o pior de tudo, a falta de dependências instaladas causam muitos transtornos.
Para resolver isso vamos tentar deixar tudo instalado, ok?

Certifique-se de ter instalado:

Node.js

Pode usar este tutorial

Git

$ sudo apt-get install git git-core libcurl4-gnutls-dev libexpat1-dev gettext libz-dev libssl-dev build-essential

Ruby

Pode usar este tutorial aqui do blog.

Compass.

$ sudo apt-get install compass

Instalando Yeoman no Ubuntu ( Linux )

A instalação é simples, porque utilizaremos o npm , então é só rodar o comando no terminal e pronto.

$ sudo npm install -g yo

Para verificar se ocorreu tudo bem, utilize

$ yo --version

Instalando Generator-Gulp-Webapp

Agora iremos instalar o gerador que utiliza o Gulp como automatizador de dependências e estruturação de diretórios, faça:

$ sudo npm install -g generator-gulp-webapp

Agora é só criar um diretório/pasta do projeto e iniciar o gulp-webapp para instalar as dependências, vamos ver na prática.

$ mkdir sample-app && cd sample-app
$ yo gulp-webapp

Com isso ele vai baixar, instalar e configurar todo e qualquer componentes ou dependência necessária para o funcionamento correto da aplicação.

Possíveis Erros

Caso você tenha instalado muito recentemente o NodeJS pode ocorrer que algum componente não seja instalado globalmente( utilizando -g ) e isso pode atrapalhar o runtime do node.

O que precisamos fazer é pedir a instalação novamente, para isso faremos o seguinte.

sudo npm install

Para o bower  inicie o $ bower init e depois só seguir os passos via terminal.

Depois de tudo instalado e sem erros, é só colocar o servidor para funcionar com gulp watch, se você não tiver, instale a extensão do Chrome LiveReload, evitando assim o famoso F5.

Para finalizar instale alguns componentes com bower para deixar sua webapp perfeita, abra o arquivo bower.json e coloque:

{
 "name": "sample-app",
 "private": true,
 "dependencies": {
  "modernizr": "~2.6.2",
  "jquery": "~1.11.0",
  "font-awesome": "~4.0.3",
  "foundation": "*"
 }
}

Depois:

bower install --save

Pronto, finalizamos nosso webapp com tudo que precisamos pra trabalhar, usando terminal, e com ferramentas que atualmente grandes empresas estão utilizando.

Dúvidas? Sugestões? Errei em alguma coisa? Deixe seu comentário. 🙂

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s