Since UnCSS is now a PostCSS plugin which can be combined with other CSS processing steps, there is little incentive to add a separate pass to your build step. Instead of using gulp-uncss, you can replicate the functionality by the following gulp task:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var uncss = require('postcss-uncss');
gulp.task('default', function () {
var plugins = [
uncss({
html: ['index.html', 'posts/**/*.html', 'http://example.com']
}),
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
Now you can add other plugins to complement UnCSS, such as cssnano.
gulp-uncss
Remove unused CSS with UnCSS.
If you have any difficulties with the output of this plugin, please use the UnCSS tracker.
With npm do:
npm install gulp-uncss --save-dev
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!
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:
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.
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.
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.
Pull requests are welcome. If you add functionality, then please add unit tests to cover it.
MIT © Ben Briggs