9

ドキュメント内にCSSとJavascriptを含む.htmlドキュメントがあります（外部ファイルはありません）。ドキュメントとJavascriptを非常に小さなフットプリントに縮小するオンラインツールはありますか？すべての変数や関数名が1文字の名前に置き換えられているなど、多くのスクリプトが読めないのを見ました。アドバイスをお願いします。

4

9 に答える 9

9

編集2（2017年2月22日）：アセットを最小化するための（そしてローダーとプラグインを追加することでさらに多くの）最適なツールは間違いなくWebpackです。

すべて.cssを1つのファイルに移動して縮小する構成の例：

{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        minimize: true
      }
    }
  ]
}

編集1（2014年9月16日）：さらに良いことに、GulpやGruntのようなタスクランナーができました。

タスクランナーは、プロジェクトの開発中に実行する必要のある、時間のかかる退屈な（ただし非常に重要な）タスクの多くを自動化するために使用される小さなアプリケーションです。これらには、テストの実行、ファイルの連結、縮小、CSS前処理などのタスクが含まれます。タスクファイルを作成するだけで、ファイルに変更を加えるときに考えられるほぼすべての開発タスクを自動的に処理するようにタスクランナーに指示できます。これは非常に単純なアイデアであり、多くの時間を節約し、開発に集中できるようになります。

必読：Gulp.js入門

JavaScriptの連結と縮小（およびJSHint）を使用したタスクの例：

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

元の回答（2012年7月19日）： JSとCSSを縮小できるHTML5ボイラープレートビルドスクリプトをお勧めします。

于 2012-07-19T21:01:40.620 に答える
7

優れたjavascriptコンプレッサーはGoogleのClosureCompilerでもあり、その逆も同様です。圧縮されたコードを少し読みやすくするために、JavascriptBeautifierを使用できます。phpEasyMinプロジェクトもご覧ください。

于 2012-07-19T20:48:05.570 に答える
5

JSにはクロージャコンパイラが正しく推奨されています。しかし、GoogleのClosureスタイルシートを知っている人は多くありません。クロージャースタイルシートの機能の1つは、名前の変更です。

<style>
  .descriptive-parent-class-name .descriptive-element-class-name {color:red;}
</style>
<div class="descriptive-parent-class-name">
  <p class="descriptive-element-class-name">Lorem ipsum</p>
  <p class="descriptive-element-class-name">Lorem ipsum</p>
</div>

になります

<style>
  .a-b .a-c {color:red;}
</style>
<div class="a-b">
  <p class="a-c">Lorem ipsum</p>
  <p class="a-c">Lorem ipsum</p>
</div>

さらなる縮小もあります。また、OPがすべてのリソースがhtmlに含まれていることを示しているという事実を考えると、これによりトラフィックのオーバーヘッドが大幅に節約される可能性があります。

注意：Googleの検索結果ページを調べると、クラス名とID名がランダムな4文字を超えることはほとんどありません。

于 2012-07-20T00:42:13.337 に答える
3

利用可能な多くの ミニファイアの1つを使用する。

CSSを縮小するものも あります。

于 2012-07-19T20:36:41.277 に答える
3

私はあなたが2つのステップでそれをしなければならないのではないかと心配しています：

  1. テキストエディタでのグローバルオブジェクトの手動検索と置換
  2. cssとjsでジョブを終了するミニファイア

しばらく前に同様の質問がありました（グローバルオブジェクトとオブジェクトキーについて）。私が得た答えは、グローバルなコンテキストについて仮定を立てるツールはないということでした。あなたの例では、あなたが提供しなかった別のhtmlまたはjsフラグメントによって使用される可能性があるため、「pageLoad」を縮小しません。

この例の回避策は、pageLoad関数をローカルにし、スクリプトにonloadイベントを動的に追加することです。

elt.onload=function(){pageLoad();};
于 2012-07-19T21:12:31.050 に答える
1

JavaScriptコードはJavaScript内で圧縮および解凍できますが（他の回答を参照）、CSSで同じ結果を達成することは実際には困難です。HTMLとCSSの間のリンクを破壊せずに識別子とクラス名を変更することはできないため、現在、不要な空白を削除する以上のことを行うツールはありません（積極的なCSSミニファイツールはありますか？ ）。

また、空白以外はHTMLマークアップから削除できません。クラス名と識別子を縮小することはできますが、現在、CSS / JSファイルでこれらの縮小された値を更新するツールがないため、Webサイトが見苦しく壊れてしまいます。また、CSS効果を正しく取得するには、空の要素でさえ必要になることがよくあります（はい、私はあなたを見ています、IE6）。これはJavaScript関数名にも当てはまります。

TL; DR：残念ながら、すべてを1つにまとめたツールはありません。最も近いのはhtmlcompressorです。

于 2012-07-19T21:04:25.993 に答える
1

http://prettydiff.com/を試してください。自動言語検出を提供し、html、css、およびjavascriptを縮小できます。このツールは、mimeタイプがない、またはjavascriptに関連するmimeタイプがあるスクリプトタグには、javascriptが含まれているか、何も含まれていないことを前提としています。同様に、mimeタイプのないスタイルタグまたは「text / css」mimeタイプのあるスタイルタグには、CSSが含まれていると見なされます。CSSとJavaScriptはそれに応じて縮小されます。ツール自体はjavascriptで書かれています。複数のツールを使用する必要がある理由はありません。

于 2012-07-21T13:16:00.503 に答える
0

試したことはありませんが、GoogleのClosureコンパイラの本当に良いレビューを聞いたことがあります。試してみてください。

于 2012-07-19T21:00:23.617 に答える
0

WebMarkupMinOnlineを試すことをお勧めします。

WebMarkupMin Onlineは、HTML、XHTML、およびXMLコードを縮小するための無料のオンラインツールです。HTMLおよびXHTMLミニファイアは、タグおよび属性からのCSSコードのミニファイ、および疑似プロトコルを使用したタグ、イベント属性、およびハイパーリンクstyleからのJavaScriptコードのミニファイをサポートします。これらのミニファイアは、CSSミニファイ（Mads Kristensenの効率的なスタイルシートミニファイア、Microsoft Ajax CSSミニファイア、YUI CSS Compressor）とJavaScriptミニファイ（Douglas CrockfordのJSMin、Microsoft Ajax JSミニファイア、YUI JS Compressor）の複数のアルゴリズムをサポートしています。scriptjavascript:

これらのツールは、 WebMarkupMinライブラリに基づいています。

于 2013-04-28T09:14:19.727 に答える