Minify HTML, CSS e JS na linha de comando

Se você é usuário Linux, esse post é pra você. Como é sabido, o linux tem vários pacotes interessantes que aumentam nossa produtividade e nos oferece otimizações em um piscar de olhos.

Recentemente estive trabalhando num projeto frontend, e esse negócio de usar o browser para minificar tanto folhas de estilos como JavaScript, não é nada bom. Eu uso o Nuxt, mas por um motivo específico não consigo a minificação padrão que ele oferece. Então resolvi recorrer aos pacotes que o Linux oferece: o sed e o tr.

O sed comando

O sed é um editor por excelência, ele busca a primeira ocorrência num arquivo de texto, e faz o seu trabalho, apagando a linha da ocorrência ou substituindo um carácter por outro carácter, então ele nos será bastante útil.

O tr comando

O tr é outro desses pacotes linux que aumenta a produtividade do programador. Ele manipula textos por excelência. Então nós iremos usá-lo em conjunto com o sed comando, para suprimir todos os espaços redundantes.

É claro que é um absurdo repetir o mesmo comando n vezes, então criei um script para fazer o trabalho sujo, e um repositório para hospedá-lo.

https://github.com/HelenoSalgado/minify

Procurei deixar o uso o mais simples possível. O script recebe até três parâmetros, sendo os dois primeiros obrigatórios.

$ minify <modo-de-operação> <caminho-do-arquivo> <extensão-do-arquivo>

E até três opções de modo de operação:

-r somente ler, sem alterar o arquivo original;

-o somente ler e mostra a saída do texto minificado;

-i altera o próprio arquivo original.

Agora supomos que você quer minificar uma folha de estilo específica, sendo assim, não é preciso passar o último parâmetro:

$ minify -r public/css/global.css;

Ele vai gerar um global.min.css, na mesma pasta.

Mas você não quer que gere na mesma pasta, então use -o, assim você escolhe para onde redirecionar a saída:

$ minify -o /public/css/global.css > ./dist/css/global.min.css;

Você pode ainda querer simplesmente editar o arquivo original, o que não recomendo, já que o resultado é irreversível, exceto por uma boa IDE.

$ minify -i /public/js/slides.js;

Agora você quer reunir e minificar todos os arquivos.css na pasta css. Então o minify precisa de um terceiro parâmetro, indicando a extensão do arquivo.

$ minify -r public/css css;

Assim ele gera um main.min.css contendo o resultado minificado de todas as folhas de estilos presente nessa pasta.

Então é isso, veja mais no repositório e, se resolver usar, deixe uma estrelinha para fortalecer.