Em vez de tentar fazer isso com grep
, você pode querer usar uma ferramenta formal de mini-fiction. Há muitos. Uma dessas ferramentas é cssmin
. Esta é uma porta do YUI-compressor do Yahoo. É na maioria dos repositórios das principais distribuições.
Fedora
$ sudo yum install python-cssmin
Exemplo de execução
$ cssmin < doc.css > doc_compressed.css
$ ls -l | grep css
-rw-rw-r--. 1 saml saml 2723 Dec 13 23:35 doc_compressed.css
-rw-r--r--. 1 saml saml 4626 Dec 13 23:34 doc.css
O conteúdo do arquivo é assim:
$ head doc_compressed.css
a:link{text-decoration:none}a:visited{color:#7F7FFF;text-decoration:none}a:hover{text-decoration:underline}a:active{color:white;background-color:blue;text-decoration:underline}body{background-color:white;color:black;font-size:100.01%}img{display:block;border-width:0}h1{background-color:#900;font-size:x-large;font-weight:bold;color:#ebebeb;padding:.3em 5px .5em 5px;m....
Compressores
Existem muitas outras opções, se esta não atender às suas necessidades. Dê uma olhada neste post AskUbuntu, intitulado: Minify ferramenta que pode ser executada através do terminal .
Também pesquisar por "CSS minify" ou "CSS JS minify" produzirá muitas opções.
Identificando caracteres estranhos
Existem várias ferramentas que você pode usar para fazer isso. Despejo octal ( od
) ou hexdump
para iniciantes. Eu iria com hexdump
.
Exemplo
$ head -10 doc.css | hexdump -C
00000000 0a 2f 2a 20 47 6c 6f 62 61 6c 20 73 74 79 6c 65 |./* Global style|
00000010 73 2e 20 2a 2f 0a 0a 61 3a 6c 69 6e 6b 20 7b 0a |s. */..a:link {.|
00000020 20 20 74 65 78 74 2d 64 65 63 6f 72 61 74 69 6f | text-decoratio|
00000030 6e 3a 20 6e 6f 6e 65 3b 20 20 20 20 20 20 0a 7d |n: none; .}|
00000040 0a 0a 61 3a 76 69 73 69 74 65 64 20 7b 0a 20 20 |..a:visited {. |
00000050 63 6f 6c 6f 72 3a 20 23 37 46 37 46 46 46 3b 0a |color: #7F7FFF;.|
00000060 20 20 74 65 78 74 2d 64 65 63 6f 72 61 74 69 6f | text-decoratio|
00000070 6e 3a 20 6e 6f 6e 65 3b 20 20 20 20 0a |n: none; .|
0000007d
Na saída acima, os pontos no final dessas linhas são espaços:
$ head -10 doc.css
/* Global styles. */
a:link {
text-decoration: none;
}
a:visited {
color: #7F7FFF;
text-decoration: none;
Por exemplo:
00000030 6e 3a 20 6e 6f 6e 65 3b 20 20 20 20 20 20 0a 7d |n: none; .}|
Os espaços são os caracteres hexadecimais "0x20". O "0x0a" é o novo caractere de linha.