Vishwas Acharya
Vishwas Acharya

Vishwas Acharya

Purge CSS

Purge CSS

A tool remove unused CSS from your project.

Vishwas Acharya's photo
Vishwas Acharya
Β·Apr 8, 2022Β·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • How I used It?
  • Installation via GULP!
  • Usage
  • Video Example:
  • Official Documentations

The first time I used this when I was working on a Node JS project, which was using bootstrap framework, and there was so much performance issues regarding the CSS & JS files, because that files was taking to much time to load and download whether or not the page uses any bootstrap class or not.

How I used It?

I used this tool via Gulp, there are other plugins that this purgecss can be used with like, PostCSS, Webpack, Grunt, Gatsby (honestly I don’t know anything about other 3 except webpack πŸ˜…).

It can be used in your development process to increase the productivity of your workflow.

I’ll be uploading a video tutorial for this on my YouTube channel, and when it is uploaded I’ll update it in this blog as well.

Installation via GULP!

If you don’t have gulp cli installed globally on your computer then use the below command to install it.

  1. Check whether it is installed or no via this command gulp --version , If the CLI version shows means it is installed.

     vishwas$ gulp --version
     CLI version: 2.3.0
     Local version: Unknown
    

    Otherwise install it via this command npm install --global gulp-cli

  2. Now to install Purge CSS in your project use this command

     npm install --save-dev gulp-purgecss
    

    here - - save-dev means this will go under devDependencies, you can check it in your package.json file.

  3. Congratulations you have installed purgess via gulp in your project πŸŽ‰

Usage

const { src, dest } = require('gulp');
const purgecss = require('gulp-purgecss');

function cssTask(){
    return src('public/css/bootstrap.min.css')
                .pipe(purgecss({ content: ['views/index.ejs'] })
                .pipe(dest('public/compiled/index/'))
    );
}

exports.default = cssTask;

/** 
    * Path inside src is the main css which has all extra css that
    * I don't use in my index.ejs
    * Path inside content is of my .ejs/html/anything from which I want to
    * check whether how many classes are actually in use, call it a file which
    * I want to scan for unused css.
    * Path inside dest is where I want to store my final file which has only
    * css related to index.ejs πŸ‘
*/

This above code will compare my index.ejs file for those classes which is in use from my bootstrap.min.css file, then it will store that created CSS file inside public/compiled/index/ directory or folder.

Hence this is how purgecss is used.

You can also make one CSS file for only used classes from all your view files or you can also make separate files for each files which is inside views folder. I chose the second option of making separate files for each view file.

Video Example:

I’ll update it over here once it’s uploaded.

Official Documentations

πŸ’‘ Read official docs for to check other additional plugins and advance features which you can use for your project.

https://purgecss.com


BY VISHWAS ACHARYA πŸ˜‰

Did you find this article valuable?

Support Vishwas Acharya by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this