Лучший способ переписать URL-адреса в файлах CSS до запуска производства? - PullRequest
Новая
       37

Лучший способ переписать URL-адреса в файлах CSS до запуска производства?

4 голосов
/ 31 июля 2011

Проект, над которым я сейчас работаю, видел разных программистов из разных областей. После успешного написания чистого рецепта Capistrano для минимизации css и js файлов, я спрашиваю себя, как распознать различные шаблоны url, распространяемые по нашей базе кода css, переписать их все сразу, прежде чем они будут запущены. Шаблоны, которые я ищу, являются 

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'

и, хотя регулярное выражение идеально соответствует потребностям (проверьте здесь, чтобы увидеть перехваченный вывод , кажется, что-то где-то не так.

Есть идеи? Большое спасибо.

Ответы [ 3 ]

3 голосов
/ 01 августа 2011

Вот мой тестовый пример 

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 вам нужно экранировать first '@', например \@.

Я вижу, что ваш пример вывода хранит соответствующие символы '...' и "...", которые были там. Я надеюсь, что все в порядке, чтобы изменить все на '...'. Если нет, то это усложняет проблему.

Поскольку вы говорите, что это производственный толчок, и "... делайте так, чтобы не допустить ошибок.", Вам нужно будет проверить это.

Чтобы повысить эффективность использования sed, расскажите о том, что происходит с шаблоном поиска @url[(][^)][^)]*)@.

Чтобы повысить эффективность использования вашей оболочки, кое-что о том, что / почему я изменил на '"'"'http://www.cdnImages.com'"'"', в последнем раунде. ; -)

У меня сейчас нет времени.

Надеюсь, это поможет.

2 голосов
/ 10 августа 2011

Я не знаю, почему люди все усложняют, это довольно просто. Я все время так делаю. 

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"

Обратите внимание на побег \' и "$prefix".

1 голос
/ 09 августа 2011

Я наконец-то придумал идеальную команду, которая соответствует потребностям: 

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

работает быстро и безопасно!

...