9

我在使用 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 中，脚本标签应该看起来像（对于常见的 - 像 jquery）

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

或转。

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

这是 ../ 这就是麻烦。

我可以得到构建的 js 文件但不是 rev'd，或者 rev'd 但为空，或者 build 和 rev'd 但在错误的位置（通常在 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/ 文件夹外），但咕哝着不要把它上一级（在 dist 文件夹外！）

谢谢！

4

1 回答 1

4

我遇到了一个非常相似的问题。我使用他们的静态网站选项在 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做它的事情，然后只替换子目录中的文件（如enor es）并将资产路径更改为../在它们之前。

于 2013-11-03T18:28:33.917 回答