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

Question

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

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

之前:

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

之后

<script src="combined.js" />

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

到目前为止我尝试了什么:

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

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

有人还建议在开发人员机器上运行 grunt。同样，这是不可取的，因为我们有临时 VM，这会破坏开发流程。

如果我可以在没有 grunt 的情况下在本地运行 grunt-usemin 就好了!

Answer 1

要合并文件，您可以使用 cat

cat 1.js 2.js > combined.js

要替换您可以使用 sed 的 html block

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

这是一个相当通用的解决方案，但对我来说似乎有点笨拙。如果您在 Node 中呈现此 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