PurgeCSS is a tool to remove unused CSS. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools.
Here are a couple of ways to use PurgeCSS:
CLI
You can install the CLI in two ways. By installing PurgeCSS globally or using npx.
Install globally
Run PurgeCSS from the terminal:
Copy purgecss --css < cs s > --content < conten t > [option]
Use npx
npx allows you to run the CLI locally without installing the package globally.
Install PurgeCSS as a dev dependency:
Run PurgeCSS from the terminal:
Copy npx purgecss --css < cs s > --content < conten t > [option]
JavaScript API
Install PurgeCSS as a dev dependency:
ES6 with import
Copy import Purgecss from 'purgecss'
const purgecss = new Purgecss ({
content : [ '**/*.html' ] ,
css : [ '**/*.css' ]
})
const purgecssResult = purgecss .purge ()
ES5 with require
Copy var Purgecss = require ( 'purgecss' )
var purgecss = new Purgecss ({
content : [ '**/*.html' ] ,
css : [ '**/*.css' ]
})
var purgecssResult = purgecss .purge ()
Webpack
Install the Webpack plugin as a dev dependency:
Copy npm i -D purgecss-webpack-plugin
Use the plugin in your Webpack config:
Copy const path = require ( 'path' )
const glob = require ( 'glob' )
const ExtractTextPlugin = require ( 'extract-text-webpack-plugin' )
const PurgecssPlugin = require ( 'purgecss-webpack-plugin' )
const PATHS = {
src : path .join (__dirname , 'src' )
}
module . exports = {
entry : './src/index.js' ,
output : {
filename : 'bundle.js' ,
path : path .join (__dirname , 'dist' )
} ,
module : {
rules : [
{
test : /\.css $ / ,
use : ExtractTextPlugin .extract ({
fallback : 'style-loader' ,
use : 'css-loader?sourceMap'
})
}
]
} ,
plugins : [
new ExtractTextPlugin ( '[name].css?[hash]' ) ,
new PurgecssPlugin ({
paths : glob .sync ( ` ${ PATHS .src } /*` )
})
]
}
PostCSS
Install the PostCSS plugin as a dev dependency:
Copy npm i -D @fullhuman/postcss-purgecss
Use the plugin in your PostCSS config:
Copy const purgecss = require ( '@fullhuman/postcss-purgecss' )
module . exports = {
plugins : [
purgecss ({
content : [ './**/*.html' ]
})
]
}
Gulp
Install the Gulp plugin as a dev dependency:
Copy npm i -D gulp-purgecss
Use the plugin in your Gulpfile:
Copy const gulp = require ( 'gulp' )
const purgecss = require ( 'gulp-purgecss' )
gulp .task ( 'purgecss' , () => {
return gulp
.src ( 'src/**/*.css' )
.pipe (
purgecss ({
content : [ 'src/**/*.html' ]
})
)
.pipe ( gulp .dest ( 'build/css' ))
})
Grunt
Install the Grunt plugin as a dev dependency:
Copy npm i -D grunt-purgecss
Use the plugin in your Gruntfile:
Copy module . exports = grunt => {
grunt .initConfig ({
purgecss : {
options : {
content : [ './src/**/*.html' ]
} ,
my_target : {
files : {
'./dist/app.purged.css' : './src/app.css'
}
}
}
})
grunt .loadNpmTasks ( 'grunt-purgecss' )
grunt .registerTask ( 'default' , [ 'purgecss' ])
}
Rollup
Install the Rollup plugin as a dev dependency:
Copy npm i -D rollup-plugin-purgecss
Use the plugin in your Rollup config:
Copy import { rollup } from 'rollup'
import purgecss from 'rollup-plugin-purgecss'
rollup ({
entry : 'main.js' ,
plugins : [
purgecss ({
content : [ 'index.html' ]
})
]
})