PlanMx

Develop your online brand | PlanMX Marketing Web

Use PurifyCSS and Grunt to remove unneeded CSS.

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

In JavaScript, PurifyCSS analyzes files such as HTML, JavaScript, PHP ... and links to your CSS. Those that are not used will be deleted, leaving only your essential ones.

2. InstallPurifyCSS

You can go to GitHub, use repo to install PurifyCSS on your machine. Or there is another way to use npm.

Link: https://github.com/purifycss/purifycss

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.

Link: https://github.com/tutsplus/remove-unnecessary-css-with-purifycss-and-grunt

 

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

5. Result

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:

"name": "purifycss",

"version": "1.0.0",

"description": "A file for testing Grunt PurifyCSS",

"main": "index.js",

"scripts":

"test": "echo \"Error: no test specified\" && exit 1"

,

"author": "Adi Purdila",

"license": "ISC",

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

Link:https://github.com/purifycss/grunt-purifycss

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:

purifycss:

target:

src: ['*.html', 'js/*.js'],

css: ['css/bootstrap-full.css'],

dest: 'css/bootstrap-grunt.css'

Link: https://github.com/tutsplus/remove-unnecessary-css-with-purifycss-and-grunt

To run the Grunt, enter the following code (in the terminal):

grunt purifycss

 

 

Web Design