Permalink
Fetching contributors…
Cannot retrieve contributors at this time
125 lines (81 sloc) 6.28 KB

Snack

🏠 » Documentação

Documentação

Novo por aqui? Recomendamos dar uma lida seguindo os passos abaixos.

Estrutura básica

Para melhor visualização da estrutura como um todo, podemos resumir que o projeto é dividido em 2 partes: Boilerplate e Styleguide.

O Boilerplate está relacionado à sua aplicação em si. É aonde você vai criar suas páginas, estilos e scripts. Já o Styleguide está relacionado ao Guia de Estilo da sua aplicação. É aonde você vai definir os padrões dos seus componentes visuais (fica dentro da pasta styleguide).

├── ASSETS (arquivos de desenvolvimento)
│   ├── SCSS
│   ├── JS
│   └── IMG
│       └── SPRITE (imagens para gerar o sprite automaticamente)
│
├── BUILD (arquivos gerados pelas tarefas do Gulp)
│   ├── CSS
│   ├── JS
│   ├── IMG
│   ├── FONTS
│   └── IN
│
├── STYLEGUIDE (tudo relacionado ao Guia de Estilo da aplicação)
│   ├── ASSETS
│   ├── BUILD
│   ├── TEMPLATES
│   └── VIEWS (botoes, cores, formularios, layouts...)
│
├── DOC (arquivos da documentação)
│
└── index.php

Entendendo a organização

As pastas ASSETS e BUILD

O projeto (tanto o Boilerplate como Styleguide) utiliza algumas tasks do Gulp, que resumidamente pega todo o conteúdo da pasta assets e concatena/minifica/otimiza e joga para a pasta build.

Em tese, quando você for dar o deploy da sua aplicação, você pode fazer o upload apenas da pasta build com todos arquivos otimizados.

Assets

A pasta assets contém os arquivos de desenvolvimento. Possui 3 pastas internas:

  • scss ==> Arquivos SASS. Essa pasta é organizada seguindo o conceito de Design Atômico com alguns toques pessoais nossos.
  • js ==> Pasta com os arquivos javascript. Todo arquivo desenvolvido para o projeto deve ficar nessa pasta. Dentro dessa pasta tem uma pasta LIBS, que deve agrupar todas bibliotecas utilizadas que não forem geradas através do Bower.
  • img ==> Pasta com as imagens do projeto, antes de serem otimizadas.

Build

Essa pasta contém todos os arquivos originados das taks do Gulp.

  • css ==> Contém arquivo de estilo minificado.
  • js ==> Contém arquivo(s) javascript concatenados e minificados.
    • libs ==> Contém as bibliotecas minificadas utilizadas por padrão no projeto (html5shiv, jQuery e Respond).
  • img ==> Contém as imagens otimizadas através do Grunt.
    • sprite ==> Contém as imagens que geram o sprite na pasta build.
  • fonts ==> Fontes utilizadas no projeto.
  • in ==> Pasta com os arquivos include do projeto.

Gulp e Bower

O Snack utiliza Gulp para automatizar algumas tarefas e o Bower para gerenciar dependências. Para rodá-los você precisa ter o NodeJS instalado na máquina.

Bower

O Bower é um gerenciador de dependências. No Snack temos por padrão apenas as dependências: jQuery, Respond, font-awesome, Normalize.css, html5shiv, Angular e Rainbow.

Através do comando bower install, o Bower faz o download de todas essas dependências e joga na pasta COMPONENTS.

Instalando uma dependência nova

Caso você queira colocar uma nova dependência no seu projeto é possível fazer isso com o Bower. Para procurar uma LIB nova, é só passar o seguinte comando: bower search nomecomponente.

Com a lib encontrada digite: bower install nomecomponente --save-dev.

❗️ IMPORTANTE ==> Lembre-se de passar o parâmetro --save-dev para deixar aquela lib como dependência do projeto. Assim, quando outra pessoa for utilizá-lo, ela será instalada automaticamente no comando bower install.

E se eu não achar?

Pode ser que você não encontre a lib que queria através do Bower ou pode ser que você não queira utilizá-lo. Nesse caso, faça o download dessa lib, crie uma pasta com o nome da lib dentro de: assets/js/libs e jogue os arquivos lá dentro. Aí com o Gulp você pode criar uma tarefa para minificar e concatenar ela com outros arquivos.

Gulp

A configuração do Grunt fica no arquivo Gulpfile.js e as dependências de módulos ficam listadas no package.json.

Tarefas padrão

Por padrão temos algumas tarefas registradas:

gulp ==> Minifica as bibliotecas padrão do projeto geradas pelo Bower e joga na pasta BUILD.

gulp css ==> Roda a tarefa de CSS, concatenando todos os arquivos .scss em um arquivo .css minificado.

gulp js ==> Roda as tarefas de JS: validação pelo JSHint e minificação/concatenação dos arquivos.

gulp images ==> Tarefas relacionadas a imagens: otimização de JPEGs, GIFs e PNGs, minificação de SVGs e transformação de SVGs em PNGs para utilização em navegadores que não dão suporte e gerar imagem de sprite.

gulp ==> É a tarefa de watch. Basicamente fica de olho nos arquivos que são passados na configuração, realiza as tarefas automaticamente de acordo com o arquivo que for alterado e atualiza o navegador. Funciona em conjunto com as extensões do LiveReload.

gulp sync ==> Tarefa para poder sincronizar seu site local em diversos dispositivos, acessando pelo ip que ele gera, e também roda a tarefa de watch que fica de olho nos arquivos que são passados na configuração, realiza as tarefas automaticamente de acordo com o arquivo que for alterado e atualiza o navegador.

gulp copy ==> Essa tarefa copia os arquivos da pasta components e joga nos seus respequitivos lugares na pasta BUILD

Essas são apenas as tarefas básicas e padrões. Fique a vontade para criar as suas tarefas e customizar da melhor maneira que lhe atender.

👉 Próximo: CSS