如何连接 javascript 文件并替换 HTML 中的引用？

Posted 2023-03-07

【中文标题】如何连接 javascript 文件并替换 HTML 中的引用？

【英文标题】：How can I concatenate javascript files and replace the reference in my HTML?

【发布时间】：2013-08-02 06:40:33

【问题描述】：

作为我在 TeamCity 上的构建/CI 流程的一部分，我想指定一组在我的 html 中引用的 javascript 文件并将它们组合成一个。

换句话说，这就是我想要完成的。

之前：

<script src="1.js" />
<script src="2.js" />

之后

<script src="combined.js" />

我正在寻找一个命令行工具来将 1.js 和 2.js 连接成 combine.js。然后，一个命令行工具（或者可能是相同的工具）将 HTML 文件中的引用替换为这个新文件。请告诉我如何做到这一点。

到目前为止我所尝试的：

我一直在看grunt-usemin，它看起来不错，但需要构建服务器在每次构建时执行npm install 以获取依赖项，然后运行它。这需要很长时间并且不是一个好的解决方案，因为我们非常频繁地构建+部署。

我知道我也可以将我的node_modules 文件夹添加到 git，但这也是不可取的。如果 grunt 可以运行全局安装的这些模块，那就太好了，但这不是 grunt 的方式（除非我弄错了，grunt 希望所有东西都安装在本地）。

有人还建议在开发者机器上运行 grunt。同样，由于我们有瞬态虚拟机，所以不受欢迎，这会破坏开发流程。

如果我可以在本地运行 grunt-usemin 而无需 grunt，那就太好了！

【问题讨论】：

grunt-* 没有 grunt 不会发生 :) 但是看看这里，谁知道呢？ github.com/h5bp/node-build-script

h5bp 看起来很有希望，但在尝试让它与 TeamCity 代理一起工作 2 天后，我不得不放弃。不过真的很感谢这个建议。我最终修改了自己的，请参阅答案。

【参考方案1】：

你可以使用 cat 来组合文件

cat 1.js 2.js > combined.js

要替换 html 块，您可以使用 sed

sed -i "s/<script src=\"1.js\">\n<script src=\"2.js\">/<script src=\"combined.js\">/g" *.html

这是一个相当通用的解决方案，但对我来说似乎有点笨拙。如果您在节点中呈现此 html，如果组合文件存在，您可能会考虑在 javascript 中替换它。

if (fs.existsSync('combined.js')) 
    res.end(html_contents.replace('<script src="1.js"/>\n<script src="2.js"/>','<script src="combined.js">'));
 else 
    res.end(html_contents);

为了获得更好的性能，您当然可以使用 fs.exists 的异步版本

【参考方案2】：

我最终创建了自己的：https://npmjs.org/package/hashcat

npm install -g hashcat

@gustavohenke 的建议很接近，但最终证明 h5bp 在构建服务器上使用时问题太大。最终创建这个模块并没有花费很长时间，并且可以满足我现在的需求。我会将此标记为答案，直到将来有更好的答案出现。