Skip to content

Commit f07db18

Browse files
committed
Improve README.
1 parent a351da9 commit f07db18

File tree

2 files changed

+52
-36
lines changed

2 files changed

+52
-36
lines changed

README.md

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,64 @@
1-
CSS-URL
2-
=======
1+
gulp-rev-css-url
2+
================
33

4-
The lightweight plugin to override urls in css files to hashed after <a href="https://www.npmjs.org/package/gulp-rev">gulp-rev</a>
4+
A lightweight plugin for [gulp-rev](https://www.npmjs.org/package/gulp-rev) to replace CSS `url()` calls with hashed URLs.
55

6-
What is the result?
7-
--
8-
See <a href="https://github.com/galkinrost/gulp-rev-css-url/tree/master/expected">here</a>
6+
This is a fork of @galkinrost's [gulp-rev-css-url](https://www.npmjs.com/package/gulp-rev-css-url), which appears to be unmaintained.
7+
Changes include:
98

10-
Install
11-
--
12-
```sh
13-
npm install gulp-rev-css-url
14-
```
9+
- Tested against up-to-date dependencies and Node 18+.
10+
- Removed support for JS files.
11+
- Support for relative URLs. e.g. `../images/foo.png`
12+
- Support for query strings and fragments. e.g. `myfont-webfont.eot?#iefix`
1513

16-
Usage
17-
--
14+
As far as I'm aware, this is the only `gulp-rev` (or equivalent) plugin that properly handles relative URLs.
15+
Most will work, if at all, *only* if the relative URL backs out to the base directory.
16+
(Please let me know if this isn't the case! I'd love other options.)
1817

19-
```javascript
20-
var gulp=require('gulp');
21-
var rev=require('gulp-rev');
22-
var override=require('gulp-rev-css-url');
23-
24-
gulp.task('rev',function(){
25-
return gulp.src('./app/**/*')
26-
.pipe(rev())
27-
.pipe(override())
28-
.pipe(gulp.dest('./build/'))
29-
.pipe(rev.manifest())
30-
.pipe(gulp.dest('./build/'));
31-
});
18+
Sample
19+
------
3220

21+
Take the following simple CSS file (`css/main.css`) which references `images/dummy.jpg`.
22+
23+
```css
24+
body {
25+
background: url("../images/dummy.jpg");
26+
}
3327
```
34-
AND
35-
```sh
36-
gulp rev
28+
29+
After running gulp-rev with gulp-rev-css-url, the resulting CSS file might look like this:
30+
31+
```css
32+
body {
33+
background: url("../images/dummy-0849cad9cc.jpg
34+
}
3735
```
3836

39-
Tests
40-
--
37+
Install
38+
-------
39+
4140
```sh
42-
npm test
41+
npm install --save-dev @luhn/gulp-rev-css-url
4342
```
4443

45-
License
46-
----
44+
Usage
45+
-----
46+
47+
Add `gulp-rev-css-url` to your Gulp pipeline, directly after `gulp-rev`.
4748

48-
MIT
49+
```javascript
50+
const gulp = require('gulp');
51+
const rev = require('gulp-rev');
52+
const override = require('gulp-rev-css-url');
53+
54+
function rev() {
55+
return gulp.src('./app/**/*')
56+
.pipe(rev())
57+
.pipe(override())
58+
.pipe(gulp.dest('./build/'))
59+
.pipe(rev.manifest())
60+
.pipe(gulp.dest('./build/'));
61+
};
62+
63+
exports.default = rev;
64+
```

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "gulp-rev-css-url",
33
"version": "0.1.0",
4-
"description": "The lightweight plugin to override urls in css files to hashed after gulp-rev",
4+
"description": "A lightweight plugin for gulp-rev to replace CSS url() calls with hashed URLs.",
55
"license": "MIT",
66
"repository": {
77
"type": "git",

0 commit comments

Comments
 (0)