Today, I will help you use PurifyCSS and Grunt to make a very lightweight table that you do not need to spend a lot of time. First, we will have to install it. Then, I will show you how to run it with and without Grunt, and see the effect of each method.
1. Watch the Screencast
You can go to GitHub, use repo to install PurifyCSS on your machine. Or there is another way to use npm.
Use npm to install PurifyCSS
3. My Demo
In this article, I will use the Bootstrap and index.html files to illustrate a better understanding of PurifyCSS (you can refer to source repo). These files are quite simple and I just took a small part of them to demo for you.
Full Bootstrap - Stylesheet
4. Run PurifyCSS
When using this stylesheet to run PurifyCSS, you need to execute the following commands:
command "purifycss" to remove everything
the source form will be refined
the files used to mark the target, in this case is index.html
optional parameters--minif you want to minified the CSS results
optional parameters--out after which you can specify where you want the resultant file to be saved
optional parameters--infoif you’d like the process to be logged to the terminal
optional parameters--rejected, which, when included, logs all the “selectors” which have been rejected (from the source stylesheet)
Your final command will look like this:
purifycss css/bootstrap-full.css index.html --min --out css/bootstrap-purify.css --info --rejected
The result: the stylesheet dropped more than 100Kb, only 25Kb,extremely light.
Stylesheet has dropped by more than 100Kb
6. Using PurifyCSS With Grunt
To automate the process, you can use a runner (which has the same tasks as Grunt). First, you must add package.json to your project. Then you run "npm init" to create the package.json. Finally, you will have a file like this:
"description": "A file for testing Grunt PurifyCSS",
"test": "echo \"Error: no test specified\" && exit 1"
"author": "Adi Purdila",
Then, if you do not already have it, you need to install Grunt:
npm install grunt –save
When done, you will see a "node_modules" folder (automatically added).
7. Install Grunt Plugin
Next you need to install the “Grunt plugin”(for PurifyCSS.)
npm install grunt-purifycss --save
8. Create Gruntfile
In this step, you need to create the gruntfile.js file. You can look through the "source files" (below) for reference, but it is important that the Grunt - task itself:
src: ['*.html', 'js/*.js'],
To run the Grunt, enter the following code (in the terminal):