Yeoman/Grunt使用usemin子文件夹

Question

Yeoman/Grunt使用usemin子文件夹

pathgruntjsyeomansubdirectorygrunt-usemin

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>

或者使用rev

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

但是在en/index.html中，脚本标记应该像这样（对于常见的 - 如jquery）

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

或使用rev属性。

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

问题出在../ 上。

我可以构建js文件但不能对其进行版本控制，或者版本控制了但是为空，或者构建并且版本控制成功但存储位置不正确（通常在应用程序和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将其放置在上一级目录（即dist文件夹之外）？

谢谢！

- Calv J

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- deadwards · Accepted Answer

我遇到了一个非常类似的问题。我使用S3的静态网站选项托管了由Grunt生成的网站。在本地，usemin生成的内容正常工作（使用绝对路径），但由于我将网站放在S3的存储桶中，它需要完整的绝对路径（包括域名）才能实际工作。

这时候就需要用到grunt-replace。使用搜索/替换模式是我找到的唯一实现此目的的方法。对我来说，我只需要用"http://s3domain.com/bucket/site-name/assets/"替换"/assets/"即可。这是我的Grunt任务定义：

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)，并更改资产路径，使其在前面添加../。