Geek Answers Handbook

Best way to rewrite urls in css files before product launch?

In the project that I am currently working on, various encoders from different walks of life were visible. After successfully writing a clean Capistrano recipe to minimize css and js files, I ask myself how to recognize the various url patterns spread around our CSS code base to rewrite them all right away before they start living. The patterns I'm looking for are

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

So basically, here is an input example:

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

Please note that in some cases we have quotation marks, in others not ... And what I'm trying to get

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

All this should be replaced with my cdn url. The most mysterious thing is how to do it so as not to make mistakes.

I came up with a regex that fits my needs: rubular permalink

I watched the sed command using it as follows

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

but that doesn't seem to do the job.

My current research has led me to this.

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

and while the regex is perfect for the need (check here to see the output drawn , somewhere there is something wrong.

Any idea? Thank you very much.

+4
source share
3 answers

Finally, I came up with the perfect team that fits my needs:

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

works fast and safe!

+1
source

Here is my test case

 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)}

Ah .. one more thing

 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')}

Note that with some sed you need to escape the first '@' sign as \@ .

I see that your example displays the corresponding characters '...' and "..." quote. I hope everything is in order to change everything to '...' . If not, this complicates the task.

As you say, this is a production impetus and "... do it so as not to make any mistakes." You will need to check the damn one out of this.

To increase the efficiency of using sed, what happens to the @url[(][^)][^)]*)@ search @url[(][^)][^)]*)@ .

To increase the use of the shell, that / why I changed to '"'"'http://www.cdnImages.com'"'"' in the last round .; -)

I don’t have time now.

Hope this helps.

+3
source

I do not know why people complicate this, it is quite simple. I do this all the time.

 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/[^'"]*\)|$prefix\2|g EOF ) echo "$data" | sed "$rule"

Note the escaping \' and "$prefix" .

+2
source

More articles:


All Articles