gulp-concat-css icon indicating copy to clipboard operation
gulp-concat-css copied to clipboard

URL rebase not working as expected

Open mgreter opened this issue 9 years ago • 3 comments
trafficstars

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

mgreter avatar Oct 26 '16 15:10 mgreter

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 avatar Nov 01 '16 07:11 mariocasciaro

@mariocasciaro thx, just tried it but that doesn't give me the results I would expect.

mgreter avatar Nov 01 '16 09:11 mgreter

- /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)}

xianghongai avatar Apr 11 '17 08:04 xianghongai