Documentação

Com o avanço da tecnologia e da internet, a necessidade de otimização e da alta performance se tornaram fatores extramente importantes e de grande diferencial para quem desenvolve sites ou aplicações voltadas para a web.

Um projeto otimizado permite que um usuário acesse a sua aplicação mais rápido, tanto em computadores como em dispositivos móveis, que geralmente são mais fracos em poder de processamento. Com isso conseguimos que os usuários tenham uma experiência melhor.

Este boilerplate utiliza:

  • Gulp 4
  • ESLint
  • Git Husky
  • Bootstrap 4
  • Tiny Slider 2
  • Babel (Babelify)
  • Browserify
  • gulp-uglify
  • gulp-sourcemaps
  • Sass (gulp-sass)
  • CSS nano
  • PostCSS (gulp-postcss)
  • Autoprefixer
  • Browser Sync
  • gulp-htmlmin
  • gulp-file-include
  • gulp-imagemin
  • gulp-cache

Porque usar

Este boilerplate foi criado para facilitar a otimização e performance do desenvolvimento Web usando tecnologias como:

  • Gulp 4 - para a automação de tarefas maçantes como minificar códigos JavaScript e CSS, reduzir o tamanho das imagens além de fornecer a capacidade de modularizar o HTML através do plugin gulp-file-include
  • Sass - permite explorar o CSS de formas incríveis, como a utilização de funções, mixins e a capacidade de modularização
  • PostCSS e Autoprefixer - auxiliam para que o código CSS possa ser executado em diferentes navegadores
  • ESLint - ajuda a manter uma padronização no seu código JavaScript
  • Browserify - possibilita a modularização do JavaScript
  • Babel - realiza o transpile do seu código JavaScript para uma versão mais antiga e que seja suportada e executada nos navegadores mais antigos
  • Git Husky - trás a possibilidade de padronizar e dar consistência aos seus commits.
  • Bootstrap - a utilização do Bootstrap-grid, que na versão 4 dá suporte ao CSS Flexbox e Sass
  • Tiny Slider 2 - carousel que utiliza JavaScript puro para ser executado sem precisar de dependências como o jQuery

Como baixar 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

Você também pode baixar o arquivo comprimido clicando aqui ou baixando diretamente do repositório do projeto no Github e descompactar onde desejar.

Instalando as dependências

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

                    
                        $ npm install

Scripts de execução do projeto (npm scripts)

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

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

                    
                        $ npm run lint

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

                    
                        $ npm run lint:fix

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

                    
                        $ npm run clean

Para remover o cache execute no terminal o comando:

                    
                        $ npm run clean:cache

Para executar o build e ficar assistindo as alterações em um servidor emulado pelo BrowserSync execute o comando:

                    
                        $ npm run dev

Para executar o build do projeto execute no terminal o comando

                    
                        $ npm run build

By José Monte