Remova CSS Desnecessário com PurifyCSS e Grunt

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial, mostraremos como usar o Grunt e o PurifyCSS para criar uma folha de estilo bem leve e sem esforço. Veremos como instalar e aprenderemos a executá-lo com Grunt para obtermos estilos mais performáticos.

Assista o Screencast

PurifyCSS é uma ferramenta JavaScript que analisa seu código fonte (HTML, PHP ou até JavaScript) e referecia-os com quaisquer CSS usados. Quaisquer seletores no CSS que não forem usados, serão removidos, deixando-nos apenas com o necessário.

Instalação

Para instalar o PurifyCSs podemos obtê-lo diretamente do GitHub ou instalá-lo via npm (mais detalhes sobre como fazê-lo, leia esse tutorial do Kezz).

Nossa Demo

Os arquivos que usaremos para demonstrar o PurifyCSS são a folha de estilos completa do Bootstrap e um index.html Podemos obtê-los nesse repositório. O arquivo index.html é bem direto: há apenas uma seção hero, com alguns botões, elementos de formulário e a grade do Bootstrap. Certamente, não precisamos de todos os estilos do Bootstrap.

bootstrap styles — A folha de estilo completa do Bootstrap

Executando PurifyCSS

Para executar o PurifyCSS nessa folha de estilo, vá até a linha de comando, navegue até a pasta do projeto e execute um comando com o seguinte:

o comando purifycss para realizar o trabalho
a folha de estilo a ser purificada
os código fontes alvo, no nosso caso, o index.html
o parâmetro --min, opcional, se quisermos o CSS minificado.
o parâmetro --out, opcional, que podemos usar para apontar onde o arquivo será resultante será salvo
o parâmetro --info, opcional, se quisermos que o processo seja registrado no terminal.
e o parâmetro --rejected, opcional, que, se incluído, registrará todos os seletores rejeitados da folha de estilo.

Nosso comando parecerá com isso:

1	purifycss css/bootstrap-full.css index.html --min --out css/bootstrap-purify.css --info --rejected

Resultado

A folha de estilo original foi reduzida em quase 100Kb, bom trabalho!

Usando PurifyCSS com Grunt

Para automatizar mais ainda o processo, podemos usar executadores de tarefa como o Grunt. Voltando ao começo, precisamos adicionar um package.json ao nosso projeto. Executando npm init na nossa pasta nos guiará pela criação do package.json, essencialmente, criando um arquivo assim:

{
  "name": "purifycss",
  "version": "1.0.0",
  "description": "A file for testing Grunt PurifyCSS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Adi Purdila",
  "license": "ISC",
}

Então, se não o tivermos, precisamos instalar o Grunt:

1	npm install grunt --save

Isso feito, veremos uma pasta "node_modues" no nosso projeto.

Instalando o Plugin do Grunt

Agora, precisamos instalar o plugin do Grunt para o PurifyCSS.

1	npm install grunt-purifycss --save

Criando o Gruntfile

Agora, precisamos criar um arquivo gruntfile.js. Dê uma olhada nos arquivos fontes para ver o que há nele, mas foque mais na tarefa do Grunt em si:

        purifycss: {
            target: {
                src: ['*.html', 'js/*.js'],
                css: ['css/bootstrap-full.css'],
                dest: 'css/bootstrap-grunt.css'
            }
        }

As opções dentro do objeto alvo devem ser familiares devido ao exercício anterior. Com esses parâmetros configurados, estamos prontos.

Para executar o Grunt, digite isso no terminal:

1	grunt purifycss

Conclusão

E terminamos! Vimos duas abordagens diferentes para usar o PurifyCSS para limpar as folhas de estilo. Não esqueça: não faz sentido fazer navegadores carregarem estilos que nunca usarão. Performance é importante!