Question

我使用gulp useref在我index.html后minify替换/连接我的文件。当我通过路径时，我可以让useref工作，但是当我没有定义路径时，我希望它保留文件的原始路径。我知道我可以通过并为每个文件添加构建路径注释，或者我可以运行任务来缩小所有其他文件。如果useref可以输出原始路径，那么这似乎是疯狂而毫无意义的，那么这项任务就可以完成所有工作。

示例 - 注意剥离的代码，例如aka rel =＆＃34;＆＃34;。

HTML文件：

<!-- build:css I want this to return original path into my new "dist" folder. -->
    <link href="fonts/map/map.css">
    <link href="layout/item/item.css">
<!-- endbuild -->

this works bc path is defined and the files exist in the same folder.
<!-- build:css styles/combined.css -->
    <link href="styles/style.css">
    <link href="styles/color.css">
<!-- endbuild -->

Gulp任务：

gulp.task('css', function () {
        return gulp.src('index.html')
            .pipe(useref())
            .pipe(minifyCss())
            .pipe(gulp.dest('dist'));
    });

结果HTML - index.html文件已输出到＆＃34; dist＆＃34;文件夹和.css files为minified。这一切都有效，但注意到href = "replace" bc在路径的注释中没有任何内容被定义，而且名为undefined的文件在dist文件夹中输出：

<link href="replace">
<link href="css/combined.css">

和我想要的是是......

<link href="fonts/map/map.css">
<link href="layout/item/item.css">
<link href="css/combined.css">

Answer 1

我有同样的问题。我发现这是因为gulp-useref将Vinyl文件上的base属性设置为文件的父目录。幸运的是，这可以通过自定义插件轻松更改：

// other imports...
const through = require('through2');

function useRefTask() {
    return src('.tmp/**/*.html')
    .pipe(useref())
    .pipe(through.obj((file, _, cb) => {
        file.base = path.join(process.cwd(), "src"); // Change to whatever your input directory is.
        cb(null, file);
    })
    // rest of the pipeline...
}

注意：dest使用relative属性来确定将文件写入哪里，因此值得一看并确保其保留目录结构。

如何在Gulp useref中返回原始路径？

1 个答案: