https://github.com/sancruz-dev/dot-prova-junior

Uma prova de nível júnior em formato de aplicação front-end web, avaliada pela empresa DOT Digital Group.
https://github.com/sancruz-dev/dot-prova-junior

css3 evaluation gulpjs html5 javascript proof-of-work

Last synced: about 2 months ago
JSON representation

Uma prova de nível júnior em formato de aplicação front-end web, avaliada pela empresa DOT Digital Group.

• Host: GitHub
• URL: https://github.com/sancruz-dev/dot-prova-junior
• Owner: sancruz-dev
• Created: 2022-07-01T22:07:49.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-13T20:29:24.000Z (over 2 years ago)
• Last Synced: 2024-10-12T23:41:28.125Z (3 months ago)
• Topics: css3, evaluation, gulpjs, html5, javascript, proof-of-work
• Language: JavaScript
• Homepage: https://san-dotprovajr.netlify.app/
• Size: 3.34 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  ![Netlify Next.js Blog Template designed by Bejamas](https://dotgroup.com.br/wp-content/uploads/2022/03/dotgrouplogo.png)

  # Prova Front-End Júnior



### Objetivos Realizados

- Front-end desenvolvido de acordo com os arquivos PSD da prova;

- Resultado responsivo com versão mobile deve condizente ao arquivo PSD mobile;

- Código semântico, bem organizado, estruturado e correto;

### Observações

- Nenhum framework e pré processadores CSS foi utilizado;

- O conteúdo final está totalmente funcional na última e penúltima versão dos principais navegadores, como o Google Chrome, Mozilla Firefox, Safari e Microsoft Edge, e Opera.

### Diferencial:

- O projeto faz o uso do automatizador de tarefas Gulp Js, sendo utilizado mais de 10 plugins nativos do gulp para operar nas funções;






## Iniciando as Tarefas Gulp

Execute o seguinte comando em seu terminal para instalar as dependências gulp:

```

npm install

```

Estão disponíveis para uso as seguintes **tasks**: 


- `gulp default` ou `gulp`

  - Constrói a pasta **dist** para receber o diretório **src** otimizado. A otimização oferece: arquivos de imagem, estilo e script minificados, concatenados, compilados, transpilados, com sourcemap e prefixes.

- `gulp watch`

  - "Assiste" a pasta **src**, logo, qualquer mudança dentro do diretório executará a tarefa `glup default`. É recomendado NÃO criar nenhum arquivo fora da pasta **assets**.

  

- `gulp clsdist` 

  - Deleta a pasta **dist**.

- `gulp imgmin`

  -  Minifica imagens em PNG, JPEG, GIF e SVG. Use ela apenas se estiver tendo problemas com o tinypng, pois o minificador do tiny já é executado por padrão a partir da **task** `gulp default`.




## Performance

Como forma de mostrar o quão poderoso é o Gulp Js, logo abaixo estão os resultados de seu uso dentro do sistema:



Podemos dizer que a pasta **dist** é o resultado da otimização completa sobre a pasta **src**, visto que, tivemos um ganho de **70% de performance** ao calcularmos a diferença entre o ***peso*** dos dois diretórios da aplicação.

Além disso, o total de 8 arquivos foi reduzido em 6, economizando os **requests** da página e aumentando sua velocidade de carregamento.




## Solução para "primordials error"

Caso apareça o erro ***"ReferenceError: primordials is not defined"*** ao executar alguma **task**, realize três simples passos:

- **Passo 1** - crie um arquivo json chamado npm-shrinkwrap (caso ele já exista, apague-o e crie outro);

- **Passo 2** - cole o seguinte código nele:

``` json

{

  "dependencies": {

    "graceful-fs": {

        "version": "4.2.2"

     }

  }

}

```

- **Passo 3** - execute `npm install` em seu terminal, e o erro sumirá.