Rebase relative image URLs
JavaScript CSS
Latest commit b5650c0 Oct 9, 2015 @kjbekkelund Update README.md
Failed to load latest commit information.
test Initial commit Jan 19, 2014
.gitignore Initial commit Jan 19, 2014
README.md Update README.md Oct 9, 2015
index.js happy jshint Jan 28, 2014
package.json Add missing gulp-util dev dependency Jan 28, 2014

README.md

THIS REPO IS OUT OF DATE. IF YOU WANT TO MAINTAIN IT, PLEASE CONTACT ME VIA EMAIL.

gulp-css-rebase-urls

Rebase relative image URLs

This is still a work in progress

Install

Install with npm

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

Example

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

gulp.task('default', function () {
    gulp.src('css/**/*.css')
        .pipe(rebaseUrls())
        .pipe(concat('style.css')) // <-- just an example
        .pipe(gulp.dest('./build/'));
});

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.