|
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