Ruby의 원라이너를 사용하여 HAML의 % img {}을 image_tag로 바꾸는 방법

이 팁이 필요한 배경

디자이너가 화면 디자인을 HTML로 납품해 주는 경우가 있다.

Rails 프로그래머로서는 HAML로 재작성하고 싶다.

대부분의 태그는 Html2Haml 으로 자동 변환할 수 있다.

그러나 이미지는 assets 아래에 두므로 경로가 바뀝니다.

%img{ } 는 전부 image_tag 메소드를 사용해 재작성하고 싶지만, 수가 많기 때문에 수작업으로 하는 것은 귀찮다.

하고 싶은 일

이런 img 태그
%img{alt: "顔写真", height: "80", src: "img/face.jpg", width: "100"}
이렇게 바꾸고 싶다.
= image_tag "face.jpg", size: "100x80", alt: "顔写真"

해결책

Ruby의 원라이너로 대체해 보았다.

$ ruby -pe 'sub(/%img{alt: "([^"]+)", height: "([^"]+)", src: "img\/([-\w.]+)", width: "([^"]+)"}/, "= image_tag \"\\3\", size: \"\\4x\\2\", alt: \"\\1\"")' test.html.haml > replaced.html.haml

실행 예

test.html.haml

%body
  %img{alt: "顔写真1", height: "80", src: "img/face-1.jpg", width: "100"}
  %hr
  %img{alt: "顔写真2", height: "100", src: "img/face-2.jpg", width: "120"}
  %p

$ ruby -pe 'sub(/%img{alt: "([^"]+)", height: "([^"]+)", src: "img\/([-\w.]+)", width: "([^"]+)"}/, "= image_tag \"\\3\", size: \"\\4x\\2\", alt: \"\\1\"")' test.html.haml > replaced.html.haml

replaced.html.haml

%body
  = image_tag "face-1.jpg", size: "100x80", alt: "顔写真1"
  %hr
  = image_tag "face-2.jpg", size: "120x100", alt: "顔写真2"
  %p

해설

명령이 다소 보인다고 생각하기 때문에 해설합니다.

명령의 기본 형식

ruby -pe 'sub(/正規表現/, "置換後の文字列")' 処理対象ファイルのパス > 置換後のファイルパス 라는 것이 이 처리의 기본형.

-e 옵션은 원라이너를 실행한다.

-p 옵션은 파일의 내용을 한 줄씩 읽는다.

sub 는 읽은 행의 텍스트를 대체한다.

処理対象ファイルのパス 로 Ruby가 먹이는 파일을 지정한다.

마지막으로, > 置換後のファイルパス 의 형태로 표준 출력의 내용을 새로운 파일에 기입한다. 이것을 생략하면 표준 출력에 대체 후의 문자열이 표시됩니다. 동작 확인할 때 편리합니다.

sub 처리

sub의 처리에 대해서는 이하와 같다.

정규식으로 각 값을 캡처합니다.

/%img{alt: "([^"]+)", height: "([^"]+)", src: "img\/([-\w.]+)", width: "([^"]+)"}/

각 값은 다음과 같은 번호로 캡처됩니다. (둥근 괄호를 캡처하는 메타 문자)

alt: \1

height: \2

src: \3 (단, img/ 포함하지 않음)

width: \4

캡처된 문자열을 사용하여 대체 후 문자열을 조립합니다.

"= image_tag \"\\3\", size: \"\\4x\\2\", alt: \"\\1\""

제한 사항 및 비고

어디까지나, alt나 height등의 속성이 같은 순서로 늘어놓고 있는 것이 전제입니다. 순서가 다르거나 존재하는 속성으로 하지 않는 속성이 흩어지거나 하면 정규 표현에 매치 하지 않습니다.

거기의 노력으로 80점 정도의 결과를 낼 수 있는 것을 목적으로 하고 있습니다.

한발로 완벽하게 매치하는 정규 표현을 만드는 것은 어렵기 때문에 htp // 루부 r. 이 m 에서 시행착오하는 것이 지름길이기도 합니다.

응용

CSS(SCSS)의 url 도 image-url 로 대체해 봅시다.

test.css.scss

body {
  text-align: center;
  background: url("../img/bg.jpg") no-repeat center top #f8f8f8;
}

#headWrapper {
  background: url("../img/head_bg.jpg") repeat-x right top;
  height: 80px;
}

$ ruby -pe 'sub(/url\(.?\.\.\/img\/([-\w.]+).?\)/, "image-url(\"\\1\")")' test.css.scss > replaced.css.scss

replaced.css.scss

body {
  text-align: center;
  background: image-url("bg.jpg") no-repeat center top #f8f8f8;
}

#headWrapper {
  background: image-url("head_bg.jpg") repeat-x right top;
  height: 80px;
}

참고문헌

루비의 원라이너에 보는 놀라움의 약어

루비 원라이너 입문

덤: 「원래 정규 표현을 모르겠습니다만?」라고 하는 프로그래머 씨에게

그것은 엄청나다! ! 지금 공부하세요!
정규식을 마스터하면 생산성이 256배 향상됩니다.

나는 오라일리의 "올빼미 책"에서 공부했습니다.
보기에는 어려울 것 같은 책으로 보입니다만, 기본의 「키」로부터 정중하게 가르쳐 주므로 매우 알기 쉬웠습니다.

상세설정 정규 표현 제3판