Simples boilerplate usando Pug, Gulp, Twitter Bootstrap, e Browser Sync.
"Go!Sync Pug" facilita o desenvolver de projetos HTML's de uma forma em que o monitoramento de todas as alterações ocorridas em Pug, Folhas de estilos e Javascripts são feitas automaticamente através de tarefas do Gulp, plugins, e Browser Sync. Uma facilidade pra esquecer o F5 do navegador ;)
-
Toda estrutura de arquivos .pug são minificadas para html.
-
Você cria as folhas de estilos com SASS que serão compiladas para CSS e minificadas automaticamente* a cada alteração.
-
Os JavaScripts são concatenados e minificados automaticamente a cada alteração também.
-
As imagens também são minificadas, porém, somente na inicialização do Browser Sync ou na execução de compilação com a tarefa
$ gulp build
ou da própria tarefa de minificação da imagemgulp imagemin
. -
O projeto será armazenado na pasta
public
.
Requerido | Versão | Como verificar | Como instalar |
---|---|---|---|
Git | indiferente | git --version |
Git |
Node | >= 12.0 | node -v |
Nodejs |
Python | >=3.5 | python --version |
Python |
Npm | indiferente | npm --version |
Nodejs contains Npm |
Gulp | >=4.0.0 | gulp -v |
Gulp |
Veja a documentação de cada requerimento para a instalação.
Após instalar todos requerimentos acima, faça os comando abaixo:
1 - Faz o clone do Go!Sync Pug e acesse a pasta:
$ git clone https://github.com/williamcanin/gosync-pug.git "mysite"; cd mysite
- 2 - Instalando as dependências do Go!Sync Pug:
$ npm install
- Use o comando abaixo para compilar seu projeto:
$ gulp build
ou
$ $(npm bin)/gulp build
Nota: Seu site irá ser compilado na pasta public
.
- O comando abaixo você inicia um servidor local com o Browser Sync (para desenvolvimento):
$ gulp serve
ou
$ $(npm bin)/gulp serve
Nota 1: Para obter mais tarefas do gulp, use
gulp --tasks
. Nota 2: Não há necessidade de compilar e, em seguida, iniciar o servidor.
-
1 - Você deve criar toda estrutura de layout e includes do seu projeto no diretório
src/templates
utilizando Pug. -
2 - A pasta
src/views
é onde você deve criar suas páginas, que terá includes, extends e blocks através das pastassrc/templates/includes
andsrc/templates/layouts
. -
3 - Antes de hospedar seu projeto no servidor, altere no arquivo
config.json
o valor deurl
, colocando a url do seu site. Após isso, você pode executar o comandogulp build
e hospedar em um servidor na web.
Se você gostou do meu trabalho, me compre um café <3
MIT License © William Canin