grunt-cache-bust icon indicating copy to clipboard operation
grunt-cache-bust copied to clipboard

Cache Bust generating converted files with '\' instead of '/'

Open BabuJoym1984 opened this issue 4 years ago • 0 comments

Hi,

I was able to use the tool properly and I was able to do proper cache busting in the case of JS, CSS and Image files.

However when I run the tool on CSS files, it is generating the image url with '' instead of '/' and because of this browser not sending correct url to server when loading the image from css. The backward slash is a problem for serving CSS as it gets encoded to something else

E.g.

.background-image {
	background-image: url("../conv-output\conv-output-1\apple.515ce08df699107b.jpg");
}

I checked the code. I found if we change the line 181 in cache-bust.js, the problem can be resolved so that we can use '/' instead of '' The change is to use path.posix.join instead of path.join

var pathToFile = opts.outputDir.length > 0 ? path.join(opts.outputDir, parsed.pathname.replace(/^.*[\\\/]/, '')) : parsed.pathname;

If I replace this line with below line the generated files comes properly and the url can be properly served from browser var pathToFile = opts.outputDir.length > 0 ? path.posix.join(opts.outputDir, parsed.pathname.replace(/^.*[\\\/]/, '')) : parsed.pathname;

This will change the css content to

.background-image {
	background-image: url("../conv-output/conv-output-1/apple.515ce08df699107b.jpg");
}

BabuJoym1984 avatar Jan 09 '20 17:01 BabuJoym1984