현재 커밋 후크 (post commit commit)와 같은 축소 작업을하고 있습니다. CSS 확장을 위해 yui-compressor의 최신 버전을 사용하고 있습니다.CSS 확장을 해결하기위한 sed 정규 표현식
yui-compressor의 현재 버전에 관한 나쁜 점 : 제대로 작동하려면 공백이 필요한 특정 CSS3 규칙이 깨집니다. (calc (10px + 10px))
문제를 해결하기 위해 나는 압축 후에 calc (...)의 모든 항목을 대체해야하는 정규식을 작성했습니다.
내 솔루션은 지금까지 다음과 같은 정규식입니다 : 교체 /calc\((.*?)([\/\+\-\*])(.*?)\)/g
: calc(\1 \2 \3)
내 정규 표현식을 검증하기 위해 두 개의 온라인 도구를 사용 :
을일치
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)}
이 나오지도 작동하지 않는 것 같습니다. 누군가 도대체 무슨 일이 일어나고 있는지 단서가 있습니까?
미리 감사드립니다.
매력처럼 작동합니다. 고마워. 나는 "원시적"인 sed를 알지 못했습니다. –
반갑습니다. 사실'sed'는 substitute ('s' 명령)보다 훨씬 많은 것을 할 수 있습니다. 그것은 분기 및 루핑 구조를 가지고 있습니다. 매우 강력합니다. :) 불행히도 PCRE는 지원되지 않지만 필요할 경우 Perl을 사용해 볼 수 있습니다. – randomir