gulp-useref cannot find absolute path

Question

I have public resource like this:

public/
    xyz/
        index.html
        js/
            a.js
            b.js
        css/
            a.css
            b.css

I want to use gulp-useref to build html, I change index.html to this:

<!-- build:css /xyz/css/index.css -->
<link href="/xyz/css/a.css" rel="stylesheet" />
<link href="/xyz/css/b.css" rel="stylesheet" />
<!-- endbuild -->

<!-- build:js /xyz/js/index.js -->
<link href="/xyz/js/a.js" rel="stylesheet" />
<link href="/xyz/js/b.js" rel="stylesheet" />
<!-- endbuild -->

I write gulp like this:

gulp.task("html", async function() {
    gulp.src("public/xyz/*.html")
    .pipe(useref())
    .pipe(gulpif("*.js", uglify()))
    .pipe(gulpif("*.css", cssMin()))
    .pipe(gulp.dest("dist/public/xyz"))
})

The First problem is: useref cannot find the absolute path: /xyz/js/a.js.

Then I try to change html template to this:

<!-- build:css /xyz/css/index.css -->
<link href="css/a.css" rel="stylesheet" />
<link href="css/b.css" rel="stylesheet" />
<!-- endbuild -->

<!-- build:js /xyz/js/index.js -->
<link href="js/a.js" rel="stylesheet" />
<link href="js/b.js" rel="stylesheet" />
<!-- endbuild -->

It runs ok, Then The second problem occurs, useref produce redundant xyz directory:

dist/
    public/
        xyz/
            index.html
            xyz/
                js/
                    a.js
                    b.js
                css/
                    a.css
                    b.css

Answer 1

In assumption that you want your directory output to look like this:

dist/
    xyz/
        index.html
        js/
            a.js
            b.js
        css/
            a.css
            b.css

Then you need to do the following:

1. Change your source glob to affect all htmls from the root path of your assets. In this scenario, it would be public.
2. Use the gulp-useref#transformPath option that provides the mechanism to customize the path resolution of your assets.

---

Here's a repl.it of the code below:

const gulp = require('gulp');
const gulpIf = require('gulp-if');
const useref = require('gulp-useref');
const uglify = require('gulp-uglify');
const minifyCss = require('gulp-clean-css');

const path = require('path');

const ABS_PATH_INDICATOR = `${path.sep}${path.sep}`;

gulp.task('html', async function () {
    gulp.src('public/**/*.html')
        .pipe(
            useref({
                transformPath(assetPath) {
                    // an absolute path asset will have a file path
                    // that has two separators in the path
                    // e.g. <script src="/xyz/js/a.js"></script> will have
                    // /home/<rootpath>/<project-path>/public/xyz//xyz/js/a.js

                    // is this path using an absolute path as an asset?
                    if (assetPath.includes(ABS_PATH_INDICATOR)) {
                        // get the absolute path
                        const absPath = assetPath
                            .split(ABS_PATH_INDICATOR)
                            .pop();

                        // resolve the path properly
                        return path.resolve(path.join('public', absPath));
                    }

                    // else return the path properly
                    return assetPath;
                },
            })
        )
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulpIf('*.css', minifyCss()))
        .pipe(gulp.dest('dist'));
});