Boilerplate Web Development

Boilerplate com Gulp 4, Sass, ESLint, Browserify, Babelify e Git Husky para automação de desenvolvimento Web estático

🚧 Projeto em desenvolimento... 🚧

Tabela de conteúdos

• Overview
• Tecnologias
• Features
• Obtendo o projeto
• Instalando as dependências
• Scripts de execução
  • Lint
  • Lint Fix
  • Clean
  • Clean cache
  • Develop
  • Build
• Autor

Overview

O objetivo deste boilerplate é ajudar na automação do desenvolvimento Web estático usando ferramentas como Gulp 4, Sass, PostCSS, Autoprefixer, ESLint, Browserify, Babel (Babelify) e Husky.

O projeto já conta com uma estrutura pronta para facilitar o desenvolvimento, contando com diretórios para o Sass, modularização do JavaScript e componentização do HTML, além do plugin Tiny Slider 2 para a criação de carousels (não possui dependência do jQuery) e o Bootstrap Grid para criação de grids responsivos.

Basta acessar o diretório src que fica na raíz do projeto e começar a utilizar a estrutura pronta que o projeto disponibiliza para poder desenvolver!

Ir para o topo.

Tecnologias

As seguintes tecnologias foram usadas na construção do projeto:

• Node.js
• Gulp
• Bootstrap
• Sass
• Husky
• ESLint
• Babel
• Browserify
• BrowserSync
• Tiny Slider
• Boilerplate Web Development

Ir para o topo.

Features

• Responsive
• CSS Flexbox
• Cross Browser
• Carousel
• Lazy-load

Ir para o topo.

Obtendo o projeto

Abra um terminal de comandos na pasta onde deseja salvar o projeto e digite o comando abaixo:

$ git clone https://github.com/jmontejr/boilerplate-web-development

Ou baixe o arquivo comprimido diretamente do repositório do projeto no Github e descompacte onde desejar.

Ir para o topo.

Instalando as dependências

Entre no diretório raíz do projeto e execute no terminal o comando abaixo:

$ npm install

Ir para o topo.

Scripts de execução

Os comandos abaixo podem ser encontrados no arquivo package.json localizado na raíz do projeto.

Lint

Para executar os testes do ESLint execute no terminal o comando:

$ npm run lint

Lint fix

Para corrigir os erros encontrados no teste do ESLint execute no terminal o comando:

$ npm run lint:fix

Clean

Para remover o diretório ./docs (onde estão os arquivos de saída do build do projeto) execute no terminal o comando:

$ npm run clean

Clean cache

Para remover o cache execute no terminal o comando:

$ npm run clean:cache

Develop

Para compilar os arquivos e ficar assistindo as alterações em um servidor local reativo emulado pelo BrowserSync execute no terminal o comando:

$ npm run dev

Build

Para executar o build do projeto execute no terminal o comando

$ npm run build

Ir para o topo.

Autor

José Monte

Desenvolvido com ❤️

Ir para o topo.