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.
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
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.
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.BY VISHWAS ACHARYA π