#Workflow para frontend usando Gulp

A ideia é utilizar nesse workflow:

• Geração de CSS minificado através com mixins usando o Sass+Compass (gulp-compass);
• Gerar htmls através de includes com template engine (Handlebars), porém, o resultado final deverá ser estático;
• Levantar um servidor básico usando Express
• Fazer reload automático quando uma página for alterada (live preview)
• Testar, corrigir e minificar Javascript de Frontend
• Instalar bibliotecas e recursos utilizando Bower
• Deixar apenas como pré-requisito o Node.js, Express.js e o Gulp.js (tentar utilizar no futuro o Bourbon, que ainda não está funcional com seu grid integral como framework)

##Pré-requisito

Caso não tenha o Gulp instalado globalmente:

npm install gulp -g

Também é preciso instalar o Bower globalmente:

npm install bower -g

##Instalação

Ao clonar o projeto você irá precisar realizar os dois itens abaixo.

Baixe o projeto e dê:

npm install

##Tarefas cadastradas

As tarefas estão em fase inicial, mas já dá pra utilizá-las para desenvolvimento.

###Converte Sass com Compass

gulp compass

Os arquivos são salvos na pasta ´´dist/css´´.

###Gera HTMLs utilizando o Handlebars.js

gulp hbs

Ela gera os arquivos html que estão na pasta src/templates/pages, mas pode usar os arquivos na pasta src/templates/partials para compor sua estrutura como partiais do Handlebars.js.

Os arquivos são salvos na pasta dist.

###Vigia modificações nos arquivos

gulp watch

Essa é a tarefa principal, ela ficará rodando enquanto não for interrompida e processa todos os arquivos editados na pasta src.

A tarefa vigia os arquivos da tarefa gulp-sass, gulp-handlebars e gulp-fonts. Toda vez que tem alteração em arquivos presentes nestas tasks (.hbs, .scss, .sass, etc) nas pastas específicas de cada uma ele as executa.

Depois de fazer qualquer modificação ela carrega um servidor e abre em seu navegador padrão o arquivo dist/main.html. Isso acontece na porta 8080. Se quiser ver outros arquivos basta colocar a URL sempre partindo do diretório src.

Exemplos:

localhost:8080/seuarquivo.html
localhost:8080/umdiretorio/seuarquivo.html

##Outras tasks gulp browserSync

gulp fonts

gulp images

gulp images:opt

gulp js

gulp useref

gulp clean:dist

gulp build

gulp build:min

gulp default

##Estrutura de pastas

dist (arquivos gerados pela task ``gulp deploy`` ou pela ``gulp-watch``)
  |_css
    |_ ...
  |_img
  |_js
    |_plugins
    |_vendors
    |_ ...
src
  |_scss
    |_ ...
  |_img
  |_js
    |_plugins
    |_vendors
    |_ ...
  |_templates
    |_data
    |_helpers
    |_pages
    |_partials
      |_molecules