Yeoman/Grunt usemin 子文件夹

Question

当我有子文件夹时，我在使用 yeoman/grunt 和 usemin 时遇到了可怕的事情 - 试图让输出文件与在 html 中写入正确路径的同时工作。

我的基本设置是在子文件夹中有顶级页面（例如 index.html）和特定语言的页面（en、de、fr 等）——每个都有共同的 js 文件（如 jquery ) 以及特定于语言的 js 文件（css 相同，但要保持简单...）

– Gruntfile.js
– app
    |– index.html
    |– js
        jquery.js
            |– en
                english.js
            |– de
                german.js
    |– css
    |– en
        |– index.html
    |– de
        |– index.html
– dist

所以基本上 - 有顶级 index.html 有 jquery 等 - 所以那里的脚本标签可能看起来像

<script src="js/jquery.js"></script>

或带转速

<script src="js/123.jquery.js"></script>

但是在 en/index.html 中的 script 标签应该是这样的 （对于常见的 - 像 jquery）

<script src="../js/jquery.js"></script>

或带rev.

<script src="../js/123.jquery.js"></script>

麻烦的是../。

我可以得到 js 文件构建但未修订，或修订但为空，或构建和修订但在错误的位置（通常在 app 和 dist 文件夹之外/之上！）

在 en/index.html - 我无法确定 build:js 应该是什么样子 例如。

<!-- build:js js/jquery.js -->
<script src="../js/jquery.js"></script>
<!-- endbuild -->

<!-- build:js js/en/english/jquery.js -->
<script src="../js/en/english.js"></script>
<!-- endbuild -->

我已经尝试了所有我能想到的组合 - 如果我在 build:js 路径中写一个 ../ 似乎可以归结为，那么实际文件位于 app 文件夹的上一级，但是写html中的路径正确。如果我离开 ../ ，它会将文件放在正确的位置，但是 html 中没有 ../ （它显然需要） - 那么我怎么说我想要输出文件参考上一级（在 en/ 文件夹之外），但有 grunt not 把它放在上一级（在 dist 文件夹之外！）

谢谢！

Answer 1

我遇到了一个非常相似的问题。我使用他们的静态网站选项在 S3 上托管我的 grunt 生成的网站。在本地，usemin 生成的内容运行良好（使用绝对路径），但由于我将站点放在 S3 上的存储桶中，因此它需要资产文件的完整绝对路径（带域）才能实际工作。

输入grunt-replace。使用搜索/替换模式是我发现实现这一目标的唯一方法。对我来说，我只需要将“/assets/”替换为“http://s3domain.com/bucket/site-name/assets/”。这是我的任务定义：

replace: {
  dist: {
    options: {
      patterns: [
        {
          match: /\/assets\//,
          replacement: 'http://s3domain.com/bucket/site-name/assets/'
        }
      ]
    },
    files: [
      {
        expand: true,
        src: ['dist/**/*.html']
      }
    ]
  }
}

我已将其添加到我的 deploy 任务中，以便它仅在我即将推送到 S3 之前运行。

对于您的情况，您可以让usemin 做它的事情，然后只替换子目录中的文件（如en 或es）并将资产路径更改为在它们之前有../。