gulp-concat-css
gulp-concat-css copied to clipboard
URL rebase not working as expected
I'm struggeling to get some url rebasing correctly with your plugin. Maybe I'm doing something obviously wrong, but I couldn't get the expected results even after trying for multiple hours.
I created a demo repository that should show what I'm trying to achieve: https://github.com/mgreter/bug-gulp-concat-css
The directory structure is pretty simple:
/
design
src # source css files
assets # css assets
dst # generated stuff
I have one styles.css in the src folder and would like to "copy" it over to dst, while adjusting/rebasing the urls to point to the original locations. I was under the impression this is what rebaseUrls is supposed to do!?
src/styles.css:
BODY { background: url("assets/image.png"); }
Expected dst/styles.css:
BODY { background: url("../src/assets/image.png"); }
Actual results:
BODY { background: url("../bug-gulp-concat-css/assets/image.png"); }
I seem to be able to get this working if I do process.chdir("src").
But doing process.chdir is not an option for me, as it is:
a) not working if I only set it locally inside the gulp tasks (it needs to be global)
b) should be avoided as it affects all threads (unsure if v8 does a real posix chdir)
Also tried various other approaches (ie. giving cwd to gulp src/dest).
Maybe somebody could clarify if I'm just using it wrong or if this is a bug!?
Thanks
Did you try to set the base?
gulp.task('test', function () {
var dst = gulp.src(['design/src/style.css'], {base: 'design'})
.pipe(concatCss('test-02.css'))
.pipe(gulp.dest('design/dst'));
return dst;
});
@mariocasciaro thx, just tried it but that doesn't give me the results I would expect.
- /src/css
- 1.css
.demo1 { background-image: url("../img/1.png"); }
- /sub/2.css
.demo2 { background-image: url("../../img/2.png"); }
.pipe(concatCSS("main.css"))
.pipe(gulp.dest(CSS_DIST_PATH))
.pipe(rename({
suffix: '.min'
}))
.pipe(cleanCSS())
.pipe(gulp.dest(CSS_DIST_PATH))
- /dist/css - main.css - main.min.css
/*main.css bad :(*/
.demo1 { background-image: url("../img/1.png"); }
.demo2 { background-image: url("../../img/2.png"); }
/*main.min.css good :)*/
.demo1{background-image:url(../img/1.png)}.demo2{background-image:url(../img/2.png)}