This guide will help you install Grunt and unCSS on Windows 7 or Windows 8. We’ll start off by explaining what Grunt and unCSS are and how we can use these powerful tools to reduce page load by getting rid of unused css.

What is Grunt

Grunt is a task-based command line build tool for JavaScript projects.

Here’s the idea: when working on a JavaScript project, there are a bunch of things you’ll want to do regularly. Like what, you ask? Well, like concatenating given files, running JSHint on your code, running tests, or minifying your scripts. If you’re pasting your JavaScript into JSHint online, you probably realize that there’s a better way to do it; even if you’re using cat to concatenate files or a command line minifier, it would be nice to have a single, unified set of commands for all those extra tasks, that worked for every single JavaScript project, right?

That’s what Grunt aims to be. It has a bunch of built-in tasks that will get you pretty far, with the ability to build your own plugins and scripts that extend the basic functionality.

What is unCSS

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

So now that we know what these tools are lets get them installed on your Windows machine!

First things first, you’ll need to install the Node.js package manager. Once you download the file just run the install with all of the default options.

Now open a command prompt by hitting your windows button, typing cmd and pressing enter. Alternatively you can finding it in the list of applications.

Type

npm

You should see:

Usage: npm 

where  is one of:
    add-user, adduser, apihelp, author, bin, bugs, c, cache,
    completion, config, ddp, dedupe, deprecate, docs, edit,
    explore, faq, find, find-dupes, get, help, help-search,
    home, i, info, init, install, isntall, issues, la, link,
    list, ll, ln, login, ls, outdated, owner, pack, prefix,
    prune, publish, r, rb, rebuild, remove, repo, restart, rm,
    root, run-script, s, se, search, set, show, shrinkwrap,
    star, stars, start, stop, submodule, t, tag, test, tst, un,
    uninstall, unlink, unpublish, unstar, up, update, v,
    version, view, whoami

npm  -h     quick help on 
npm -l           display full usage info
npm faq          commonly asked questions
npm help   search for help on 
npm help npm     involved overview

Specify configs in the ini-formatted file:

If you get an error that says:

Error: ENOENT, stat 'C:\Users\username\AppData\Roaming\npm'

you must manually create the directory npm in the above path. Do so by typing:

cd Users\username\AppData\Roaming
mkdir npm

Now we need to install grunt by using the following command:

npm install -g grunt-cli

Now we need to install unCSS and CSSmin. If you are going to use this locally make sure that you switch to the folder with your local site before executing the below command. If you are going to use this with a url create a folder that you can execute the js file in, it doesn’t matter what it’s called, and switch to it. Run the following command:

npm install grunt-uncss grunt-contrib-cssmin --save-dev

This command will install the unCSS package and the CSSmin package in the current folder. We need to create a Gruntfile.js file in the root of the project that we are working on. The Gruntfile.js is a valid JavaScript file that belongs in the root directory of your project. The Gruntfile.js should look like the below if you’re running grunt with unCSS.

module.exports = function (grunt) {
 
grunt.initConfig({
uncss: {
dist: {
files: [
{ src: 'index.html', dest: 'css/main.css' }
]
}
},
cssmin: {
dist: {
files: [
{ src: 'css/main.css', dest: 'css/main-min.css' }
]
}
}
});
 
// Load the plugins
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
 
// Default tasks.
grunt.registerTask('default', ['uncss', 'cssmin']);
 
}; 

The Gruntfile may need to be modified in order for it to work correctly. Here’s a quick explanation of what you might want to change:

1 – The first src file on line 6 is the html page that you want to be checked. This can also be a URL or a list of URL’s. The dest file is the location of the css file once cleaned. If you are doing this in a test environment you might want to make sure this file isn’t named exactly the same as your current css file otherwise it will overwrite it. If you’re scanning url(s) then it doesn’t matter what this file is named.
2 – The second set of src and dest files on line 12 are used for minification. The source and destination can be the same of different. Again, if they are the same the file will be overwritten. The source file must be the same as the destination file on line 6.

Once you have made the gruntfile you can now execute it by going to the directory where the gruntfile is and run this command:

grunt

If you receive errors while running Grunt + unCSS it’s most likely because your have an illegal format in your CSS file. The error should give you a hint as to where in your CSS the problem resides.

Here’s a few options that you can use in the gruntfile.js.

ignore (Array): provide a list of selectors that should not be removed by UnCSS. For example, styles added by user interaction with the page (hover, click), since those are not detectable by UnCSS yet. Both literal names and regex patterns are recognized.

media (Array): By default UnCSS processes only stylesheets with media query “all”, “screen”, and those without one. Specify here which others to include.

csspath (String): Path where the CSS files are related to the HTML files. By default, UnCSS uses the path specified in the.

stylesheets (Array): Use these stylesheets instead of those extracted from the HTML files.

ignoreSheets (Array): Do not process these stylesheets, e.g. Google fonts. Accepts strings or regex patterns.

raw (String): Give the task a raw string of CSS in addition to the existing stylesheet options; useful in scripting when your CSS hasn’t yet been written to disk.

timeout (Number): Specify how long to wait for the JS to be loaded.

htmlroot (String): Where the project root is. Useful for example if you are running UnCSS on local files that have absolute href to the stylesheets.

report (Boolean): Return the report object in callback.

uncssrc (String): Load all options from a JSON file. Regular expressions for the ignore and ignoreSheets options should be wrapped in quotation marks.

That’s it! You have installed Grunt and unCSS on Windows.