gulp-css-url-rebase
v0.2.3
Published
Rebase relative image URLs
Downloads
1,878
Readme
gulp-css-url-rebase
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;
}