Remove Unnecessary CSS With PurifyCSS and Grunt

In this tutorial I’ll show you how to use Grunt and PurifyCSS to create a super-lightweight stylesheet with minimal effort. We’ll install it, then learn how to run it with and without Grunt, to give us much more performant styles.

Watch the Screencast

PurifyCSS is a JavaScript tool which parses your markup files (HTML, PHP, or even JavaScript) then cross-references them with whatever CSS you’re using. Any selectors in your CSS which aren’t being used will be removed, leaving you with only the styles that you actually need.

Install

To install PurifyCSS you can either grab the repo directly from GitHub, or install it via npm (more details on how that’s done via this tutorial from Kezz).

Our Demo

The files we’ll be using to demonstrate PurifyCSS are a full Bootstrap stylesheet and an index.html. You can grab them from the source repo. The index.html file is pretty straightforward; there’s only a hero section, with some buttons, form elements, and the Bootstrap grid; we certainly don’t need the whole library of Bootstrap styles.

Run PurifyCSS

To run PurifyCSS on this stylesheet, go to the command line prompt, navigate to the project folder and run a command with the following:

• the purifycss command to kick things off
• the source stylesheet which is to be purified
• the target markup files, in our case the index.html
• an optional parameter --min if we want the resultant CSS to be minified
• an optional parameter --out after which we can specify where we want the resultant file to be saved
• the optional parameter --info if we’d like the process to be logged to the terminal
• and the optional parameter --rejected which, when included, logs all the selectors which have been rejected from the source stylesheet

Our final command looks like this:

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

Result

The source stylesheet has been trimmed by well over 100Kb, good job!

Using PurifyCSS With Grunt

To automate our process even further we can use a task runner like Grunt. Going back to our starting point, we need to add a package.json to our project. Running npm init from within our folder will take us through a package.json creation process, essentially outputting a file with the following details:

{
  "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",
}

Then, if we don’t already have it, we need to install Grunt:

npm install grunt --save

With that done you’ll see a “node_modules” folder has been added to your project.

Install Grunt Plugin

Next we need to install the Grunt plugin for PurifyCSS.

npm install grunt-purifycss --save

Create Gruntfile

Now we need to create a file called gruntfile.js. Take a look at the source files to see what’s contained within this file, but of particular interest is the Grunt task itself:

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

The options within the target object should be familiar to you from our previous exercise, and with these parameters set, our file is ready.

To run Grunt, in the terminal enter:

grunt purifycss

Conclusion

And we’re done! We looked at two different approaches for using PurifyCSS to clean our stylesheets up. Don’t forget: there’s no point in having browsers load in kilobytes of styles which aren’t even used, performance matters!

Useful Resources

• purifycss
• grunt-purifycss

More Grunt on Tuts+

• Terminal
  The Command Line for Web Design: Automation with Grunt
  Kezz Bracey
• JavaScript
  JavaScript Workflow Automation Using Grunt and Gulp
  Etienne Margraff
• Email Design
  Using Grunt to Make Your Email Design Workflow Fun Again
  Lee Munroe