CSS 缩小/合并后部署图像
我在此项目中使用 Visual Studio 2010、.NET 4 和 MVC 2,并将 YUI 压缩机作为构建后事件运行。
问题是我们有一个大的 css 文件,该文件无法维护,因此我们将其分成不同文件夹中的许多 CSS 文件。
- /Assets/Styles/Site.css
- /Assets/Styles/Pages/Page1.css
- /Assets/Styles/Pages/Page2.css
- /Assets/Styles/Pages/Page-nth.css
- /Assets/Styles/Partials/Partial1.css
- /Assets/Styles/Partials/Partial1.css
- /Assets/Styles/Partials/Partial-nth.css
类似的东西。
这有利于开发,但不利于生产。在生产中我们只有 1 个文件,它是所有内容的合并/缩小版本,该文件位于 /Assets/Styles/style.css
现在这种设计会导致问题,因为开发和产品中的图像路径不能相同。 (我们也有 staging 和 uat,但让事情变得简单)
我看到了一些解决方案,我们可以使用绝对路径,我们可以有许多缩小/合并 css 文件并将它们放在正确的文件夹中(Pages.css / Partials.css)。 css)或者我们可以使用无 cookie 的子域(static.domain.com),这就是我想要做的。
所以我的问题是:如何自动将 CSS 文件中的“../../image.png”重命名为“http://static.domain.com/image.png”? YUI 压缩机可以做到这一点吗?我应该创建一个能够做到这一点的构建控制台项目吗?你知道有一个工具可以帮我做到这一点吗?还有其他建议吗?!
提前致谢!
I'm using Visual Studio 2010, .NET 4 and MVC 2 on this project with YUI Compressor running as a post build event.
The thing is we had one big css file which was not maintainable so we've split it into many CSS files in different folders.
- /Assets/Styles/Site.css
- /Assets/Styles/Pages/Page1.css
- /Assets/Styles/Pages/Page2.css
- /Assets/Styles/Pages/Page-nth.css
- /Assets/Styles/Partials/Partial1.css
- /Assets/Styles/Partials/Partial1.css
- /Assets/Styles/Partials/Partial-nth.css
Something like that.
This is good for development but not for production. On production we only have 1 file, which is a merged/minified version of everything, this file sits at /Assets/Styles/style.css
Now this design is causing problem because the image paths can't be the same in dev and prod. (we also have staging and uat but lets keep things simple)
I see a few solutions to that, we could use absolute paths, we could have many minified/merge css files and put them in the right folder (Pages.css / Partials.css) or we could use a cookie-free subdomain (static.domain.com) which is what I would like to do.
So my question is: How do I automatically rename "../../image.png" to "http://static.domain.com/image.png" in my CSS files automatically?? Can YUI Compressor do that? Should I make a build console projects that does just that? Do you know a tool that will do that for me? Other suggestions?!
Thanks in advance!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
YUI-compressor 无法做到这一点。
您需要循环遍历文件并用新的绝对路径替换每个路径。您可以使用正则表达式轻松完成此操作。
我不知道你是否可以在 windows-batch 中轻松完成此操作,但使用 unix sed 或任何脚本(perl、python ...)很容易。如果您更熟悉 .NET,您可以构建一个控制台项目并将其作为构建后事件运行。
希望这有帮助。
YUI-compressor can not do that.
You need to loop over the files and replace every path with the new absolut path. You can easily do this with a regex.
I don't know if you can do this easily in windows-batch but it's easy with unix sed or any script (perl, python...). If you are more familiar with .NET you can build a console project and run it as a post build event.
Hope this helps.