The problem with the calculation of the path to the fonts

[khusamov]

I have a problem with file paths.

Gulp task:

gulp.task("css", function () {
    let src = ["bower_components/bootswatch/united/bootstrap.css"];
    gulp.src(src)
        .pipe(postcss([copyAssets({ base: "public/build" })], { to: "public/build/css/all.css" }))
        .pipe(concatCss("all.css"))
        .pipe(gulp.dest("public/build/css"));
});

At the entrance to the file:

bower_components/bootswatch/united/bootstrap.css:

@font-face {
    src: url('../fonts/glyphicons-halflings-regular.eot');
}

The output is a file with an error (wrong path):

public/build/all.css:

@font-face {
    src: url("../../bootswatch/fonts/glyphicons-halflings-regular.eot");
}

And here I should get the file:

@font-face {
    src: url("../../fonts/glyphicons-halflings-regular.eot");
}

How do I configure a task so that the path to the font correctly calculated?

[alexmchardy]

Hi @khusamov,

I'm sorry you're having problems. I created a small repo that attempts to reproduce your issue:

https://github.com/alexmchardy/copy-assets-issue-4

When I ran gulp in that repo, everything seemed to get built correctly. The built public directory looks a bit different than what you stated above however. It looks like this:

public
`-- build
    |-- css
    |   `-- all.css
    `-- fonts
        |-- glyphicons-halflings-regular.eot
        |-- glyphicons-halflings-regular.svg
        |-- glyphicons-halflings-regular.ttf
        |-- glyphicons-halflings-regular.woff
        `-- glyphicons-halflings-regular.woff2

In all.css the line you referred to above looks correct to me:

@font-face {
    src: url("../fonts/glyphicons-halflings-regular.eot");
}

Please tell me if there's something I'm missing.

[khusamov]

Thank you! I will understand.