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-purifycss.
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) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
purifycss: {
options: {
},
target: {
src: ['input/*.html'], // Observe all html files
css: ['input/css/*.css'], // Take all css files into consideration
dest: 'output/tmp.css' // Write to this path
}
}
});
grunt.registerTask('default', ['purifycss']);
};
6.) Now start a “Node.js command prompt”, switch to our project folder 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:
C:\grunt-css_project>grunt
Running "purifycss:target" (purifycss) task
Source Files: [ 'input/index.html' ]
Style Files: [ 'input/assets/style.css' ]
##################################
PurifyCSS has reduced the file size by ~0.0%
##################################
This function took: 390 ms
File "output/tmp.css" created.
Done, without errors.
