Skip to content
This repository has been archived by the owner on Dec 2, 2018. It is now read-only.

Commit

Permalink
Documentation improvements for 0.11.0.
Browse files Browse the repository at this point in the history
  • Loading branch information
ben-eb committed Jan 2, 2015
1 parent af1fa90 commit f35056f
Showing 1 changed file with 21 additions and 28 deletions.
49 changes: 21 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,56 +12,47 @@ 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:

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

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

## Glob example

UnCSS does not provide native support for globbing patterns. If you would like gulp-uncss to parse a directory recursively, then you can use the [glob module](https://www.npmjs.org/package/glob) like so:
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:

```js
var glob = require('glob');

gulp.task('glob', function() {
gulp.src('site.css')
.pipe(uncss({
html: glob.sync('templates/**/*.html')
}))
.pipe(gulp.dest('./out'));
});
```

## URL example

UnCSS can also visit your website for the HTML it uses to analyse the CSS against. Here is an example:

```js
gulp.task('urls', function() {
gulp.src('site.css')
var gulp = require('gulp');
var uncss = require('gulp-uncss');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var csso = require('gulp-csso');

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

Note that you can mix and match URLs and paths to files using the `html` option.
In just a few lines, we compiled SCSS source into a single file, removed unused CSS and minified the output!

## Options

This plugin takes slightly different options to the UnCSS module, because it is essentially just a streaming wrapper which returns a CSS stream.
Please see the [UnCSS documentation](https://github.com/giakki/uncss#within-nodejs) 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`
Expand All @@ -81,6 +72,8 @@ 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.
Expand Down

0 comments on commit f35056f

Please sign in to comment.