CSS 축소기에 대한 권장 사항이 있습니까? [닫은]


289

CSS 축소기에 대한 권장 사항이 있습니까?

나는 구글을 근절하고 일부를 시험해 볼 것이지만 똑똑하고 능숙하고 호기심이 많은 StackOverflow 커뮤니티가 이미 헤비급의 장단점을 평가했을지도 모른다고 생각했습니다.



20
체포. 나는 '친구를 사귀고 사람들에게 영향을 미치는 방법'을 읽었습니다. 그래도 충분하지 않습니다 .
Paul D. Waite

17
너희들은 모두 이상해. 우리는 똑똑하고 능숙하며 흥미롭게 잘 생겼습니다.
Chuck Le Butt

2
또한보십시오 : stackoverflow.com/q/65491/85414
mahalie

3
여기 주변의 사물의 '변화하는 본질'을 이해하고 이와 같은 질문을하는 이유를 이해하고 설명하기 위해 +1하십시오. ;)
Andrew Barber

답변:


98

YUI 압축기는 환상적이다. JavaScript 및 CSS에서 작동합니다. 확인 해봐.


4
여기에 YUI Compressor를 다운로드하고 파일을 압축하여 축소하는 Makefile이 있습니다. github.com/balupton/jquery-sparkle/blob/…
balupton


@ JuniorMayhé 나는 그것을 사용하고 스타일을 완전히 엉망으로 만들었습니다. 슬프게도 내가 시도하는 모든 축소 기는 항상 내 스타일을 깨뜨립니다. 온라인 축소 도구가 모두 쓰레기이기 때문입니까? 그런 식으로해서는 안됩니다.
dialex

1
@DiAlex 저는 많은 사람들이 우리 코드를 어지럽히는 것을 이해하고 있으므로 공격적인 리팩토링이 아니라 항상 "보수적 인"접근 방식을 선택해야합니다. 보수적 인 사람은 불필요한 공백, 후미 세미콜론, 중복 스타일 등 만 제거하는 것입니다. CSS 코드 내부에 CSS 해킹을 사용하면 이러한 축소 도구로 스타일이 쉽게 손상 될 수 있다고 생각합니다. 백 슬래시와 폭이 넓은 기호는 컴프레서를 미치게 할 수 있습니다.
Junior Mayhé

온라인 서비스 zbugs.com을 사용해 볼 수 있습니다. yui 압축기를 사용하여 파일을 축소 합니다.
Tamik Soziev

45

YUI Compressor의 .NET 포트 도 있습니다.

  • Visual Studio 빌드 후 이벤트로 축소 / 파일 통합
  • TFS 빌드에 통합 (CI 포함)
  • 자신의 코드에서 dll을 사용하려면 (예 : 즉시 축소).

2011 업데이트 : 이제 NuGet통해 사용할 수 있습니다 :)


조금 혼란 스러워요. Ygl Compressor는 UglifyJS ( 데모 ) 를 위해 사용되지 않습니다 . .NET 포트에서 작동하는 것이 합리적입니까?
Martin Vseticka

항해사. 2008 년쯤에 그 포트를 시작했습니다. 6 년 전입니다. 나는 또한이 답변을 '09 년에 게시했습니다. 따라서 바보 같은 질문을하기 전에 날짜를 확인하고 컨텍스트를 얻으십시오. 자, 밖에 나가서 비트를
즐기십시오

순수 크롬 : 나는 달라지기를 간절히 바란다. 나는 GitHub 저장소를 보았고 몇 개월이 지났으며 커밋은 올해부터 시작되었습니다. 그래서 내가 물었다. "항해사".
Martin Vseticka

: 느린 박수 : 잘 발견! 당신은 실제로 엄청나게 --- 오. 기다림. codeplex에서 프로젝트를 시작했습니다 : yuicompressor.codeplex.com . 2008 년 7 월 7 일 첫 커밋 ( yuicompressor.codeplex.com/SourceControl/changeset/… ). 그런 다음 올해 GH로 옮겼습니다 . 나는 그것을 오랫동안 포팅하는 작업을하지 않았다. 여기저기서 몇 가지 이상한 버그 수정이있었습니다. 그래서. 친구. 나는 그것을 ED로 포팅 한다. 포트 안 보내고 그것을. 유지 관리 모드입니다. QED
Pure.Krome

