Meu site, passo-a-passo— #3-Planejando o desenvolvimento e a automatização
Criar um programa significa escrever o seu código, usar um compilador/interpretador para processá-lo, para criar um executável deste programa, e poder executá-lo em outros lugares.
Porém , quanto maior e mais complexo o sistema fica, o programador ganha uma preocupação a mais: Como distribuir todas as partes do seu programa?
Antes de criar o site, eu preciso ter em mente 2 coisas:
- Como cada arquivo do projeto será processado.
- Como os arquivos do projeto serão distribuídos.
Talvez esta forma de pensar não faça nenhum sentido para você, principalmente se estiver iniciando na área de desenvolvimento front-end, ou se este projeto for pequeno. Mas a intenção é justamente criar este site, usando algumas das soluções, tecnologias e metodologias utilizadas hoje em dia.
Eu quero começar o meu projeto usando duas soluções: LESS e PUG. Cada uma delas será explicada melhor no decorrer do desenvolvimento. Basicamente, são ‘pré-processadores’, que permitem facilitar a codificação do sistema. Enquanto LESS ajudará a escrever o código em CSS, o PUG me ajudará com o código HTML.
Tendo isto em mente, eu defino a seguinte estrutura de pastas:
app — para onde virão os arquivos JS.
img — a pasta das imagens.
| page — imagens referentes ao site (logo, background, etc)
| gallery — imagens pertencentes à galeria de desenho, fotos, etc.
less — os arquivos de estilo, no formato LESS
views — as páginas do site, no formato PUG
dist
A pasta dist será a pasta de destino de todo o processamento da automatização. Eu posso pegar esta página inteira e publicar em qualquer servidor Web. Depois que o projeto for processado, a pasta terá esta estrutura:
dist
| img
| | page
| | gallery
lib
| style.css
| app.js
arquivo-1.html
arquivo-2.html
…
Perceba os arquivos style.css e app.js. A idéia é que todos os arquivos sejam unificados, para que eu tenha apenas um arquivo de cada. A motivação principal é fazer com que cada página carregue o menos de arquivos possíveis, já que cada requisição (as tags link e script, por exemplo) tomam um tempo para serem realizadas.
O meu planejamento está feito, sei onde eu vou salvar os arquivos e para onde eles irão. No meu próximo texto, vou escrever como vou programar todo este processamento, utilizando um automatizador de tarefas, outro recurso bastante utilizado em desenvolvimento front-end.
