gulp-useref не может найти абсолютный путь

Question

У меня есть ресурс publi c, подобный этому:

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

Я хочу использовать gulp-useref для построения html, я изменяю index.html на этот:

<!-- 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 -->

Я пишу gulp следующим образом:

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

Первая проблема: useref не может найти absolute path: /xyz/js/a.js.

Затем я пытаюсь изменить html шаблон для этого:

<!-- 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 -->

Он работает нормально, затем Возникает вторая проблема , useref создает избыточный каталог xyz:

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

Answer 1

Предполагая, что вы хотите, чтобы вывод вашего каталога выглядел следующим образом:

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

Затем вам нужно сделать следующее:

1. Изменить глобус источника, чтобы он влиял на все htmls от root пути ваших активов. В этом случае это будет public.
2. . Используйте опцию gulp-useref # transformPath , которая предоставляет механизм для настройки разрешения пути ваших активов.

---

Вот repl.it кода ниже:

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'));
});