Build Tool Integrations

UnCSS is a popular tool in many front-end build systems. While it can be integrated manually using its Node.js API or PostCSS plugin, there are dedicated community-maintained packages that simplify its use with specific task runners and build tools.

Below are the recommended wrappers for popular build systems.

Grunt

For Grunt users, grunt-uncss provides a configurable task to run UnCSS on your project files.

Example Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    uncss: {
      dist: {
        files: [
          { src: 'index.html', dest: '/css/tidy.css' }
        ]
      }
    }
  });

  grunt.loadNpmTasks('grunt-uncss');
  grunt.registerTask('default', ['uncss']);
};

Gulp

For Gulp users, gulp-uncss provides a stream-based plugin to integrate UnCSS into your Gulp pipelines.

Example gulpfile.js

const gulp = require('gulp');
const uncss = require('gulp-uncss');

gulp.task('default', function () {
    return gulp.src('site.css')
        .pipe(uncss({
            html: ['index.html', 'posts/**/*.html']
        }))
        .pipe(gulp.dest('./dist'));
});

Broccoli

For Broccoli users, broccoli-uncss allows you to apply UnCSS to your CSS trees.

Example Brocfile.js

const uncss = require('broccoli-uncss');
const css = 'styles';

module.exports = uncss(css, {
    html: ['index.html']
});

Please refer to the documentation of each respective plugin for detailed installation and configuration instructions.