web-dev-qa-db-ja.com

css / jsファイルを自動的に結合するには何を使用すればよいですか？

私は sprockets をjavascriptファイルを結合するために知っていますが、試していません。他のオプションとは何ですか？それらはどのように積み重ねられますか？

optimizationjavascriptcss
14
Cebjyre

YUIを使用して出力を圧縮、連結、およびキャッシュするAsp.Netのハンドラーを作成しました。

ここにソースがあります： http://Gist.github.com/13091

4
travis

別の質問でこの問題に既に対処しています

後から考えてみると、プログラマーサイトではなく、ウェブマスターに質問する必要がありました。

3つのオプションがあります：

  1. フレームワークに自動的に処理させます
  2. ウェブサーバーに自動的に処理させます
  3. 独自のオプションを使用して手動で実行する

オプション1（CakePHP拡張モジュールを使用）：

サイトに AssetPacker をダウンロードしてインストールします（jsminとCSSTidyも必要です）。 jsファイルを含む数行のソースを変更します。洗浄->すすぎ->繰り返し。出来上がり、残りは自動的に行われます。

他のフレームワークを使用している場合、可能性としては、これを実現するツールがあります。 webdevの世界ではかなり一般的な要件です。

オプション2（Apache modを使用）：

Apache用Google Pagespeed mod をご覧ください。それはあなたが説明するすべてを実行します。

ただし、運用サーバーのリソースを監視してください。一部の人々は、これが悪い方法でサーバーの負荷を増加させる問題を見てきました。私は肯定的ではありませんが、効果的なオプションとして十分な静的コンテンツ戦略が必要になる場合があります。

オプション3：

本当に必要な場合は、JSファイルサーバー側を連結し、すべてのリンクrelを1つに結合するいくつかのPHPマジックを作成できます。

個人的には、このオプションには強くお勧めします。

私が知る限り、SprocketsはAssetPackerと同じようにJSファイルを連結しますが、Ruby Gemとして実装されています。しないのは、jsコードを縮小することです。したがって、使用する場合は、おそらくjsmin gemも取得することをお勧めします。 CakePHPでSprockets + JSMinを使用する方法については、こちらをご覧ください 。

CakePHPに重点を置いていることは知っていますが、プラグインをCakePHPに適合させることができれば、それを別のフレームワークに適合させることも簡単なはずだと思います。

2
Evan Plaice

WebアプリケーションがPHPにある場合は、 minify の使用を検討する必要があります。

複数のCSSまたはJavascriptファイルを組み合わせて、不要な空白とコメントを削除し、gzipエンコーディングと最適なクライアント側キャッシュヘッダーを提供します。

1
Tom

グーグルで簡単に検索すると、CSSファイルを結合するためにこれが見つかります： http://www.tothepc.com/archives/combine-merge-multiple-css-files/

1
Macha

それらを組み合わせてもよろしいですか？共通ライブラリを使用する場合、CDNを活用してjavascriptを配信できます。その後、ブラウザのキャッシュ（他のサイトが同じCDNを使用していると仮定）と分散配信を利用できます。 Microsoft および Google にはそれぞれ解決策があります（私はどちらも正直に使用していませんが、確実に開始します）。

1
Larry Smithmier

ASP.NETプロジェクトの場合、 Karl Seguinによる指示 に基づいて、ビルドプロセスの一部にしました。

カールは彼のブログで最もよく説明していますが、短いバージョンはYUICompressorをラップするコンソールアプリをセットアップすることです。次に、ビルド後タスクを設定して、サイトのJSファイルの場所に対してそのコンソールアプリを呼び出すことができます。

1
Raleigh Buckner

このためには、Pythonを知っていることが実際に役立つかもしれません。 Pythonをすぐに学ぶことができます。私は約2週間前に始めましたが、私の最初のアプリケーション（まだ終了していません）は、あなたが望むものとまったく同じことをします。 DotLessコンパイラと同様に、ファイルまたはディレクトリを監視する監視機能があり、それらが変更されると新しいファイルが生成されます。

Pythonは他のメンテナンスタスクにも最適であり、Pythonを使用するのが好きなシステム管理者をたくさん読んでいます。

1
Pickels

Minifpy ：Python3で作成されたツール（Mac OS、WindowsおよびLinux互換）は、Pythonを使用してJSとCSSファイルをマージおよび縮小します。

Minifpyは非常に簡単なJSON構成ファイルを使用して、マージするファイル、縮小するファイル、またはしないファイルを定義します。

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

CLIでこのツールを使用することもできます。

MinifpyはJS/CSSファイルの変更を検出し、それらを自動的にマージ/縮小します（開発に役立ちます）。

0
Samuel Dauzon