In this guide we’ll learn how to use Grunt and unCSS on a WordPress site. If you don’t know what Grunt or unCSS are please check out this blog post first. If you need instructions on installing Grunt or unCSS on a Windows machine check out this blog post.

Overview

Grunt + unCSS is meant to check CSS properties derived from processed pages or HTML. For standard web development of HTML pages this works great offline. With WordPress the offline files are based on php which presents a whole new set of challenges since php is the act of per-processing HTML. Lucky for us, Grunt can connect to a url and look at source code of processed pages. That’s exactly what we’re going to do.

There are a couple tutorials out there that talk about how to use unCSS with WordPress by generating a sitemap through the use of a script and json. Personally, I’d rather take a couple extra steps and do it the way I have described for a few reasons. First of all, I don’t want the sitemap to be accessible from the web via anyone or any robot. The script method exposes the json output publicly if used in a live environment. Second, if you have WordPress integrated with something else it won’t pick up those links. Third, I don’t want to maintain another script.

Generating your Sitemap

First of all make sure that you don’t have a CDN enabled, this will just make your life difficult. If you are using a CDN temporarily disable it for the purpose of running unCSS.

Now if you’re a web professional or if you’re taking the effort to read this post you should already have a copy of Xenu’s Link Sleuth, but if you don’t you can download Xenu’s Link Sleuth from this link. You’ll need it and I’m sure you’ll find a thousand other great uses for it if you haven’t already. We’re going to generate a sitemap for your website by following these steps.

1 – Install Xenu’s Link Sleuth if you haven’t already
2 – Click on File > Check URL
3 – A box should open. Type in your website URL and be sure to uncheck “check external links”
4 – Click on okay and sit back and wait.
5 – Once the process is complete click on file > Create Google Sitemap File and save this in a convenient place.

Formatting the Sitemap

Now that you have your sitemap we need to make it Grunt friendly. In order to do this we are going to use Dreamweaver, but you can use whatever you want. The goal is to make the structure of the url list look like this

'http://domain.tld', 'http://domain.tld/url', 'http://domain.tld'

In Dreamweaver we’re going to make 2 search/replace commands (using regular expression) to take care of this for us. The first one will look like this
Search:

<url>([\s\S]*?)<loc>

Replace:

 '

(Please note that the code is a space and then an apostrophe)

And the second search/replace will look like this:
Search:

</loc>([\s\S]*?)</url>

Replace:

',

Now we just need to clean up the top and bottom lines and we have our list of URL’s ready to be processed.

Creating the GruntFile

Now we need to make the gruntfile.js to execute using the gathered url list. It should look like this:

module.exports = function (grunt) {
 
grunt.initConfig({
uncss: {
dist: {
options: {
      ignore       : [/expanded/,/js/,/wp-/,/align/,/admin-bar/],
	  stylesheets  : ['http://domain.tld/wp-content/themes/themename/pathtoyourcss'],
	  ignoreSheets : [/fonts.googleapis/],
},
files: [
{ src: ['http://domain.tld', 'http://domain.tld/url', 'http://domain.tld'], dest: 'cleancss/clean.css' }
]
}
}
});
 
// Load the plugins
grunt.loadNpmTasks('grunt-uncss');
 
// Default tasks.
grunt.registerTask('default', ['uncss']);
 
}; 

If you would like to minify the output you can alter the gruntfile.js to:

module.exports = function (grunt) {
 
grunt.initConfig({
uncss: {
dist: {
options: {
      ignore       : [/expanded/,/js/,/wp-/,/align/,/admin-bar/],
	  stylesheets  : ['http://domain.tld/wp-content/themes/themename/pathtoyourcss'],
	  ignoreSheets : [/fonts.googleapis/],
},
files: [
{ src: ['http://domain.tld', 'http://domain.tld/url', 'http://domain.tld'], dest: 'cleancss/clean.css' }
]
}
}
cssmin: {
dist: {
files: [
{ src: 'cleancss/tidy.css', dest: 'cleancss/tidy.css' }
]
}
}
});
 
// Load the plugins
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
 
// Default tasks.
grunt.registerTask('default', ['uncss', 'cssmin']);
 
}; 

Let’s explain the options. Ignore will leave the css in place for items such as the admin bar as it is not visible to unCSS. Stylesheets is the style sheet that you want processed. If you want all of the style sheets to be processed and merged together you can completely remove this option. Ignoresheets will tell unCSS to ignore Google Fonts. If you have other sources that need to be ignored you can add them here.

Once you have created the file and you’re ready to run the script you do so by opening shell and typing grunt. For more on how to use Grunt and unCSS refer to this blog post.