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

【问题标题】：How to replace JS and CSS references when deploying a static site?部署静态站点时如何替换 JS 和 CSS 引用？
【发布时间】：2013-03-21 17:55:25
【问题描述】：

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

我当前的解决方案是将data-prod-href 和data-prod-src 属性添加到script 和link 标记，并将引用替换为我的构建脚本的一部分。虽然这使 HTML 文件保持有效，并且允许我在不每次运行构建脚本的情况下进行开发，但感觉有点 NIH。

我环顾四周，并没有找到任何此类事情的标准做法。我错过了什么？

【问题讨论】：

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

标签： javascript html css client-side static-html

【解决方案1】：

您可以使用以下脚本

<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>

【讨论】：