javascript - Grunt 文件输出静态资源指向指定的 URL

Question

在我的索引文件中，我有这样的内容:

<!-- build:js({.tmp,app}) scripts/main.js -->
    <script src="scripts/foo.js"></script>
    <script src="scripts/bar.js"></script>
<!-- endbuild -->

然后输出到我的 dist，如下所示:

<script src="scripts/cce9cd3a.main.js"></script>

我想做的是修改 dist 的渲染方式，使其显示如下内容:

<script src="https://s3.amazonaws.com/etc/etc/static/scripts/cce9cd3a.main.js"></script>

我的想法是我希望它以相同的方式输出到 dist 文件夹，我将其移至 s3。使用 grunt 将所有静态资源添加到同一个静态服务 URL 之前的干净方法是什么？

Answer 1

根据我们在评论中进行的讨论，在 grunt-usemin 起作用后，您有两个常规选项。

1) 从 shell 中查找并替换。

如果您使用带有 grep 和类似工具的 *nix 系统，您可以将该文件放在易于 grep 和替换的位置。例如，您可以将构建 block 更改为:

<!-- build:js({.tmp,app}) awsreplacepath/main.js -->
    <script src="scripts/foo.js"></script>
    <script src="scripts/bar.js"></script>
<!-- endbuild -->

所以你会得到类似的东西:

<script src="awsreplacepath/cce9cd3a.main.js"></script>

然后使用 grep-and-replace shell 脚本(如这些问题中讨论的脚本)将 awsreplacepath 替换为要引用的路径。

• How to grep and replace
• How to find and replace all occurrences of a string recursively in a directory tree?

2) 在 grunt 完成之前查找并替换。

有一些用于 grunt 的查找和替换插件，但是 grunt-string-replace根据 npmjs.org，似乎使用率最高。

这与第一个选项没有太大不同。

在这两种情况下，正则表达式都应该很简单，因为您可以选择一个本质上肯定是唯一的字符串...因此您只需将“awsreplacepath”之类的内容放入正则表达式即可。

...只需记住，您需要移动的 usemin 生成的 main.js 文件仍位于 awsreplacepath 目录中。我们所做的只是更改 HTML，以防止您必须自己编辑文件。