요소/스타일/스크립트 관계를 유지하면서 전체 디렉토리를 조정 하시겠습니까?

Question

현재 전체 프로젝트 디렉토리를 조정할 수있는 솔루션이 있습니까? 더 중요한 것은 클래스 이름, ID를 단축하고 모든 문서에서 일관성을 유지할 수있는 솔루션이 존재 하는가?

이것을 돌릴 수있는 것 :

index.html ---

<div class="fooBar">
  <!-- Code -->
</div>

Styles.css ---

.fooBar { 
  // Comments and Messages
  background-color: #000000; 
}

index.js ---

$(".fooBar").click( function () { 
  /* More Comments */
  alert( "fooBar" ); 
});

이것으로 :

index.html ---

<div class="a"></div>

Styles.css ---

.a{background-color:#000;}

index.js ---

$(".a").click(function(){alert("fooBar");});

Answer 1

당신이 찾고있는 것은 미달이 아니라 압축입니다. 정의에 의해 미수 뿐 단축 식별자는 인터페이스를 변경하여 잠재적으로 이에 의존하는 외부 스크립트를 깨뜨릴 수 있으므로 공백을 제거합니다. 이러한 이유로 폐쇄 시스템 (예 : 캡슐화 된 웹 앱)에서 압축이 좋은 아이디어가 될 수 있지만, 압축보다는 고정이 본질적으로 '더 안전하다'.

JavaScript의 경우, 대부분의 사람들은 다음을 사용합니다 유비 압축기 또는 Dean Edwards의 패커.

CSS의 경우, 스타일을 '최적화'하기위한 많은 도구가 있지만, 클래스 이름을 단축시키는 것도 모른다. 그 이유는 몇 가지가 될 수 있습니다.

1. CSS 파일을 압축하려면 스크립트는 클래스 및 ID 참조를 변경하려면 포함 된 모든 HTML 파일을 알아야합니다. 웹 사이트의 크기와 구조에 따라 그의 사소한 일 수 있습니다.
2. 압축 후 시맨틱 HTML은 읽기 쉬워집니다. <span class="image_caption"> 로 변합니다 <span class="a12">, 또는 더 나쁜 것은 <p id="a12">.

당신이 묘사하는 것과 같은 일을 할 수있을 것입니다 (그리고 실제로는 개인 CMS/프레임 워크에서 일하고 있습니다. ~ 할 것이다), 그러나 유지 관리 가능하려면 밀접하게 구조화 된 CMS의 통합 된 부분이어야 할 것입니다. 새로운 변경 사항이 게시 될 때마다 '장면 뒤에서 모든 파일을 압축하고 모든 원본 파일을 유지하여 사이트를 유지할 수 있습니다. 전체적으로 유지됩니다.

Answer 2

나는 사용한다 http://www.w3compiler.com/ 압축 및 난독 화를합니다

Answer 3

나는 사용한다 유오 콤프레서 내 CSS 및 JS 파일을 조정하고 바꾸다 HTML에서 문자열을 맞춤 교체하려면 (주석 제거, 로컬 jQuery lib를 Google API로 대체하는 등))

배치 파일을 사용하여 프로젝트 디렉토리의 특정 확장자가있는 모든 파일에서 프로그램을 호출하십시오.

java -jar yuicompressor-2.4.2.jar -o temp\css\one-compressed.css temp\css\one.css
replace -quotes \q -srcdir temp\ -fname "*.php" -find "<script type=\qtext/javascript\q src=\qjs/jquery.js\q></script>" -replace "<script src=\qhttp://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\q type=\qtext/javascript\q></script>"

등등.

지금까지 나는 난독 화를위한 좋은 도구를 찾을 수 없었습니다. 그러나이 두 가지만으로도 조정 및 압축 작업을 훨씬 쉽고 쉽게 만듭니다.