CSS 缩小/合并后部署图像

发布于 2024-11-17 18:32:01 字数 929 浏览 3 评论 0原文

我在此项目中使用 Visual Studio 2010、.NET 4 和 MVC 2,并将 YUI 压缩机作为构建后事件运行。

问题是我们有一个大的 css 文件,该文件无法维护,因此我们将其分成不同文件夹中的许多 CSS 文件。

  1. /Assets/Styles/Site.css
  2. /Assets/Styles/Pages/Page1.css
  3. /Assets/Styles/Pages/Page2.css
  4. /Assets/Styles/Pages/Page-nth.css
  5. /Assets/Styles/Partials/Partial1.css
  6. /Assets/Styles/Partials/Partial1.css
  7. /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.

  1. /Assets/Styles/Site.css
  2. /Assets/Styles/Pages/Page1.css
  3. /Assets/Styles/Pages/Page2.css
  4. /Assets/Styles/Pages/Page-nth.css
  5. /Assets/Styles/Partials/Partial1.css
  6. /Assets/Styles/Partials/Partial1.css
  7. /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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一生独一 2024-11-24 18:32:01

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文