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:
You can install the CLI in two ways. By installing PurgeCSS globally or using npx.
npm i -g purgecss
Run PurgeCSS from the terminal:
purgecss --css <css> --content <content> [option]
Install PurgeCSS as a dev dependency:
npm i -D purgecss
Run PurgeCSS from the terminal:
npx purgecss --css <css> --content <content> [option]
Install PurgeCSS as a dev dependency:
npm i -D purgecss
import Purgecss from 'purgecss'
const purgecss = new Purgecss({
content: ['**/*.html'],
css: ['**/*.css']
})
const purgecssResult = purgecss.purge()
var Purgecss = require('purgecss')
var purgecss = new Purgecss({
content: ['**/*.html'],
css: ['**/*.css']
})
var purgecssResult = purgecss.purge()
Install the Webpack plugin as a dev dependency:
npm i -D purgecss-webpack-plugin
Use the plugin in your Webpack config:
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}/*`)
})
]
}
Install the PostCSS plugin as a dev dependency:
npm i -D @fullhuman/postcss-purgecss
Use the plugin in your PostCSS config:
const purgecss = require('@fullhuman/postcss-purgecss')
module.exports = {
plugins: [
purgecss({
content: ['./**/*.html']
})
]
}
Install the Gulp plugin as a dev dependency:
npm i -D gulp-purgecss
Use the plugin in your Gulpfile:
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'))
})
Install the Grunt plugin as a dev dependency:
npm i -D grunt-purgecss
Use the plugin in your Gruntfile:
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'])
}
Install the Rollup plugin as a dev dependency:
npm i -D rollup-plugin-purgecss
Use the plugin in your Rollup config:
import { rollup } from 'rollup'
import purgecss from 'rollup-plugin-purgecss'
rollup({
entry: 'main.js',
plugins: [
purgecss({
content: ['index.html']
})
]
})
Last modified 3yr ago