2 min de leitura ·

zbundler - empacote HTML/CSS/SCSS a partir de qualquer projeto

Boa tarde!

Gostaria de apresentar meu projeto, chamado zbundler, que é mais um webpacker que empacota arquivos para distribuição web. No entanto, ele há uma diferença dos demais.

Ele não precisa ser instalado como dependência em seu projeto.

Você baixa o binário do zbundler e cria um arquivo de configuração na pasta do seu projeto, bem simples, focado no que precisa.

Além de ser compatível com qualquer tipo de estrutura de projeto, seja Node.JS, Laravel, um projeto PHP sem framework, um HTML/CSS "raiz"... zbundler é compatível com qualquer um.

Quando precisar compilar seu conteúdo, é só rodar um

zbundler build

E ele irá empacotar seus arquivos para um ou mais arquivos de saída.

Ele é compatível com CSS, Javascript e SCSS/SASS, e também inclui uma função de watch, que monitora edições em seus arquivos e compila eles novamente para a saída.

O arquivo de configuração é semelhante à isso:

[
    {
        "compilationMode": "CSS",
        "label": "Minify CSS files",
        "include": [ // pasta onde estão seus arquivos
            "./css"
        ],
        "output": [ // para onde vai compilar
            "./dist/app.css"
        ]
    },
    {
        "compilationMode": "JS",
        "label": "Minify JS files",
        "include": [
            "./scripts"
        ],
        "output": [
            "./assets/dist.js"
        ],
        "exclude": [
            "/vendor/"
        ]
    }
]

Você também pode incluir links no include que o zbundler irá baixar o arquivo e compilar ele junto com a saída, dispensando a necessidade de ter um monte de <script src= no seu <head>.

O projeto é open-source e compatível com Windows, Linux e Mac OS. Está bem no começo, então podem haver instabilidades ao decorrer do tempo. Não exitem em abrir uma issue caso encontrem alguma.

No link do repositório tem mais informações de como usar o zbundler.

Tenho intenção de adicionar suporte para TypeScript e LESS no futuro.

Link do projeto.

O que você achou? O que poderia melhorar? Conte para mim nos comentários.

pasteldepacoca

1 ano atrás

Olá,
Eu não sei se entendi muito bem, tipo eu entendi que ele compila os arquivos.
Mas o objetivo é organizar melhor os arquivos web?
Como o navegador faz a leitura do arquivo compilado?

Eu não tenho tanto conhecimento em front-end.
Mas sei usar bem HTML e CSS puro com JS.
(Não sei se não entendi por falta de conhecimento ou se é pq é muito cedo ainda.)

cyp

Autor

1 ano atrás

Agradeço o comentário.

A compilação de CSS e JS é mais para uma "compressão". Você "encolhe" o código para ele ficar menor e mais portável para redes lentas.

Imagine um código que você tem 30 arquivos .js e 50 arquivos .css. Você precisa importar um por um em seus arquivos .html para eles renderizarem corretamente, ou importar um por um dentro do Javascript.

A compilação é para resolver este problema, e também reduzir o payload da conexão. Ao invés de baixar 70 arquivos, você baixa somente dois, um para o JS e um para o CSS, ambos contendo tudo o que você precisa.

De forma mais técnica, vamos supor que você contém este trecho CSS:

div.red {
    background-color: red;
}

A forma comprimida do mesmo é:

div.red{background-color:red}

Removendo espaços, conteúdo desnecessário, tudo o que for possível para otimizar a transferência.

O zbundler faz isso, e como uma comodidade para o user, também compila alguns pré-processadores SCSS/SASS para CSS também.