What is the most efficient method for updating URLs in CSS files before the website goes live?

Question

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identify and rewrite various URL patterns scattered throughout our CSS codebase before they are pushed live.

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

For example:

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

It's important to note that some URLs have quotation marks while others do not. My goal is to transform them into:

.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 instances must be replaced with my CDN URL accurately without room for error.

I have devised a regex pattern that suits my requirements: rubular permalink

Initially, I attempted using the sed command like this:

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

However, it did not yield the desired results.

Further research led me to try this approach:

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

Although the regular expression seems to capture the correct output (see here), there appears to be an issue somewhere in the implementation.

Any suggestions or ideas? Thank you.

css regex bash capistrano web-deployment

Answer 1

Answer №1

Check out my test scenario

console.log("This is a test case for demonstration purposes");\n \
| sed 's@url[(][^)][^)]*)@url(http://cdn.example.com)@g'

.test{background:url(http://cdn.example.com) no-repeat top left}.example{background:url(http://cdn.example.com)}

Oh, and one more thing to consider

console.log("This is a test case for demonstration purposes");\n \
| sed 's@url[(][^)][^)]*)@url('"'"'http://cdn.example.com'"'"')@g'

.test{background:url('http://cdn.example.com') no-repeat top left}.example{background:url('http://cdn.example.com')}

It's worth noting that in some sed commands, you may need to escape the first '@' sign like this: \@.

I noticed that your example maintains the respective single quotes and double quotes that were originally there. I'm assuming it's acceptable to change them all to single quotes. If not, it adds an extra layer of complexity to the task.

Since you mentioned that this is a critical production deployment with no room for error, thorough testing is essential.

For a deeper understanding of sed usage, analyze what the search pattern @url[(][^)][^)]*)@ is accomplishing.

And for shell scripting proficiency, think about why I made the adjustment to '"'"'http://cdn.example.com'"'"' in the final iteration. ;-)

Unfortunately, I'm running short on time at the moment.

I hope this information proves valuable.

Answer 2

Check out my test scenario

console.log("This is a test case for demonstration purposes");\n \
| sed 's@url[(][^)][^)]*)@url(http://cdn.example.com)@g'

.test{background:url(http://cdn.example.com) no-repeat top left}.example{background:url(http://cdn.example.com)}

Oh, and one more thing to consider

console.log("This is a test case for demonstration purposes");\n \
| sed 's@url[(][^)][^)]*)@url('"'"'http://cdn.example.com'"'"')@g'

.test{background:url('http://cdn.example.com') no-repeat top left}.example{background:url('http://cdn.example.com')}

It's worth noting that in some sed commands, you may need to escape the first '@' sign like this: \@.

I noticed that your example maintains the respective single quotes and double quotes that were originally there. I'm assuming it's acceptable to change them all to single quotes. If not, it adds an extra layer of complexity to the task.

Since you mentioned that this is a critical production deployment with no room for error, thorough testing is essential.

For a deeper understanding of sed usage, analyze what the search pattern @url[(][^)][^)]*)@ is accomplishing.

And for shell scripting proficiency, think about why I made the adjustment to '"'"'http://cdn.example.com'"'"' in the final iteration. ;-)

Unfortunately, I'm running short on time at the moment.

I hope this information proves valuable.

Answer 3

Answer №2

It seems like some people are overcomplicating things, but it's actually quite straightforward. This is something I do regularly without any issue.

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"

Remember to pay attention to the escaping of \' and "$prefix".

Answer 4

It seems like some people are overcomplicating things, but it's actually quite straightforward. This is something I do regularly without any issue.

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"

Remember to pay attention to the escaping of \' and "$prefix".

Answer 5

Answer №3

After much brainstorming, I have devised the ideal command to suit our requirements:

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

Efficient and secure execution!

Answer 6

After much brainstorming, I have devised the ideal command to suit our requirements:

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

Efficient and secure execution!

What is the most efficient method for updating URLs in CSS files before the website goes live?

Answer №1

Answer №2

Answer №3

Similar questions

Ensure that all of the <li> elements within a <ul> container have equal widths

Positioning an image at the bottom left of the page using absolute positioning is simply not effective

Ways to Create a Webpage with a Single Color Palette

Get the value of a CSS property in Python by parsing the rendered HTML

Is it acceptable to conceal items by utilizing display:none?

Manipulate the css pseudo-element :after using jQuery's .siblings() method

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

Minimize the use of globalized variables in your LESS CSS code

My Bootstrap navbar seems to be malfunctioning. I'm wondering if there could be an issue with

Guide on making a JavaScript button with both "light and dark" modes

The method window.getComputedStyle retrieves the CSS max-height property containing an unresolved calc() function

CSS ratings bar styling

What is the best way to track down the source of a CSS rule?

Get rid of the add to cart message and modify the button that says "add to cart" on Woocommerce

To switch to desktop mode, double click; for mobile view, just tap once

The hover functionality fails to activate when a z-index is applied

Animate.css bxSlider text animations

Prior to stacking the divs, separate the line within the div

The Jquery UI confirmation dialog is working flawlessly on the Fiddle platform, but it is not displaying correctly on the

Aligning a table at the center of another table