要素/スタイル/スクリプトの関係を維持しながらディレクトリ全体を縮小しますか?

Question

プロジェクト ディレクトリ全体を縮小できるソリューションは現在存在しますか?さらに重要なのは、クラス名や ID を短縮し、すべてのドキュメントで一貫性を保つことができるソリューションは存在するかということです。

これを変えることができるもの:

インデックス.html ---

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

スタイル.css ---

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

インデックス.js ---

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

これについて:

インデックス.html ---

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

スタイル.css ---

.a{background-color:#000;}

インデックス.js ---

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

Answer 1

あなたが探しているのは縮小ではなく、圧縮です。定義による縮小化 のみ 識別子を短縮するとインターフェイスが変更され、それに依存する外部スクリプトが壊れる可能性があるため、空白を削除します。このため、閉じたシステム (すなわち、カプセル化された Web アプリなど）の場合は、圧縮することをお勧めします。

JavaScriptの場合, 、ほとんどの人が使用します。 YUI コンプレッサー または ディーン・エドワーズのパッカー.

CSSの場合, 、スタイルを「最適化」するためのツールはたくさんありますが、クラス名を短縮するツールを私は知りません。この理由はいくつか考えられます。

1. CSS ファイルを圧縮するには、ファイル内のクラスと ID 参照を変更するために、スクリプトはそのファイルを含むすべての HTML ファイルを認識する必要があります。Web サイトのサイズと構造によっては、これは簡単ではない可能性があります。
2. 圧縮後は、セマンティック HTML が読みにくくなります。 <span class="image_caption"> になる <span class="a12">, あるいはさらに悪いことに、 <p id="a12">.

あなたが説明したようなことを行うことは間違いなく可能でしょう（そして私は実際に個人用のCMS/フレームワークに取り組んでいます） 意思）、しかし、それが保守可能であるためには、おそらく、サイトが維持できるように元のファイルをすべて保持しながら、新しい変更が公開されるたびにすべてのファイルを「舞台裏」で圧縮する、厳密に構造化された CMS の統合された部分である必要があります。全体として維持されています。

Answer 2

私が使う http://www.w3compiler.com/ 圧縮と難読化を行います

Answer 3

私が使う YUIコンプレッサー css ファイルと js ファイルを縮小するためのプログラムと、 交換する HTML内の文字列のカスタム置換を行うには（コメントの削除、ローカルのjqueryライブラリを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>"

等々。

これまでのところ、難読化に適したツールを見つけることができませんでした。ただし、これら 2 つだけでも、縮小と圧縮のタスクが自動化され、はるかに簡単になります。