Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-css-rebase-urls with all npm packages installed. Try it out:

var gulpCssRebaseUrls = require("gulp-css-rebase-urls")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-css-rebase-urls v0.0.5

Rebase relative image URLs


Rebase relative image URLs

This is still a work in progress


Install with npm

npm install gulp-css-rebase-urls --save-dev


var gulp = require('gulp');
var rebaseUrls = require('gulp-css-rebase-urls');

gulp.task('default', function () {
        .pipe(concat('style.css')) // <-- just an example

What it tries to solve

Let's say you have this structure:

|-- css
|   |-- some
|   |   `-- deep
|   |       |-- path
|   |       |   `-- style.css
|   |       `-- style.css
|   `-- style.css
`-- img
    |-- a.jpg
    |-- b.jpg
    `-- deeper
        `-- c.jpg

In css/style.css you might have:

.sel {
    background: url('../img/deeper/c.jpg') no-repeat top left;

And in css/some/deep/path/style.css you might have:

.item {
    background: url('../../../../img/a.jpg') no-repeat top left;

When I minify everything, for example to be in ./style.css in production. I want this final file for the css above:

.sel {
    background: url('img/deeper/c.jpg') no-repeat top left;
.item {
    background: url('img/a.jpg') no-repeat top left;

Pull requests and use cases welcome.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free