Boilerplate do Gulp 4 para desenvolvimento local com algumas ferramentas já configuradas. Fornece estrutura de diretórios e arquivos para auxiliar os desenvolvedores front-end a iniciarem seus projetos.
- Estrutura de pastas baseada na 7-1 architecture pattern.
- Mixins para consultas de mídia e outros estilos, tais como: reset, tipografia, grid.
- Compilar arquivos SASS com a dependência gulp-sass
- Adicionar prefixos proprietários aos arquivos CSS com autoprefixer
- Minificar arquivos CSS com cssnano
- Otimizar imagens .jpg e .png com gulp-imagemin
- Gerar imagens no formato .avif com gulp-avif
- Gerar imagens no formato .webp com gulp-webp
- Adicionar mais mémoria ao processo de compilação no Gulp com gulp-cache
- Previnir o encerramento da execução por causa de erros das dependências com gulp-plumber
- Adicionar Sourcemaps aos arquivos SASS e Javascript com gulp-sourcemaps
- Minificar arquivos Javascript com gulp-terser
- Transpila arquivos Javascript para maior compatibilidade com navegadores antigos com gulp-babel
- Sincroniza o navegador com as mudanças que ocorrem no projeto com browser-sync
- Junta arquivos Javascript em um só com gulp-concat
Para Iniciar o projeto, faça o clone desse repositório ou baixe de forma local em seu sistema.
Antes de começar, você precisa instalar, em sua máquina, as seguintes ferramentas: Git, Node.js e um editor de código, como VSCode.
No terminal do git bash ou no terminal integrado do Visual Studio Code use os seguintes comandos:
# Verifique se o Nodejs foi instalado corretamente.
$ node -v
# Verifique se o NPM foi instalado corretamente.
$ npm -v
# Instale o Gulp Cli globalmente para que esteja disponível em todos os projetos, para todos os usuários do computador.
$ npm i -g gulp-cli
# Verifique se o Gulp foi instalado globalmente.
$ gulp -v
# Entre no seu diretório de projeto
$ cd pasta-projeto
# Clone este repositório.
$ git clone https://github.com/carla-santos/gulp-boilerplate-sass.git
# Instale as dependências.
$ npm install
# Execute a aplicação.
$ gulp dev
Comece o desenvolvimento no diretório src. Ao salvar automaticamente, irá gerar o diretório build contendo todos os seus arquivos (CSS, JS, HTML e imagens) otimizados e prontos para produção.
Você pode executar as tarefas abaixo:
gulp dev(tarefa padrão): Cria no diretório build todos os arquivos otimizados e é iniciado um servidor local para execução do projeto.gulp img: Otimiza de forma paralela todos os formatos de imagens.gulp js: Adiciona sourcemaps, concatena, transpila e minifica arquivos Javascript.gulp css: Compila SASS, adiciona sourcemaps, autoprefixer e minifica arquivos CSS.gulp images: Otimiza imagens .jpg e .png.gulp versionWebp: Converte imagens para o formato .webp.gulp versionAvif: Converte imagens para o formato .avif.
Primeiramente, agradeço a sua visita, qualquer contribuição que você fizer é muito bem-vindo :D.
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b meu-recurso. - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "Recurso: meu novo recurso". - Envie as suas alterações:
git push -u origin meu-recurso.
O projeto está sob a licença MIT. Para saber mais, acesse o arquivo LICENÇA.
- Img Shields
- NPM
- Google Fonts
- SASS guidelin
- CSS-Tricks
- Font Awesome
- Juan Pablo De la torre Valdez
- André Rafael
- Lançamento inicial
15.09.2022