CLI

A CLI do sitelo encapsula o Vite incluído e injeta automaticamente o plugin de páginas HTML.

Comandos

sitelo              # o mesmo que sitelo dev
sitelo dev          # servidor de desenvolvimento
sitelo build        # compilação de produção
sitelo preview      # pré-visualiza a compilação de produção
sitelo lighthouse   # audita a compilação de produção

• dev — renderização SSR verdadeira a pedido, incluindo rotas dinâmicas, mais uma pequena barra de ferramentas de desenvolvimento
• build — HTML estático em dist/ (ou no outDir que indicares)
• preview — serve a compilação de produção localmente
• lighthouse — audita a compilação de produção (precisa da dependência par lighthouse)

Desliga a barra com devToolbar: false em sitelo.config.js — vê Configuração.

Opções úteis

sitelo --port 8888
sitelo build --outDir public --emptyOutDir
sitelo --root docs

• --port / --host / --open — servidor
• --outDir / --emptyOutDir / --base — compilação
• --root — raiz do projeto (prático para um site em docs/)
• --config — ficheiro de configuração do Vite personalizado
• --mode / --logLevel / --debug

Tudo o que reutilizares entre comandos fica melhor como opção do Vite em sitelo.config.js, sob vite.

Encontrar código sem uso

knip encontra ficheiros, exports e dependências que nada utiliza. Num projeto sitelo precisa de uma pista: as páginas e as ilhas são descobertas no sistema de ficheiros, por isso nada as importa, e sem essa pista o knip reporta o site inteiro como ficheiros sem uso.

npm install -D knip

import { knipConfig } from 'sitelo/knip'

export default knipConfig()

npx knip

knipConfig() lê o teu sitelo.config.js e marca as páginas e as ilhas como pontos de entrada tal como a compilação as descobre — pagesDir, pageExtensions, include e exclude aplicam-se todos. O que sobra no relatório é código a que o site realmente nunca chega.

Uma coisa que não consegue ver: um script de cliente que uma página referencia por URL em vez de importar, como <script src="/js/app.js">. Esses indicas tu, e qualquer outra opção que o knip aceite passa-se ao lado — é incorporada no resultado. O ! final é a marca do knip para código de produção, que é exatamente o que um script enviado ao navegador é.

export default knipConfig({
  entry: ['src/js/app.js!'], // o que as páginas carregam com um <script src>
  ignore: ['legacy/**'], // e qualquer outra opção que o knip aceite
})