Minimizar arquivos CSS e Javascript é o processo de remoção de caracteres desnecessários, tais como espaços, tabulações, comentários, abreviar variáveis etc. O objetivo é reduzir o tamanho dos arquivos e consequentemente acelerar o processo de download e renderização de uma página web.

Para esta tarefa existem dezenas de ferramentas online, mas o objetivo do artigo é apresentar formas de obter o mesmo resultado a partir do terminal GNU/Linux, afinal de contas nada é mais produtivo que a boa e velha tela preta!

clean-css

Nesta página vamos conhecer o clean-css, ferramenta usada para minimizar arquivos CSS e que está disponível nos repositórios das principais distribuições.

Para instalar em Debian/Ubuntu e derivados:

sudo apt-get install cleancss

Não testei em outras distribuições, caso não encontre o pacote, baixe-o pelo GitHub:

• https://github.com/jakubpawlowicz/clean-css

NOTA: clean-css depende do Node.js para ser instalado.

Alternativamente, se você já tiver o Node.js instalado no sistema, pode instalar o clean-css pelo npm:

sudo npm install clean-css

Minimizando CSS

A melhor forma de explicar o funcionamento da ferramenta é com exemplos práticos, então vamos lá!

Supondo que você tenha uma folha de estilo chamada estilo.css com o seguinte conteúdo:

body {
	padding-left: 11em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: purple;
	background-color: #d8da3d 
}

ul.navbar {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 2em;
	left: 1em;
	width: 9em 
}

h1 {
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif 
}

ul.navbar li {
	background: white;
	margin: 0.5em 0;
	padding: 0.3em;
	border-right: 1em solid black 
}

ul.navbar a {
	text-decoration: none 
}

a:link {
	color: blue 
}

a:visited {
	color: purple 
}

address {
	margin-top: 1em;
	padding-top: 1em;
	border-top: thin dotted 
}

Para minimizá-la faremos:

cleancss -o estilo-min.css estilo.css

Como saída (-o) teremos o arquivo estilo-min.css, que ficará assim:

body{padding-left:11em;font-family:Georgia,"Times New Roman",Times,serif;color:purple;background-color:#d8da3d}ul.navbar{list-style-type:none;padding:0;margin:0;position:absolute;top:2em;left:1em;width:9em}h1{font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif}ul.navbar li{background:#fff;margin:.5em 0;padding:.3em;border-right:1em solid #000}ul.navbar a{text-decoration:none}a:link{color:#00f}a:visited{color:purple}address{margin-top:1em;padding-top:1em;border-top:thin dotted}

Outras formas de uso:

cleancss estilo.css
$ cleancss estilo.css > estilo-min.css
$ cat estilo1.css estilo2.css estilo3.css | cleancss -o estilo-todos-min.css

Fonte: https://github.com/jakubpawlowicz/clean-css

Na próxima página veremos como otimizar arquivos Javascript.