# Adcos Profissinal

Esse projeto é correspondente ao tema usado na loja da Adcos Profissional. A loja é VTEX e por isso devemos nos preocupar somente com o tema, o backend é fornecido pela VTEX numa plataforma SaaS.


## Tema

O arquivis fontes do projeto estão todos disponíveis na pasta `src`, divido entre `less`, `scripts` e `images`. Para gerar os arquivos para distribuição, aqueles que devem ser inseridos na plataforma VTEX, é necessário compilar os arquivos fontes. O Gulp é usado para fazer esse trabalho, através do arquivo `gulpfile.js`.

Somente um arquivo de CSS e um arquivo JavaScript serão gerados pelo Gulp e eles serão localizados na pasta `dist`. São os arquivos `app.css` e `app.js`. Além deste todas as imagens usadas serão copiadas também para a pasta `dist`. Esta pasta de arquivos distribuição seguirá a estrutura a seguir.

```
dist/
|_ app.css
|_ app.js
|_ image1.png
|_ image2.jpg
|_ image3.jpeg
|_ font_abc.ttf
|_ font_123.ttf
```


### Ambiente de Desenvolvimento e Ambiente de Produção

O tema pode ser compilado de duas maneiras diferentes, uma para desenvolvimento e outra para produção. O que diferencia as duas são os arquivos que são gerados para distribuição. Quando a compilação é feita para produção é levando em consideração performance e o modo como a aplicação irá interagir com os recursos disponizados no projeto, como as APIs.

Para compilar os arquivos para Desenvolvimento você pode simplesmente executar diretamente do `gulpfile.js` ou executar o _scripts_ presente no _package.json_. Em ambos os casos, além da compilação também é ativada a tarefa _watch_, descrita a seguir.

```sh
# gulpfile.js
gulp

# Package.json
yarn dev
```

Para compilar os arquivos para Produção você precisar executar o seguinte _scripts_ presente no _package.json_.

```sh
# Package.json
yarn build
```

**Importante**: Somente os arquivos gerados para Produção que devem ser carregados na plataforma da VTEX.


### Gulp

As seguintes tarefas estarão disponíveis no `gulpfile.js`:

1. _styles_ -> Compila os arquivos `less` para um arquivo `css` e o coloca na pasta de distribuição;
1. _scripts_ -> Concatena todos os arquivos `js` num único arquivo, remove funções de _debug_ (somente em _production_), o enfeia/_uglify_ (somente em _production_) e o coloca na pasta de distribuição;
1. _images_ -> Minifica (somente em _production_) as imagens e as copia para a pasta de distribuição;
1. _fonts_ -> Copia todas as fontes usadas no projeto para a pasta de distribuição;
1. _defaul_ -> Executa todas as tarefas acima;
1. _watch_ -> Vigia alterações feitas na pasta de arquivos fonte e executa as tarefas correspondente ao arquivo quando ele é alterado.


## VTEX Speed

Para aplicar todas as coisas que foram feitas na loja é necessário carregar dos arquivos gerados na plataforma da VTEX. Como esse processo pode ser demorado por conta do cache, nós usamos uma ferramenta que agiliza o desenvolvimento: VTEX Speed.

Com o VTEX Speed é possível aplicar os arquivos de CSS, JS e imagens sem que seja necessário carregar na plataforma da VTEX.

Para isso é necessário instalá-lo no seu projeto.

```sh
# Se o projeto já existir como um submódulo precisamos fazer o download
git submodule update --init --update

# Caso contrário, se ainda não existir um submódulo é necessário adicioná-lo
git submodule add https://github.com/vtex/speed.git
```

Após isso é necessário fazer uma configuração. Adicione a seguinte opção no arquivo `package.json`:

```json
{
    "accountName": "adcosprofessional"
}
```

> **Nota**: O nome da conta "adcosprofessional" está em inglês e, portanto, está escrito com a letra E, diferente do domínio da loja que usa a letra I.

Feito isso basta instalar as dependência e inicializar a aplicação:

```sh
# Instalar as dependências
yarn

# Inicializar a aplicação
sudo yarn start
```

Pronto, agora é só abrir o endereço `http://adcosprofessional.vtexlocal.com.br/` no navegador.

> **Importante**: o comando para inicializar a aplicação deve ser executada com super usuário.


### Integração com o tema

Para deixar o VTEX Speed integrado com o Gulp precisamos ter um link simbólico da pasta `build/arquivos` para a pasta `dist` do tema. Como o VTEX Speed estará dentro da pasta do tema precisamos fazer o seguinte.


```sh
rm -rf build/arquivos
ln
```

# @TODO

1. Criar uma estrutura de pasta que facilite o entendimento do que é arquivo fonte e arquivo destino
Usar pastas como `src` e `dist` ajudam bastante. Não necessariamente precisamos versionar a pasta dist, mas é aconselhável.
1. colocar o vtex speed como submodulo do projeto
1. remover arquivos que podem ser importados do npmjs
1. usar o NODE_ENV para variaveis de ambiente