Question

我有这样的公共资源：

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

然后您需要执行以下操作：

更改源glob，以影响资产根路径中的所有html。在这种情况下，它将是public。
使用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'));
});

gulp-useref找不到绝对路径

1 个答案: