grunt-usemin块路径是否与html文件无关？

Question

在grunt-usemin的配置和使用中，很难理解路径是如何在不同的点处理的。

我有以下repo布局，其中repo根也将是web应用根：

/dashboard/index.html
/Gruntfile.js
/vendor/...some 3rd party CSS and JS...

因此，dashboard文件-> somedomain.com/ index.html /index.html。

index.html文件包含/vendor文件夹中的一些CSS和JS资源。我将grunt配置为将构建输出放在一个build文件夹中：

/build/dashboard/index.html

在index.html文件中，我在所有的CSS link和JS脚本标签周围都包含了usemin块：

<!-- build:css(.) app.min.css -->
<!-- build:js(.) app.min.js -->

我必须用"(.)“指定”备用搜索路径“。这样就可以在正确的位置找到它，这样就可以通过脚本标记为"/vendor/backbone.js“找到它。在我这么做之前，它一直在寻找/dashboard/vendor/backbone.js。

我希望处理CSS/JS资产的输出输出到build/dashboard/app.min.css和build/dashboard/app.min.js，并由index.html使用简单的相对"app.min.css/js“路径包含。

问题是，grunt-usemin似乎使用了我为这两个上下文指定的"app.min.*“路径，这使得它们无法协同工作：

1)出于创建文件的目的，它将路径视为相对于build目录；文件最终位于build/app.min.css和build/app.min.js中。

2)为了生成新的链接/脚本标记，它将该路径视为相对于index.html文件的路径；浏览器加载build/dashboard/index.html，然后尝试加载映射到build/dashboard/app.min.css的"app.min.css“。

有解决方案吗？

Answer 1

我真的来晚了，但我也对这个问题感到非常沮丧，没有找到任何令人满意的修复或解决办法。因此，我想出了一些非常肮脏的技巧，希望能更好地解决这个问题。所以我想和大家分享一下。

首先，让我们快速回顾一下为什么会发生这个问题。当usemin生成输出JS/CSS文件时，它会在您的dest目录和您在usemin块中指定的输出目录之间执行一个简单的路径连接。因此，如果dest为build，而usemin block为

<!-- build:css(.) app.min.css -->

然后，它将build与app.min.css结合起来，生成build/app.min.css格式的输出文件

但是usemin任务只是简单地替换块中的路径，最终得到

<link rel="stylesheet" href="app.min.css"/>

它现在链接了错误的目录，因为您的HTML文件位于build/dashboard/index.html下

所以我的工作围绕着这样一个想法:如果dest目录相对于HTML文件所在的位置会怎么样？那么在上面的例子中，如果dest是build/dashboard呢？您可以看到，它将显示输出文件的位置并正确链接它。请记住，您应该创建一个复制任务来复制您的超文本标记语言文件，因此请确保您的超文本标记语言文件像以前一样复制到build/dashboard/index.html。

当然，下一个问题是，如果我在多个目录中有HTML文件，该怎么办？为每个目录创建一个useminPrepare目标，这不是非常痛苦和不直观吗？这就是为什么我在创建自己的grunt脚手架时，为了解决这个问题而创建了一个非常特殊的grunt任务。我称它为useminPreparePrepare是的，它是故意愚蠢地命名的，因为我希望有一天当美国人真正解决这个问题时，我能把它完全移除。

顾名思义，这是一项准备useminPrepare配置的任务。它所做的就是我上面描述的。它的所有配置都是useminPrepare配置的镜像(实际上，大多数配置只是简单地复制到useminPrepare上)，但有一个例外:您需要指定一个src目录来标识所有源代码的根目录，以便它可以生成到useminPrepare文件的相对路径。因此，在您的示例中，src: "."就没问题了。要使用useminPreparePrepare，首先将其导入到您的构建中(您可能只想复制并粘贴我的代码，我不介意)，将您的useminPrepare任务重命名为useminPreparePrepare并添加我刚才提到的src属性。确保使用您喜欢的任何目标运行useminPreparePrepare，然后立即运行useminPrepare而不指定目标，以便运行的所有目标。这是因为useminPreparePrepare会根据HTML文件的位置为每个目录生成一个目标，并为您运行的useminPreparePrepare目标复制您的配置。这样，您的配置就可以简单地查找所有HTML文件。

示例

"useminPreparePrepare": {
    // Search for HTML files under dashboard even though src is .
    // because we want to avoid including files generated under build directory.
    html: "dashboard/**/*.html",
    options: {
        src: ".",
        dest: "build",
        ...

"usemin": {
    html: ["build/**/*.html"],
    ...

"copy": {
    html: {
        files: [{
                expand: true,
                src: ["dashboard/**/*.html"],
                dest: "build"
            }
        ]
    },
    ...

希望这能有所帮助！祝你今天愉快。

编辑:我意识到，在上面的例子中，如果你实际上包含了当前目录中的所有HTML文件，那么如果没有提前清理生成的HTML文件，你也会将它们包括在内。因此，要么在它们之前清理它们，要么在dashboard目录下查找。我建议将src和dest目录分开，这样配置看起来会更直观。

Answer 2

我不喜欢它，但到目前为止，我找到的唯一让它工作的方法是指定一个完整的路径：

<!-- build:css(.) /dashboard/app.min.css -->
<!-- build:js(.) /dashboard/app.min.js -->

这将导致应用程序*文件与index.html一起位于/build/dashboard中(这是我想要它们的位置)，而index.html以以下标记结束：

<link rel="stylesheet" href="/dashboard/app.min.css">
<script src="/dashboard/app.min.js"></script>

这意味着仪表板应用程序现在敏锐地意识到它在整体中的位置，所以你不能只重命名或重新定位它在树中的位置，而不更新那些路径。