gulp-uncss
    Overview
    Dependencies
    Versions
    Playground
    Code
    Documentation
    Issues
    Find an Expert
    Career Opportunities
    Alternatives
    Insights & Analysis

gulp-uncss

Remove unused CSS selectors.

1.0.6  •  Published 3 years ago  •  by Ben Briggs  •  MIT License

gulp-uncss Build Status NPM version Dependency Status

Remove unused CSS with UnCSS.

If you have any difficulties with the output of this plugin, please use the UnCSS tracker.

Install

With npm do:

npm install gulp-uncss --save-dev

Example

Single files, globbing patterns and URLs are all supported by gulp-uncss, and can be mixed and matched:

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

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

gulp-uncss can also be used in a pipeline that involves CSS pre-processing. Utilising many transforms on a single file is one of gulp’s strengths:

var gulp = require('gulp');
var uncss = require('gulp-uncss');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var nano = require('gulp-cssnano');

gulp.task('default', function () {
    return gulp.src('styles/**/*.scss')
        .pipe(sass())
        .pipe(concat('main.css'))
        .pipe(uncss({
            html: ['index.html', 'posts/**/*.html', 'http://example.com']
        }))
        .pipe(nano())
        .pipe(gulp.dest('./out'));
});

In just a few lines, we compiled SCSS source into a single file, removed unused CSS and minified the output!

Options

Please see the UnCSS documentation for all of the options you can use. Some of them aren’t as necessary when using gulp-uncss, because the CSS to analyse comes from the stream rather than the HTML files. The main options you will likely be using are:

html

Type: Array|String Required value.

An array which can contain an array of files relative to your gulpfile.js, and which can also contain URLs. Note that if you are to pass URLs here, then the task will take much longer to complete. If you want to pass some HTML directly into the task instead, you can specify it here as a string.

ignore

Type: Array Default value: undefined

Selectors that should be left untouched by UnCSS as it can’t detect user interaction on a page (hover, click, focus, for example). Both literal names and regex patterns are recognized.

timeout

Type: Integer Default value: undefined

Specify how long to wait for the JS to be loaded.

Note that options.ignoreSheets is already defined for you. gulp-uncss will only process CSS files in the stream.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs

Dependencies

gulp-util  ·  object-assign  ·  uncss  ·  tap-spec  ·  tape

Tags

unused
css
gulpplugin
Keep your dependencies fresh!
Upgrade your packages safely and continuously.
We run your CI tests and compatability tests on new versions of your packages - to determine which upgrades are safe
Just $9/month per developer

Popularity

Weekly Downloads
3.6K
Stars
977

Issues and PRs

Activity

Last ver 3 years ago
Created 6 years ago
Last commit 2 years ago
17 days between commits

Sustainability

5 contributors

Technology

Node version: 5.4.1
0 unpacked

Legal and Compliance

MIT License
OSI Approved
0 vulnerabilities

Top Experts

Ben Briggs
Maintainer, 74 commits, 4 merges, 1 PRs
Thomas de Zeeuw
1 commits, 1 PRs
VFK
1 commits, 1 PRs
Works at zirra-com
Javier Cejudo
1 commits, 1 PRs
Works at skiddoo
greenkeeperio-bot
1 commits, 3 PRs
Works at greenkeeperio
samarpanda
1 PRs