grunt-usemin阻止路径与html文件无关？

Question

很难理解如何在grunt-usemin的配置和使用中的各个点处理路径.

我有以下repo布局,其中repo root也将是web app root:

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

所以index.html文件 - > somedomain.com/dashboard/index.html.

index.html文件包含/ vendor文件夹中的一些CSS和JS资产.我有grunt配置为将构建输出放在构建文件夹中:

/build/dashboard/index.html

在index.html文件中,我有包含所有CSS链接和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/app.min.css和build/app.min.js中.

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

有解决方案吗？

Answer 1

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

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

这导致 app* 文件与 index.html 一起位于 /build/dashboard 中（这是我想要的位置），并且 index.html 最终带有以下标签：

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

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