Javascript 如何在部署静态站点时替换JS和CSS引用？

我正在构建一个静态站点（即从基本web服务器提供的HTML文件）。在开发过程中，我希望使用Javascript代码和CSS文件的本地（和非小型）副本，但在部署时，我希望使用相同文件的小型版本

我当前的解决方案是将

data prod href

和

data prod src

属性添加到

script

和

link

标记中，并将引用替换为构建脚本的一部分。虽然这样可以保持HTML文件的有效性，并允许我在不每次运行构建脚本的情况下进行开发，但感觉有点不舒服

---

我环顾了一下四周，没有找到任何关于这类事情的标准做法。我缺少什么？

您可以使用以下脚本

<script>
if(location.hostname == "your_site.com"){
$.getScript("your_minified_script.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});   
}
else
{
$.getScript("your_non_minified_script.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
}
</script>

如果（location.hostname==“your_site.com”）{
$.getScript（“您的_minified_script.js”，函数（数据、文本状态、jqxhr）{
console.log（数据）；//返回的数据
console.log（textStatus）；//成功
console.log（jqxhr.status）；//200
log（'已执行加载'）；
});   
}
其他的
{
$.getScript（“您的非精简脚本.js”，函数（数据、文本状态、jqxhr）{
console.log（数据）；//返回的数据
console.log（textStatus）；//成功
console.log（jqxhr.status）；//200
log（'已执行加载'）；
});
}

如果您使用某种模板生成HTML页面（我建议即使是静态HTML页面），通常也可以向模板中写入条件。我正在尝试看看是否可以完全避免使用服务器端模板，或者至少使用一种模板语言，这种语言在没有任何预处理的情况下仍然是有效的HTML。您可以使用生成静态文件作为输出的模板（例如Freemarker可以这样做）。这样，您的代码保持干燥，并且仍然不需要服务器端模板。另一方面，很难找到使用有效HTML模板的模板语言。我自己也在寻找，但我发现其中只有少数几个，存在严重的缺点和局限性。相对路径会考虑本地和远程方面（例如，将文件引用为“/css/stylesheet.css”或“js/script.js”，您可以简单地将缩小作为部署过程的一部分。尽管“script-min.js”或“styles-min.css”是一个常见的约定，没有什么可以说必须使用它。路径根本不需要更改。@pwdst相对路径是个好主意，但它们有点有限。不可能指向生产中的CDN而不是开发中的Javascript库的本地副本。