localiza todos os IDs e CLASSes usados em um documento HTML no BASH

Question

Eu tenho um bloco de HTML do qual preciso retirar todos os IDs e CLASSES. Eu estou querendo fazer uma lista destes para que eu possa começar a cortar o nosso documento CSS maior e necessário (173k).

Eu isolo o bloco de código HTML e o coloco em seu próprio arquivo, mas ter que passar e documentar todos os IDs e CLASSes usados é bastante demorado.

Id gostaria de processar isso usando um script bash e gravando todos os IDs em um arquivo e depois todos os CLASSES em outro arquivo, ou no mesmo arquivo, contanto que os IDs parem e CLASSes comecem.

Alguém pode me ajudar?

Obrigado antecipadamente.

    

Answer 1

Eu precisava encontrar todas as classes, etc, para descobrir o que alguns seletores CSS estavam tentando combinar - usei a seguinte coisa rápida (funciona com a versão do Bash do Fedora 21):

grep -Eoih class\=\"[^\"]*\" index.html | sed -e 's/"//g' -e 's/class=//g' | tr " " "\n" | sort -u

^{Substitua class por id por IDs}

Qual:

• grep -E - Regexp estendido (provavelmente não necessário), -o - mostra apenas correspondência, -i sem distinção entre maiúsculas e minúsculas, -h não imprime nomes de arquivos (para vários arquivos).
• Entre class\=\" e " , corresponde tudo que não é um "
• sed - remove " e 'class="
• tr - Substitua espaços por novas linhas
• sort - Ordena e remove dupes

É muito limitado (por exemplo, é projetado para itens que usam " quotes).

Para remover o excesso de CSS, sugiro usar uncss , que remove o CSS não usado para que você não precise fazer manualmente. Você pode instalá-lo via npm install -g uncss e usá-lo assim (para mais opções use uncss --help ):

  uncss ./index.html > new-css.css

Anote os arquivos HTML etc para encontrar o javascript, classes e ids usados, então você precisa fornecer o HTML como entrada.

    

Answer 2

Embora não seja uma solução bash, acho que esta é uma solução bastante simples usando JavaScript:

(function (){
    var all = document.getElementsByTagName("*");
    var ids = [];
    var classes = [];

    for (var i=0, max=all.length; i < max; i++) {
        var elem = all[i];
         if(elem.id) {
            ids.push(elem.id);
         }

         if(elem.className) {
            var classList = elem.className.split(" ");
            Array.prototype.push.apply(classes, classList);
         }
    }


    console.log("Ids:");
    ids.forEach(function(e){
        console.log(e);
    });

    console.log("Classes:");
    classes.forEach(function(e){
        console.log(e);
    });
})();

Se você copiar e colar isso no console JavaScript do navegador, receberá uma lista de classes e IDs. Poderia ser melhorado para remover duplicatas e fazer a classificação, mas é um bom começo.