问题
我有一个大型网站,所以我的CSS文件夹结构可能相当深.任何CSS文件都可以通过relative URL设置元素的背景图像.在发布到我的生产服务器之前,我需要缩小所有CSS文件.这种缩小过程可能会破坏一些相对URL,因为它有效地使文件夹结构变平.作为开发人员,您如何处理开发代码和生产代码之间的这种差异？
例
这是我的文件夹结构：
image/
article/
brushStroke.jpg
style/
module/
button.css
page/
article/
introToPainting.css
minified/
style20130522.css
在开发过程中,我可能在introToPainting.css中有这个CSS规则：
#step1 {
background-image: url(../../../image/article/brushStroke.jpg);
}
让我们说一个特定的简单页面,我只需要button.css和introToPainting.css.对于生产版本,这两个CSS文件将缩小为style20130522.css.既然minified文件位于与introToPainting.css不同的文件夹深度,那么brushStroke.jpg的路径现在是错误的.
解决方法
我通常会迎合这个服务器端.
例如(使用ASP.NET C#)通常会将baseUrl附加到映像并在web.config中定义URL.
然后,我将使用web.config的调试版或发行版来适当地转换baseUrl.
因此,我的HTML文件要么具有部分,要么构建服务器端的整个URL(或者至少具有附加服务器端的baseUrl),或者可能通过会话或JavaScript将baseUrl投影到客户端代码中.
编辑：澄清一下,我并不是说将http://mysite.com设置为baseUrl,我会提倡类似../../../image/作为我的开发baseUrl,并在生产时将其转换为/ image /或类似的东西
