- Notifications
You must be signed in to change notification settings - Fork0
chrisladams/gulp-css-rebase-urls
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
gulp-css-rebase-urls
Rebase relative image URLs
This is still a work in progress
Install with npm
npm install gulp-css-rebase-urls --save-devvargulp=require('gulp');varrebaseUrls=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/'));});
Let's say you have this structure:
.|-- css| |-- some| | `-- deep| | |-- path| | | `-- style.css| | `-- style.css| `-- style.css`-- img |-- a.jpg |-- b.jpg `-- deeper `-- c.jpgIncss/style.css you might have:
.sel {background:url('../img/deeper/c.jpg') no-repeat top left;}
And incss/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 inproduction. 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;}
This option will prefix the rebased relative URL with a forward slash to convert it into an absolute path. This is to accommodate situations where the CSS files are being transferred into another directory (such as a temp directory for generated files) but the images aren't being relocated.
By default the option is turned off.
vargulp=require('gulp');varrebaseUrls=require('gulp-css-rebase-urls');gulp.task('default',function(){gulp.src('css/**/*.css').pipe(rebaseUrls({convertToAbsolute:true,})).pipe(concat('style.css'))// <-- just an example.pipe(gulp.dest('./build/'));});
Pull requests and use cases welcome.
About
Rebase relative image URLs
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- JavaScript69.7%
- CSS30.3%