Advertisement
  1. Web Design
  2. CSS

Remova CSS Desnecessário com PurifyCSS e Grunt

Scroll to top
Read Time: 3 min

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

install via npminstall via npminstall via npm
Instalando via npm

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

1
{
2
  "name": "purifycss",
3
  "version": "1.0.0",
4
  "description": "A file for testing Grunt PurifyCSS",
5
  "main": "index.js",
6
  "scripts": {
7
    "test": "echo \"Error: no test specified\" && exit 1"
8
  },
9
  "author": "Adi Purdila",
10
  "license": "ISC",
11
}

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:

1
        purifycss: {
2
            target: {
3
                src: ['*.html', 'js/*.js'],
4
                css: ['css/bootstrap-full.css'],
5
                dest: 'css/bootstrap-grunt.css'
6
            }
7
        }

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!

Recursos Úteis

Mais Sobre Grunt no Tuts+


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.