Introduction
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
1
npm i -g purgecss
Copied!
Run PurgeCSS from the terminal:
1
purgecss --css <css> --content <content> [option]
Copied!
Use npx
Install PurgeCSS as a dev dependency:
1
npm i -D purgecss
Copied!
Run PurgeCSS from the terminal:
1
npx purgecss --css <css> --content <content> [option]
Copied!
JavaScript API
Install PurgeCSS as a dev dependency:
1
npm i -D purgecss
Copied!
ES6 with import
1
import Purgecss from 'purgecss'
2
const purgecss = new Purgecss({
3
content: ['**/*.html'],
4
css: ['**/*.css']
5
})
6
const purgecssResult = purgecss.purge()
Copied!
ES5 with require
1
var Purgecss = require('purgecss')
2
var purgecss = new Purgecss({
3
content: ['**/*.html'],
4
css: ['**/*.css']
5
})
6
var purgecssResult = purgecss.purge()
Copied!
Webpack
Install the Webpack plugin as a dev dependency:
1
npm i -D purgecss-webpack-plugin
Copied!
Use the plugin in your Webpack config:
1
const path = require('path')
2
const glob = require('glob')
3
const ExtractTextPlugin = require('extract-text-webpack-plugin')
4
const PurgecssPlugin = require('purgecss-webpack-plugin')
5
6
const PATHS = {
7
src: path.join(__dirname, 'src')
8
}
9
10
module.exports = {
11
entry: './src/index.js',
12
output: {
13
filename: 'bundle.js',
14
path: path.join(__dirname, 'dist')
15
},
16
module: {
17
rules: [
18
{
19
test: /\.css$/,
20
use: ExtractTextPlugin.extract({
21
fallback: 'style-loader',
22
use: 'css-loader?sourceMap'
23
})
24
}
25
]
26
},
27
plugins: [
28
new ExtractTextPlugin('[name].css?[hash]'),
29
new PurgecssPlugin({
30
paths: glob.sync(`${PATHS.src}/*`)
31
})
32
]
33
}
Copied!
PostCSS
Install the PostCSS plugin as a dev dependency:
1
npm i -D @fullhuman/postcss-purgecss
Copied!
Use the plugin in your PostCSS config:
1
const purgecss = require('@fullhuman/postcss-purgecss')
2
3
module.exports = {
4
plugins: [
5
purgecss({
6
content: ['./**/*.html']
7
})
8
]
9
}
Copied!
Gulp
Install the Gulp plugin as a dev dependency:
1
npm i -D gulp-purgecss
Copied!
Use the plugin in your Gulpfile:
1
const gulp = require('gulp')
2
const purgecss = require('gulp-purgecss')
3
4
gulp.task('purgecss', () => {
5
return gulp
6
.src('src/**/*.css')
7
.pipe(
8
purgecss({
9
content: ['src/**/*.html']
10
})
11
)
12
.pipe(gulp.dest('build/css'))
13
})
Copied!
Grunt
Install the Grunt plugin as a dev dependency:
1
npm i -D grunt-purgecss
Copied!
Use the plugin in your Gruntfile:
1
module.exports = grunt => {
2
3
grunt.initConfig({
4
purgecss: {
5
options: {
6
content: ['./src/**/*.html']
7
},
8
my_target: {
9
files: {
10
'./dist/app.purged.css': './src/app.css'
11
}
12
}
13
}
14
})
15
16
grunt.loadNpmTasks('grunt-purgecss')
17
grunt.registerTask('default', ['purgecss'])
18
}
Copied!
Rollup
Install the Rollup plugin as a dev dependency:
1
npm i -D rollup-plugin-purgecss
Copied!
Use the plugin in your Rollup config:
1
import { rollup } from 'rollup'
2
import purgecss from 'rollup-plugin-purgecss'
3
4
rollup({
5
entry: 'main.js',
6
plugins: [
7
purgecss({
8
content: ['index.html']
9
})
10
]
11
})
Copied!
Last modified 2yr ago