2017-12-07 21 views
0

현재 커밋 후크 (post commit commit)와 같은 축소 작업을하고 있습니다. CSS 확장을 위해 yui-compressor의 최신 버전을 사용하고 있습니다.CSS 확장을 해결하기위한 sed 정규 표현식

yui-compressor의 현재 버전에 관한 나쁜 점 : 제대로 작동하려면 공백이 필요한 특정 CSS3 규칙이 깨집니다. (calc (10px + 10px))

문제를 해결하기 위해 나는 압축 후에 calc (...)의 모든 항목을 대체해야하는 정규식을 작성했습니다.

내 솔루션은 지금까지 다음과 같은 정규식입니다 : 교체 /calc\((.*?)([\/\+\-\*])(.*?)\)/g

: calc(\1 \2 \3)

내 정규 표현식을 검증하기 위해 두 개의 온라인 도구를 사용 :

https://regex101.com/

일치

https://regexr.com/

PHP에서도 작동합니다. 그러나 곧 내가 사용으로 "나오지도"단지 한 줄의 마지막 선두로부터이 대체되고있다 :

압축 CSS :

.test{width:calc(1px+1px)}.test2{left:calc(4%+140px)}.test3{width:calc(1px+1px)} 

.test{width:calc(1px-1px)}.test2{left:calc(4%-140px)}.test3{width:calc(1px-1px)} 

.test{width:calc(1px*1px)}.test2{left:calc(4%*140px)}.test3{width:calc(1px*1px)} 

.test{width:calc(1px/1px)}.test2{left:calc(4%/140px)}.test3{width:calc(1px/1px)} 

CSS를 (이전 정규 표현식으로 대체) 정규 표현식 후 : (및 올바른 결과)

.test{width:calc(1px + 1px)}.test2{left:calc(4% + 140px)}.test3{width:calc(1px + 1px)} 

.test{width:calc(1px - 1px)}.test2{left:calc(4% - 140px)}.test3{width:calc(1px - 1px)} 

.test{width:calc(1px * 1px)}.test2{left:calc(4% * 140px)}.test3{width:calc(1px * 1px)} 

.test{width:calc(1px/1px)}.test2{left:calc(4%/140px)}.test3{width:calc(1px/1px)} 

는 데비안에 나오지도 8 - (파일에서 동일한 규칙로드) :

sed -r "s/calc\((.*?)([\/\+\-\*])(.*?)\)/calc(\1 \2 \3)/g" style.css 
을 다음

지문 :

.test{width:calc(1px+1px)}.test2{left:calc(4%+140px)}.test3{width:calc(1px + 1px)} 
.test{width:calc(1px-1px)}.test2{left:calc(4%-140px)}.test3{width:calc(1px-1px)} 
.test{width:calc(1px*1px)}.test2{left:calc(4%*140px)}.test3{width:calc(1px * 1px)} 
.test{width:calc(1px/1px)}.test2{left:calc(4%/140px)}.test3{width:calc(1px/1px)} 

이 나오지도 작동하지 않는 것 같습니다. 누군가 도대체 ​​무슨 일이 일어나고 있는지 단서가 있습니까?

미리 감사드립니다.

답변

0

PCRE 비 욕심 많은 반복 인 .*?을 사용하려고 시도했지만 sed은 비 탐욕적인 확장을 정의하지 않는 POSIX BRE and ERE 만 지원합니다.

대신 정규식을 수정해야합니다. 귀하의 경우 첫 번째 캡처 된 그룹 (왼쪽 피연산자)에 [^-+*/]*을 사용할 수 있습니다. 즉, 연산자까지 모든 것을 일치시키고 두 번째 피연산자와 일치하는 [^)]*을 닫는 괄호까지 모두 사용할 수 있습니다. -E-r에 해당하지만, 또한

sed -E 's/calc\(([^-+*/]*)([-+*/])([^)]*)\)/calc(\1 \2 \3)/g' style.css 
#    ^^^^^^^^ ^^^^^^ ^^^^^ 
#   left operand op right operand 
#   all until op   all until) 

참고 비 GNU sed에서 작동 : 이것은 당신이 기대하는 출력을 생성합니다. 또한 대괄호 안의 연산자를 벗어날 필요가 없습니다. 실제로 첫 번째 문자로 제공되지 않으면 닫는 대괄호를 제외하고는 첫 번째 문자로 제공된 경우 ^을 제외한 대다수를 대괄호 안에 이스케이프해야합니다.

당신이 .*?이, 욕심 .*로 취급 0 번 이상 (?)이 반복 유의 때 당신이지고 있었다 출력은 설명하기 쉬운 - 두 번째에게 첫 번째 .*? 라인의 마지막 연산자까지 모든 것을 캡처하고 .*?은 마지막 피연산자를 캡처하므로 각 행의 마지막 calc 표현식 만 "확장"됩니다.

+0

매력처럼 작동합니다. 고마워. 나는 "원시적"인 sed를 알지 못했습니다. –

+0

반갑습니다. 사실'sed'는 substitute ('s' 명령)보다 훨씬 많은 것을 할 수 있습니다. 그것은 분기 및 루핑 구조를 가지고 있습니다. 매우 강력합니다. :) 불행히도 PCRE는 지원되지 않지만 필요할 경우 Perl을 사용해 볼 수 있습니다. – randomir