Gulp Boilerplate

Esse projeto destinasse a contrução de landing pages e websites e contém as seguintes features:

• Desenvovilmento em multiplas plataformas (Windows, OS X, Linux); [VS Code, Git, cross-env, Node]

• Transpilação de código Ecmascript 2015, Ecmascript 2016, Ecmascript 2017 etc. para ES5 que é a versão compatível com maioria dos navegadores; [Babel]

• Versionamento de assets para cache busting; [gulp-rev, gulp-rev-delete-original, gulp-rev-rewrite]

• Sintaxe SCSS para uma melhor manutenabilidade de códigos de estilo; [gulp-dart-sass]

• Autoprefixador para que códigos CSS sejam compatíveis cross browser; [Autoprefixer]

• Linting e formatação automática de códigos Javascript e SCSS; [Eslint, StandardJS eslint-config-prettier, Prettier, Stylelint,]

• Commit Lint para melhor acompanhamento das mudanças no projeto; [Commitlint, @commitlint/config-conventional]

• Minificação de builds JavaScript e CSS para produção; [Terser, Nano]

• Documentações geradas automáticamente; [JSDoc]

• Configurações básica para PWA; [workbox-build, Web App Manifest]

• Framework pré configurado; [Bootstrap]

• Pacote de ícones pré configurados; [Font Awesome]

• Otimização de imagens e criação de versão WEBP. [Deploying New Image Formats on the Web, Automatizar a otimização da imagem]

Get Start

Clone o projeto. Sempre utilize a branch master, pois a branch develop pode apresentar erros em códigos instáveis.

Caso já tenha este repositório em sua máquina, verirife se há atualizações executando o comando git pull.

Após clonar ou copiar este repositório, remova a referência à ele no git. Execute: git remote remove origin. Adicione a url remota do novo projeto. Execute: git remote add origin URL_REPOSITORIO_REMOTO.

Instale as dependências do projeto executando o comando yarn. Além disso você deve ter em sua máquina, o Node], um editor de texto (VS Code é recomendado), Git e Gulp na versão CLI instalado globalmente.

Não esqueça de modificar todos os arquivos de configuração com as informações específicas do seu projeto:

• package.json;

• gulpfile.babel.js/config.js;

• src/data/*;

• src/assets/manifest.webmanifest;

• src/assets/sitemap.xml;

• src/assets/humans.txt.

Utilize o plugin EdidorConfig para pegar os padrões de codificação no projeto, como caractere de final de linha, tamanho de tabulação e conjunto de caracteres (charset).

Desenvolvimento

Durante o desenvolvimento sourcemaps são gerados inline por questão de performance.

Você pode verificar o estilo dos códigos Javascript com o comando lint:scripts e o estilo dos códigos de estilo SCSS com o comando lint:styles. Para verificar todos os estilos com um só comando, basta executar o comando yarn lint. yarn eslint-check Verifica se há algum conflito nas configurações do eslint com o prettier.

Produção

yarn build faz o build do projeto para produção:

• Transforma os templates escritos em com nunjunks para HTML normal;

• Transforma o javascript para ES5, compatível com mais navegadores, porém mais pesado que o código ES2015;

• Minifica JavasSript e CSS;

• Copia assets estáticos para a pasta de saída (normalmnte é a dist mas você pode configurar isso).

Estrutura do projeto

• src/ - Contém os códigos fonte da aplicação;

• dist/ - Efêmero, onde os arquivos já processados ficam e podem ser acessados por um navegador;*¹

• node_modules/ - Contém todas as depências gerenciadas pelo yarn;*²

• gulpfile.babel.js/ - Contém todas as configurações do gulp, suas tasks e funções.

• docs/ - Contém a documentação JSDoc;*³

1 - Gerado após a execução do comando yarn start ou yarn build .

2 - Gerado após instalar as dependências.

3 - Gerado após executar qualquer uma das seguinte gulp tasks docs ou buildJsdoc.

Git Hooks

O projeto está configurado para executar hooks (ganchos, gatilhos) em alguns eventos do git, como o comando lint-staged que é executado no evento pre-commit.

Todos os scripts que não executarem com sucesso, causarão o cancelamento do evento que o acionou.

Para pular esses gatilhos, adicione o parâmetro --no-verify no comando git. Atenção essa ação não é recomendada. Se o hooks estão aí, têm motivo.

O plugin utilizado para executar scripts pelo node é o Husky.

No entanto, também estão sendo executados alguns scripts diretamento nos hooks do git.

Eventos configurados

pre-commit

Este evento é acionado ao executar um comando de commit do git.

Scripts executados

• lint-staged é um plugin node para o uso de linters em arquivos stageds (marcados para commit).

Os linters utilizados são:

• Eslint + Prettier

• Stylelint

Eles servem para evitar que você faça caquinha 🚫💩.