1
당신도 :) 그리고 UglifyJS에 대한 링크를 응원합니다-그것은 우리가 직장에서 그것을 사용할 수 있는지 확인하기 위해 확인해야 할 의미였습니다. cheers :)
Pure.Krome

19

나는 Minify를 좋아한다 . PHP에서 CSS 또는 JavaScript와 함께 작동합니다.


2
축소 : +1 PHP에 이미 익숙하다면 설치가 더 편할 것입니다. PHP5가 필요합니다. 일단 설정하면 잊어 버릴 수 있으며 원하는대로 수백 개의 공백이 있고 주석이 달린 css 또는 js 파일에 대해 정상적으로 작업하고 축소하면 파일이 즉시 압축됩니다.
mahalie

13

CSSO 는 현재 최고의 축소 기 / 최적화 프로그램입니다.


2
Dunno는“최고”에 관한 것이지만 볼만한 가치가 있습니다.
Paul D. Waite

시도해 보면 최고라는 것을 알게 될 것입니다. 내가 아는 것처럼이 순간의 축소 기술에 대한 아날로그는 없습니다.
침묵

1
좋아, 30KB 테스트 파일에서 CSSO를 YUI Compressor와 비교했으며 두 도구의 압축 출력을 gzipping 한 후 CSSO가 승리하여 파일을 추가 7 바이트 압축했습니다. 물론 그것은 하나의 테스트 파일입니다.
Paul D. Waite

CSSO를 사용하여 온라인에서 CSS를 줄이십시오 : css.github.io/csso/csso.html
tomByrer

적어도 Google PageSpeed ​​Insights에서 권장하는 두 가지 중 하나입니다 .
Alex Vang

8

파이썬을 사용한다면 YUI Compressor만큼 빠르지 않지만 csscompressor.net과 달리 더 얇은 것을 권장합니다 .CSS 해킹에 질식하지 않습니다.

나는 더 얇게 썼기 때문에 편견이 있으며 현재 해킹을 처리하는 방법을보기 위해 YUI 압축기를 평가하고 있습니다. crosstips.org의 출처를 보면 더 슬림 한 작동 예를 볼 수 있습니다.



6

온라인 도구를 찾고 있다면 다음을 시도하십시오 : https://csscompressor.net/


1
이 답변에 투표 할 수 있기를 바랍니다 (이것은 이미 투표 한 후에 너무 늦었습니다). CSS를 압축하려고하는데 문제가 발생합니다. 전혀 좋지 않습니다. 모든 사람들에게 경고, 내 생각에 당신은 원시 표준 준수 CSS가 없다면, 당신의 똥을 깰 수 있습니다!
BT

19
하지만, 당신은 준수 CSS 깨끗한, 기준을 가지고?
Chuck Le Butt

2
HTML5 상용구를 사용하고 있다면 아닙니다.
SkaveRat

