在产品启动前重写css文件中的url的最好方法

Question

我目前正在做的项目已经看到了来自不同背景的各种编码人员。在成功地编写了一个干净的Capistrano配方以最小化css和js文件之后，我问自己如何识别分布在我们的css代码库中的各种url模式，并在它们上线之前将它们全部重写。我要找的图案是

url('../../images/
url(../images/
url("../../../images/
url(images/

基本上，这是一个输入示例:

.test{background:url('/images/test.jpg') no-repeat top left}.pouet{background:url("../../images/bg.png")}

注意，在某些情况下，我们有引号，在其他情况下，没有…我想要得到的是

.test{background:url('http://www.cdnImages.com/images/test.jpg') no-repeat top left}.pouet{background:url("http://www.cdnImages.com/images/bg.png")}

所有这些必须替换为我的cdn url。最令人费解的是如何做到这一点而不允许任何错误。

我想出了一个符合我需要的正则表达式:rubular permalink

我正在查看sed命令，使用它如下

sed '/url([^/](.*?)images/http://www.cdnImages.com' myFile.css

但这似乎不起作用。

我目前的研究使我得出这个

 find #{current_release}/public/static/css/ -name '*.css' | xargs sed -i 's@url([^/](.*?)images|static/@#{images_cdn}@g'

和，虽然正则表达式完全符合需要(点击这里查看捕获的输出)，但似乎有什么地方出错了。

你知道吗?非常感谢。

Answer 1

下面是我的测试用例

printf ".test{background:url('/images/test.jpg') no-repeat top left}.pouet{background:url("../../images/bg.png")}n" 
| sed 's@url[(][^)][^)]*)@url(http://www.cdnImages.com)@g'
.test{background:url(http://www.cdnImages.com) no-repeat top left}.pouet{background:url(http://www.cdnImages.com)}

啊. .还有一件事

printf ".test{background:url('/images/test.jpg') no-repeat top left}.pouet{background:url("../../images/bg.png")}n" 
| sed 's@url[(][^)][^)]*)@url('"'"'http://www.cdnImages.com'"'"')@g'
.test{background:url('http://www.cdnImages.com') no-repeat top left}.pouet{background:url('http://www.cdnImages.com')}

请注意，对于某些sed，您需要转义第一个 '@'符号，如@。

我看到您的示例输出保留了各自的'...'和"..."引用字符。我希望可以全部改为'...'。如果不是，那就会使问题更加复杂。

正如你所说，这是一个生产推动和'…用一种不允许出错的方法来做这件事。’，你需要测试一下。

为了提高sed的使用率，请了解搜索模式@url[(][^)][^)]*)@的情况。

为了提高你的shell使用率，在最后一轮中我改变了'"'"'http://www.cdnImages.com'"'"'的原因。: -)

我现在没时间了。

Answer 2

我不知道为什么人们要把它复杂化，它很简单。我经常做这种事。

data=$(cat <<EOF
.test{background:url('/images/test.jpg') no-repeat top left}.pouet{background:url("../../images/bg.png")}
EOF
)
prefix="http://www.cdnImages.com/"
rule=$(cat <<EOF
s|/*(../)*(images/[^'"]*)|$prefix2|g
EOF
)
echo "$data" | sed "$rule"

注意'和"$prefix"的转义

Answer 3

我终于想出了一个完美的命令，它符合需要:

run "find #{current_release}/public/static/css/ -name '*.css' -print0 | xargs -0 sed -i -E 's@(../)+(images|static|img)@#{images_cdn}@g'"