|
1 | | -CSS-URL |
2 | | -======= |
| 1 | +gulp-rev-css-url |
| 2 | +================ |
3 | 3 |
|
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. |
5 | 5 |
|
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: |
9 | 8 |
|
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` |
15 | 13 |
|
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.) |
18 | 17 |
|
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 | +------ |
32 | 20 |
|
| 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 | +} |
33 | 27 | ``` |
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 | +} |
37 | 35 | ``` |
38 | 36 |
|
39 | | -Tests |
40 | | --- |
| 37 | +Install |
| 38 | +------- |
| 39 | + |
41 | 40 | ```sh |
42 | | -npm test |
| 41 | +npm install --save-dev @luhn/gulp-rev-css-url |
43 | 42 | ``` |
44 | 43 |
|
45 | | -License |
46 | | ----- |
| 44 | +Usage |
| 45 | +----- |
| 46 | + |
| 47 | +Add `gulp-rev-css-url` to your Gulp pipeline, directly after `gulp-rev`. |
47 | 48 |
|
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 | +``` |
0 commit comments