Grunt - 在构建生产时更改资产链接

Question

我已经构建了现有网站的移动版本。我构建的网站是完全静态的，仅依赖于HTML / CSS / JS。此站点与桌面版本位于同一服务器上，并作为子目录从http://example.com/mobile下提供。因此，我将<base>标记设置为：

<base href="http://example.com/mobile/">

我访问现有站点的唯一途径是通过FTP，因此我没有太多选项来重新配置现有服务器。我也不想。

我的移动版本仅在某种程度上正常运行 - <script>内的所有<link>和index.html标记都正确指向http://example.com/mobile/{js,css,img}，而js中使用的链接或css个文件会查找到顶级域名（例如 - http://example.com/img/image.png而不是http://example.com/mobile/img/image.png）。

我可以手动复制所有资产以使链接正常工作，但由于这是一个Grunt项目，我认为可能有更聪明的方法来实现这一点。

那么，构建（js）时，如何在scss或grunt build文件中更改所有内部资产链接？类似的东西：

的site.css

// in dev
body {
  background: url('/img/image.png') top left no-repeat;
}

// after building
body {
  background: url('/mobile/img/image.png') top left no-repeat;
}

感谢。

Answer 1

请参阅grunt-replace或grunt-string-replace作为可以提供帮助的工具。

您可以在构建任务中使用其中任何一个来处理所需的更改。

最困难的部分是写一个准确的正则表达式，但是如果你不是那么专家的话，网上有很多正则表达式测试人员/建设者可以提供帮助。

此外，尽管.htaccess对于基于Apache的网站来说是一个好主意，但如果您使用的是Windows或者不支持它的云托管解决方案，它将无济于事。