좋은 도구입니다. 나는 그것을 테스트했고 html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}YUI Compressor (#test의 패딩에 대한 중복을 제거하지는 않음)보다 더 잘 작동했습니다. 여전히, 둘 다 나를 만족시키지 못했습니다 html,body{width:100%;height:100%}body{padding:0}(내 이해에서 두 선택기가 동일한 특이성을 갖기 때문에 동등합니다).
drdaeman 2016 년

CSS는 엉터리 해킹이 허용되는 한 가지 경우입니다. 이러한 해킹 중 일부는 미니 픽션이 깨질 수있는 이상한 주석 트릭을 사용합니다.
Brandon

4

C #으로 초고속 CSS 축소기를 작성했습니다. 알고리즘은 Javascript를 처리하지 않습니다. 네이 : http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .


멋진 옵션. 한 가지 질문은 다음과 같습니다.“CSS 사양에 따라 작은 따옴표와 큰 따옴표의 두 가지 유형의 문자열이 지원됩니다. 공백 문자가 내부에있는 경우에도 내 알고리즘은 문자열을 그대로 유지합니다 ... 문자열을 수정하지 않은 상태로 유지하는 것이보다 직관적이고 전문적이라고 생각합니다.” 출력 파일을 가능한 작게 만들기 위해 의미를 추가하지 않는 공백 문자를 제거해야합니까? 그것이 축소 지점이 아닙니까?
Paul D. Waite

3
제 생각에는 이것이 일반적인 경우에 반드시 맞습니다. 그러나 나는 문자열을 특별한 경우라고 생각합니다. 문자열에서 의미없는 공백을 제거할지 여부는 원래 CSS 개발자에게 달려 있습니다. 내가 보여주는 알고리즘은 단순히 문자열을 수정하지 않고 사양을 따릅니다.
Kerido

4

클로저 스타일 시트를 사용해보십시오 .

축소 이외에도 linting , RTL flippingclass renaming 도 지원합니다 .

변수 , 함수 , 조건부믹스 인 을 CSS에 추가 할 수도 있습니다 .

또한이 기능 중 일부는 나머지 폐쇄 도구 (자체적으로 매우 강력 함)에 의존합니다 .


창문에서 어떻게 사용합니까? 내 무지를 용서하십시오
user2513846

3

PHP에서 무언가를 찾고 있다면 다음 링크가 있습니다.

무 지방 축소

PHP Fat-Free Framework의 일부이지만 독립형으로도 사용할 수 있습니다.


Fat Free Framework는 GPL이므로 코드 의이 부분도 있다고 가정합니다. 머리 만 올라
CodeReaper

버그가 있습니다 : S 나쁜 생각입니다.
brunoais

3

isnoop의 CSS SuperScrub 가 매우 잘 작동 한다는 것을 알았 습니다. 그래도 CSS 온라인으로 직접 링크 만 처리 할 수 ​​있습니다 : / 선호하는 pastebin 서비스를 사용하여 CSS 코드를 유지하고 SuperScrub에 원시 링크를 제공하면 해결할 수 있습니다.


나는 그것을 시도했지만 #test { padding: 1em; width: 10em; } #test { padding: 2em; }실패했다.
drdaeman 2016 년

@drdaeman 아마도 주어진 선택기에 대해 충돌하는 / 중복 값으로 무엇을 해야할지 모르기 때문일 것입니다. SuperScrub를 유지 관리하지 않기 때문에 언제 수정 될 것인지 알려 드릴 수 없습니다.
존 미셸



3

다른 사람들은 YUI Compressor와 그 .NET 포트에 대해 언급했으며 체인에 다른 링크를 추가합니다. StyleManager 는 YUI Compressor의 .NET 포트를 감싸는 서버 컨트롤이므로 ScriptManager를 사용하는 것처럼 사용할 수 있습니다. CSS 상수, 배경 이미지 정의 등의 물결표 (~) 해상도와 같은 다른 멋진 기능도 추가합니다. 단단하고 잘 문서화되어 있으며 최근의 모든 프로젝트에서 사용했습니다. o 문제. 확인하기 -gStyleManager.com


3

여전히 "베타에 있지만"상당히 잘 작동합니다. 나는 모든 프로젝트에서 그 뒤에 코드를 사용합니다 : http://claudiu.phpfogapp.com/ 그것은 PHP로 만들어졌으며 * .css 파일을 상당히 많은 시간 동안 호스팅합니다. 축소 된 CSS. (공간이 서버에서 붐비는 경우 오래된 CSS 파일 만 삭제합니다).


2

CSS와 JS 파일을 축소하고 압축하는 .net 웹 사이트에 연결하는 코드 플렉스 프로젝트가 있습니다. 또한 Microsoft AJAX Minifier와 YUI Compressor 간의 비교를 통해 YUI가 약간 더 잘 나옵니다. 파일을 크게 축소시키는 Microsoft Minifier와 압축을 결합한 추가 변형이 있습니다.

어쨌든 링크는 http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )입니다.




1

C # 예 :

css = css.Replace("\n", "");
css = Regex.Replace(css, @"\s+", " ");
css = Regex.Replace(css, @"\s*:\s*", ":");
css = Regex.Replace(css, @"\s*\,\s*", ",");
css = Regex.Replace(css, @"\s*\{\s*", "{");
css = Regex.Replace(css, @"\s*\}\s*", "}");
css = Regex.Replace(css, @"\s*\;\s*", ";");

1

zbugs.com 은 좋은 온라인 도구가 될 것입니다. 한 번의 클릭으로 CSS를 최소화 합니다.


물론, 시작하기 위해 두 번 이상의 클릭이 필요한 축소 기가 많이 있다고 생각하지는 않습니다.
Paul D. Waite

맞습니다. Paul :) 그러나 이것은 한 번의 클릭만으로 훨씬 더 많은 작업을 수행합니다.
Tamik Soziev

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.