OLA · Ferramentas · Procedimento técnico

Procedimento para formatar, desminificar e minificar arquivos

Esta página organiza o procedimento para usar dois modos no OLA: o modo desenvolvimento, com código formatado, legível e mantível; e o modo publicação, com arquivos opcionalmente minificados.

Área: Ferramentas Arquivo: HTML/CSS/JS Ambiente: VSCodium Ferramentas: Prettier + html-minifier-terser

Onde posicionar no OLA

A localização recomendada é:

ferramentas/procedimentos/minificar_desminificar_arquivos.html

Justificativa: a página é um procedimento técnico de apoio ao desenvolvimento, manutenção e publicação. Ela se relaciona com metodologia e governança, mas pertence à área de ferramentas.

Caminho físico

meulivro/ferramentas/procedimentos/

Caminho lógico

Portal → Ferramentas → Procedimentos

Caminho semântico

Desenvolvimento → Formatação → Teste → Minificação → Publicação

Problema resolvido

Como manter os arquivos HTML do OLA legíveis para edição e, ao mesmo tempo, gerar versões compactadas para publicação quando necessário?

Situação

Arquivos podem aparecer compactados, com linhas coladas, dificultando a manutenção.

Risco

Editar arquivo minificado aumenta risco de erro e dificulta localizar seções.

Solução

Manter arquivo de trabalho formatado e gerar versão minificada apenas como derivada.

Conceitos principais

Conceito	Definição	Uso no OLA
Formatar	Organizar o código com recuos, quebras e espaçamento.	Modo desenvolvimento.
Desminificar	Voltar um código compactado para forma legível.	Recuperar arquivo para manutenção.
Minificar	Remover espaços, quebras e comentários para reduzir tamanho.	Modo publicação.
Arquivo de trabalho	Arquivo editável e formatado.	`pagina.html`
Arquivo minificado	Arquivo derivado e compactado.	`pagina.min.html`

Modo desenvolvimento × modo publicação

Modo desenvolvimento

Usado para criar, estudar, revisar e manter. O código deve ser legível, indentado e estruturado.

Editar arquivo normal.
Formatar com Prettier.
Testar com Live Server.

Modo publicação

Usado para gerar versão compactada. A versão minificada não deve substituir o arquivo de trabalho.

Gerar .min.html.
Testar antes de publicar.
Não editar manualmente.

Ferramentas

Ferramenta	Função	Modo
VSCodium	Editor do projeto OLA.	Desenvolvimento
Prettier	Formatar HTML, CSS e JavaScript.	Desenvolvimento/desminificação
Live Server	Testar página localmente no navegador.	Teste
html-minifier-terser	Minificar HTML com CSS/JS embutidos.	Publicação
tasks.json	Executar minificação pelo próprio VSCodium.	Automação local

Estrutura recomendada

meulivro/
├── .vscode/
│   ├── settings.json
│   └── tasks.json
├── ferramentas/
│   └── procedimentos/
│       └── minificar_desminificar_arquivos.html
└── dominios/
    └── gestao_negocio/
        └── doces_artesanais/
            └── procedimentos/
                ├── cadastro_nova_receita.html
                └── cadastro_nova_receita.min.html

Configuração: .vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",

  "prettier.tabWidth": 2,
  "prettier.printWidth": 120,
  "prettier.singleQuote": false,
  "prettier.bracketSameLine": false,

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "liveServer.settings.root": "/"
}

Procedimento: formatar ou desminificar

1. Abrir arquivoAbra o HTML no VSCodium.

→

2. FormatarUse Format Document.

→

3. ConferirVerifique indentação.

→

4. TestarAbra com Live Server.

→

5. SalvarManter como arquivo de trabalho.

Option + Shift + F
ou
Botão direito no código → Format Document

Procedimento: minificar para publicação

Minifique apenas depois de testar o arquivo formatado.

npx html-minifier-terser cadastro_nova_receita.html \
  -o cadastro_nova_receita.min.html \
  --collapse-whitespace \
  --remove-comments \
  --minify-css true \
  --minify-js true

Task: minificar pelo VSCodium

Crie .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Minificar HTML atual",
      "type": "shell",
      "command": "npx html-minifier-terser \"${file}\" -o \"${fileDirname}/${fileBasenameNoExtension}.min.html\" --collapse-whitespace --remove-comments --minify-css true --minify-js true",
      "group": "build",
      "problemMatcher": []
    }
  ]
}

Para executar: Command + Shift + P → Tasks: Run Task → Minificar HTML atual.

Fluxo recomendado

Arquivo formatado Prettier Live Server Validação Minificação Arquivo .min.html

Regra principal: o ciclo começa e termina no arquivo formatado. O arquivo minificado é sempre derivado.

Checklist

Verificação	Pergunta	Resultado esperado
Pasta raiz	O VSCodium abriu `meulivro/`?	Projeto inteiro visível.
Prettier	Format Document funciona?	HTML indentado.
Live Server	A página abre no navegador?	Teste local ativo.
settings.json	Existe configuração do projeto?	Formatação padronizada.
tasks.json	Existe task de minificação?	Minificação pelo VSCodium.
Arquivo normal	Continua legível?	Manutenção segura.
Arquivo .min	Foi testado?	Publicação mais segura.

Regras práticas

Editar arquivo normal

A versão formatada é a fonte de manutenção.

Não editar .min.html

A versão minificada é derivada e deve ser gerada novamente quando mudar.

Minificar só depois de testar

Teste com Live Server antes da minificação.

Minificação é opcional

Em páginas didáticas, pode ser melhor publicar a versão legível.

Páginas derivadas e impactadas

Derivadas possíveis

configurar_vscodium_ola.html
usar_prettier_ola.html
usar_live_server_ola.html
tasks_vscodium_ola.html

Impactadas

ferramentas/index_ferramentas.html
documentacao/index_documentacao.html
fundamentos/metodologia/index_metodologia.html
governanca/quadro_regras_ola.html
autor/lacunas_autor.html

Manutenção desta página

Item	O que verificar	Quando revisar
Prettier	Se continua formatando corretamente.	Ao atualizar VSCodium ou extensões.
html-minifier-terser	Se a task gera `.min.html`.	Ao atualizar Node.js/npm.
Regra de publicação	Se ainda vale publicar normal ou minificado.	Quando mudar hospedagem ou estratégia.
Links	Se links para ferramentas, metodologia e governança continuam corretos.	Ao reorganizar pastas.