Using grunt-uncss on a Windows OS

Abstract: This short howto explains how grunt uncss could be used to remove any unused css from your html files

Most websites use a big CSS file. This is often caused due to a default bootstrap or due to the reason that the file grow over the time due to multiple updates. Gunt uncss provided a way to remove any unused css content and will only leave the content in place which is needed. This example here will use grunt-uncss.

Needed steps:

1.) Download Node.js (in that example I will use Node.js stable in the version 5.5.0) and install that on your Windows OS.

2.) Now create a folder on our C: drive called “grunt-css_project” (C:\grunt-css_project) or something similar which will work for you.

3.) Inside that folder create a Gruntfile.js file and two folders called “input” and “output”

4.) Copy the files which should be cleaned now into the input folder

5.) Edit the Gruntfile.js file and copy the following inside the file (and save it):

module.exports = function (grunt) {

    grunt.initConfig({
	// Remove unused CSS across multiple files
        uncss: {
            dist: {
                files: [
                    { src: 'input/*.html', dest: 'output/cleancss.css' }
                ]
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-uncss');

    // Default tasks.
    grunt.registerTask('default', ['uncss']);

};

6.) now start a “Node.js command prompt” and change the path to our project created above (e.g. via)

cd C:\grunt-css_project

7.) and run at first a init via:

npm init

This will create our package.json. For that example here we can simply accept any example and press only return.

8.) and type in (we will install the grunt CLI globally):

npm install grunt-cli -g –save-dev

8.) now type in (to install grunt in our project folder):

npm install grunt –save-dev

9.) install grunt tasks via

npm install load-grunt-tasks –save-dev

10.) We will now install uncss and some other modules we might need later one via:

npm install grunt-contrib-copy grunt-processhtml grunt-uncss grunt-contrib-uglify grunt-csscomb grunt-purifycss –save-dev

12.) The last step is to run

grunt

which will create the needed output. In our example the

C:\grunt-css_project>grunt
Running "uncss:dist" (uncss) task
File output/cleancss.css created: 463.44 kB → 27.59 kB

Done, without errors.

C:\grunt-css_project> 

In the example we can see that the .css files in our project now changed from 463 KB to only 28 KB, nice isn´t it?