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

Installing via npm

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.

The full Bootstrap stylesheet

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

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

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

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

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:

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:

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

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.

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:

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:

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

More Grunt on Tuts+



