gulp-ex-css-url-adjuster
This package is forked from gulp-css-url-adjuster
What does this fork change
- add support for append file md5
- prepend differently for relative path and absolute path
For example:
.cool-background {
background-image: url('coolImage.jpg');
background-image: url('/coolImage.jpg');
background-image: url('/coolImage.jpg?a=1&b=2#tag1');
background-image: url('data:image/jpg;base64,/9j/ke4uvs');
background-image: url('http://img.cdn.com/coolImage.jpg');
}
const gulp = require('gulp');
const urlAdjuster = require('gulp-ex-css-url-adjuster');
gulp.task('fixCssUrl', function () {
return gulp.src('test.css')
.pipe(urlAdjuster({
prepend: '/absolute/only',
prependRelative: 'relative/only',
append: '?@MD5&fallback',
root: 'test'
}))
.pipe(gulp.dest('dist'));
});
.cool-background {
background-image: url('relative/only/coolImage.jpg?<md5 code of this image file or the fallback string>');
background-image: url('/absolute/only/coolImage.jpg?<md5 code of this image file or the fallback string>');
background-image: url('/coolImage.jpg?a=1&b=2&<md5 code of this image file or the fallback string>#tag1');
background-image: url('data:image/jpg;base64,/9j/ke4uvs');
background-image: url('http://img.cdn.com/coolImage.jpg');
}
Below is the original READEME file
This package allows gulp to change css urls
css file:
.cool-background {
background-image: url('coolImage.jpg');
}
var urlAdjuster = require('gulp-css-url-adjuster');
gulp.src('style.css').
pipe(urlAdjuster({
prepend: '/image_directory/',
append: '?version=1',
}))
.pipe(gulp.dest('modifiedStyle.css'));
.cool-background {
background-image: url('/image_directory/coolImage.jpg?version=1');
}
only adjust relative paths:
.cool-background {
background-image: url('coolImage.jpg');
}
.neato-background {
background-image: url('/images/neatoImage.jpg');
}
gulp.src('style.css').
pipe(urlAdjuster({
prependRelative: '/image_directory/',
}))
.pipe(gulp.dest('modifiedStyle.css'));
.cool-background {
background-image: url('/image_directory/coolImage.jpg');
}
.neato-background {
background-image: url('/images/neatoImage.jpg');
}
or replace path to another:
.cool-background {
background-image: url('/old/path/coolImage.jpg');
}
.neato-background {
background-image: url('/old/path/images/neatoImage.jpg');
}
gulp.src('style.css').
pipe(urlAdjuster({
replace: ['/old/path','/brand/new'],
}))
.pipe(gulp.dest('modifiedStyle.css'));
.cool-background {
background-image: url('/brand/new/coolImage.jpg');
}
.neato-background {
background-image: url('/brand/new/images/neatoImage.jpg');
}