mariocasciaro / gulp-concat-css

Concatenates css files, bubbling up import statements (as per the standard), and optionally rebasing urls and inlining local import statements.
MIT License
78 stars 19 forks source link

URL rebase not working as expected #39

Open mgreter opened 7 years ago

mgreter commented 7 years ago

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

mariocasciaro commented 7 years ago

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;
});
mgreter commented 7 years ago

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

xianghongai commented 7 years ago

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