node.js - grunt-usemin 阻止与 html 文件无关的路径？

Question

在理解如何在 grunt-usemin 的配置和使用的不同点处理路径时遇到很多麻烦。

我有以下 repo 布局，其中 repo root 也将是 web 应用程序根:

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

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

index.html 文件包含一些来自/vendor 文件夹的 CSS 和 JS 资源。我已将构建输出配置为将构建输出放在构建文件夹中:

/build/dashboard/index.html

在 index.html 文件中，我用 usemin block 包裹了所有 CSS 链接和 JS 脚本标签:

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

我必须用“(.)”指定一个“替代搜索路径”，这样“/vendor/backbone.js”的脚本标签才能在正确的位置找到它。在我这样做之前，它一直在寻找/dashboard/vendor/backbone.js。

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

问题是，grunt-usemin 似乎正在使用我为两个上下文指定的“app.min.*”路径，使它们无法一起工作:

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

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

有解决办法吗？

Answer 1

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

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

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

然后加入build与 app.min.css在 build/app.min.css 吐出输出文件

但是 usemin 任务只是将你 block 中的路径替换为你最终得到的路径

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

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

所以我的工作围绕着这个想法:如果 dest 会怎样？目录是相对于 HTML 文件所在的位置？这不是解决这个问题吗？所以给出上面的例子，如果 dest 会怎么样？是build/dashboard ？您可以看到它会吐出输出文件位置并正确链接它。请记住，您应该创建一个复制任务来复制您的 HTML 文件，因此请确保将您的 HTML 文件复制到 build/dashboard/index.html。和以前一样。

当然，下一个问题是如果我在多个目录中有 HTML 文件怎么办？为每个可能存放 HTML 文件的目录创建一个 useminPrepare 目标会不会非常痛苦和不直观？这就是为什么我在创建自己的 grunt 脚手架时创建了一个非常特殊的 grunt 任务来解决这个问题。我称之为useminPreparePrepare是的，它被故意命名为愚蠢的，因为我希望有一天当 usemin 人对这个问题进行实际修复时，我会完全删除这个东西。

顾名思义，这是准备 useminPrepare 配置的任务。它完全符合我上面的描述。它的所有配置镜像 useminPrepare 配置(事实上，其中大部分只是简单地复制到 useminPrepare)，有一个异常(exception):您需要指定一个 src directory 来标识所有源的根目录，以便它可以生成 HTML 文件的相对路径。所以在你的例子中 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目录，使配置看起来更直观。