luhn / gulp-rev-css-url

gulp-rev-css-url

A lightweight plugin for gulp-rev to replace CSS url() calls with hashed URLs.

This is a fork of @galkinrost's gulp-rev-css-url, which appears to be unmaintained. Changes include:

• Tested against up-to-date dependencies and Node 18+.
• Removed support for JS files.
• Support for relative URLs. e.g. ../images/foo.png
• Support for query strings and fragments. e.g. myfont-webfont.eot?#iefix

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

Sample

Take the following simple CSS file (css/main.css) which references images/dummy.jpg.

body {
	background: url("../images/dummy.jpg");
}

After running gulp-rev with gulp-rev-css-url, the resulting CSS file might look like this:

body {
	background: url("../images/dummy-0849cad9cc.jpg
}

Install

npm install --save-dev @luhn/gulp-rev-css-url

Usage

Add gulp-rev-css-url to your Gulp pipeline, directly after gulp-rev.

const gulp = require('gulp');
const rev = require('gulp-rev');
const override = require('gulp-rev-css-url');

function rev() {
	return gulp.src('./app/**/*')
		.pipe(rev())
		.pipe(override())
		.pipe(gulp.dest('./build/'))
		.pipe(rev.manifest())
		.pipe(gulp.dest('./build/'));
};

exports.default = rev;