node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

gulp-css-url-rebase

gulp-css-url-rebase Build Status Dependency Status Used by

Rebase relative image URLs

This project has been forked to fix issues that were not resolved by its original author.

Install

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

Example

var gulp = require('gulp');
var rebase = require('gulp-css-url-rebase');
 
gulp.task('default', function () {
  gulp.src('css/**/*.css')
    .pipe(rebase())
     .pipe(concat('style.css'))
     .pipe(gulp.dest('./build/'));
});

What it tries to solve

Let's say you have this structure:

css
├ style.css
├ some
│  └ deep-path/
│     └ style.css
img
 ├ logo.png
 ├ cat.png
 └ icons/
   ├ home.png
   └ cancel.png

In css/style.css you might have:

.sel {
  background: url('../img/icons/home.png') no-repeat top left;
}

And in css/some/deep-path/style.css:

.item {
  background: url('../../../img/logo.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/icons/home.jpg') no-repeat top left;
}
.item {
  background: url('img/logo.jpg') no-repeat top left;
}