Introduction

Purgecss
Github
Search…
Introduction
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​
​JavaScript API​
​Webpack​
​PostCSS​
​Gulp​
​Grunt​
​Rollup​
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
​npx allows you to run the CLI locally without installing the package globally.
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!
Configuration
Last modified 1yr ago
Copy link
Contents