Como minimizar CSS e Javascript via linha de comando

Todo bom desenvolvedor web tem a preocupação de minimizar seus arquivos CSS e Javascript a fim de otimizar a renderização de suas páginas. Neste artigo veremos como fazer isso no GNU/Linux via linha de comando.

[ Hits: 9.763 ]

Por: Fábio Berbert de Paula em 15/04/2015 | Blog: https://fabio.automatizando.dev


Introdução



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:
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.

    Próxima página

Páginas do artigo
   1. Introdução
   2. JavaScript-Minifier
Outros artigos deste autor

Transferindo arquivos com o rsync

Tradutor de palavras em vários idiomas via shell

Expressões Regulares - Entenda o que são Lookahead e Lookbehind

Tags automáticas em URLs com a classe urlmatch da PHP

Comparação entre Tcl e Perl

Leitura recomendada

Diferenças de sites Web Standards

XSS - Cross Site Scripting

Google Maps API - Criando e interagindo com seus próprios mapas

jQuery - Criando um simples jogo da velha

MathML - Mathematical Markup Language

  
Comentários
[1] Comentário enviado por lcavalheiro em 15/04/2015 - 13:54h

Boa! Usuários de Vim e Emacs já possuem funções similares embutidas em seus editores de texto, mas a galerinha das IDEs com certeza vai precisar desse tipo de ajuda.
--
Luís Fernando Carvalho Cavalheiro
Public GPG signature: 0x246A590B
Licenciado Pleno em Filosofia pela Universidade do Estado do Rio de Janeiro
Mestrando em Medicina (Cardiologia) pela Universidade Federal do Rio de Janeiro

[2] Comentário enviado por fabio em 15/04/2015 - 14:00h


[1] Comentário enviado por lcavalheiro em 15/04/2015 - 13:54h

Boa! Usuários de Vim e Emacs já possuem funções similares embutidas em seus editores de texto, mas a galerinha das IDEs com certeza vai precisar desse tipo de ajuda.


Não sabia que o Vim possui tal função. Vou pesquisar sobre. Vim e Emacs tem hora que dão até medo! hehehe

[3] Comentário enviado por lcavalheiro em 15/04/2015 - 14:08h


[2] Comentário enviado por fabio em 15/04/2015 - 14:00h


[1] Comentário enviado por lcavalheiro em 15/04/2015 - 13:54h

Boa! Usuários de Vim e Emacs já possuem funções similares embutidas em seus editores de texto, mas a galerinha das IDEs com certeza vai precisar desse tipo de ajuda.


Não sabia que o Vim possui tal função. Vou pesquisar sobre. Vim e Emacs tem hora que dão até medo! hehehe


Então, eu estou aprendendo só agora o Emacs por conta de necessidade, mas desde 1996 eu sou vim-user (até pro dia-a-dia)... No vim é possível fazer isso tudo, definindo um imenso plugin que não passa de uma macro que faz esse tipo de coisa. Claro, cada uma dessas ações deverá ser definida manualmente no plugin, mas dá pra fazer de boa.

[4] Comentário enviado por Lisandro em 17/04/2015 - 07:04h

Ótima Fábio. Vou usar.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts