複数のCSS / JSファイルを組み合わせて縮小する

CSSファイルとJSファイルを統合して圧縮することにより、サイトのパフォーマンスを最適化しようとしています。私の質問は、私が直面している実際の状況（ただし、他の開発者の間でも典型的であるはずです）を前提として、これを達成するための（具体的な）ステップについての詳細です。

私のページは、次のようないくつかのCSSおよびJSファイルを参照しています。

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

本番リリースでは、3つのCSSファイルを1つにまとめ、たとえばYUI Compressorを使用してそれを縮小します。しかし、その後、新しく縮小されたCSSを参照するために、これらの3つのファイルを必要とするすべてのページを更新する必要があります。これはエラーが発生しやすいようです（たとえば、多くのファイルでいくつかの行を削除して追加しています）。他にリスクの少ないアプローチはありますか？JSファイルと同じ問題。

minifyを確認してください。URLにスタックするだけで、複数のjs、cssファイルを1つに結合できます。

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

私たちは何年もそれを使用してきましたが、それは素晴らしい仕事をし、その場でそれを行います（ファイルを編集する必要はありません）。

YUIコンプレッサーは最高だと思います。JSとCSSを最小console.log化し、低レベルのJavaScriptデバッグに使用するステートメントを取り除きます。

それがいかに簡単かチェックしてください。

antタスクで開始できるため、svn / gitを使用する場合は、post / pre-commitフックに含めることができます。

更新：最近では、concat、minify、uglifyの貢献でgruntを使用しています。これをウォッチャーで使用すると、ソースを変更するたびにバックグラウンドで新しい縮小ファイルが作成されます。uglify contribはコンソールログを削除するだけでなく、未使用の関数とプロパティも削除します。

簡単な洞察については、このチュートリアルを参照してください。

更新： 最近の人々は、うなり声とその前身である「gulp」から一歩下がって、npmをビルドツールとして使用しています。ここでそれを読んでください。

更新： だから今、人々はnpmを実行するためにyarnを使用しています。当然です。糸のアイコンは猫です。現在のほとんどのフレームワークは、リソースをパッケージにバンドルするためにwebpackを使用しています。これにより、縮小も処理されます。

新しく縮小されたCSSを参照するには、これらの3つのファイルを必要とするすべてのページを更新する必要があります。

まず、私はあなたが共通のヘッダーを持つべきだと言います。したがって、必要に応じていつでもすべてのヘッダーを変更する必要はありません。単一のヘッダーまたは2-3を使用することをお勧めします。したがって、ページが必要な場合は、ヘッダーを変更できます。したがって、Webアプリを拡張したいときはいつでも、リスクが少なく退屈になります。

開発環境について言及していません。さまざまな環境用にリストされた多くの圧縮ツールがあることがわかります。そして、あなたはieYUI Compressorという優れたツールを使用しています。

最終的には、CodeKitを使用してCSSファイルとJSファイルを連結しました。私が本当に便利だと思う機能は、ファイルの保存時に連結を行う機能です。これは、それぞれのCSS / JSアセットを監視するためです。たとえば、1つのCSSファイルと1つのJSファイルに適切に結合すると、他のすべてのファイルはこれら2を参照できます。

CodeKitにその場での縮小/圧縮を依頼することもできます。

免責事項：私はCodeKitとは一切関係ありません。私はランダムにWebでそれを見つけ、それは私の開発プロセスで素晴らしいツールとして機能しました。また、1年以上前に初めて使用して以来、優れたアップデートが付属しています。

ファイルを連結するだけの場合は、Windowsユーザー向けのヒント：

目的の場所でcmdを開き、「type」を使用してファイルをファイルにパイプするだけです

例：

type .\scripts\*.js >> .\combined.js

スクリプトの順序が重要な場合は、ファイルを目的の順序で明示的に入力する必要があります。

私の角度/ブートストラッププロジェクトのbatファイルでこれを使用します

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js

-それは2015通りに年IMO一息使用している最も簡単な方法ですhttp://gulpjs.com/を。jsスクリプトにgulp-uglifyを使用し、cssにgulp-minify-cssを使用してコードを縮小するのは非常に簡単です。 Gulpは間違いなく試す価値があります

コンテンツ管理システム（Wordpress、Joomla、Drupalなど）について言及しているようには見えませんが、人気のあるCMSを使用している場合は、CSSとJSを縮小してキャッシュするプラグイン/モジュール（無料のオプションも）を使用できます。

プラグインを使用すると、非圧縮バージョンを編集できるようにしておくことができ、変更が加えられると、プラグインは自動的に変更を含めてファイルを再圧縮します。何かが壊れた場合にファイル（カスタムjsファイルなど）を除外できるプラグインを選択していることを確認してください。

私は過去にこれらのファイルを手動で維持することを試みました、そしてそれは常にメンテナンスの悪夢に変わります。幸運を祈ります。これが役に立てば幸いです。

もう少し軽量で柔軟なものを求めている人のために、この問題に対処するために本日js.shを作成しました。これは、JSファイルを対象とした簡単なコマンドラインツールであり、CSSファイルを処理するように簡単に変更できます。利点：

• プロジェクトで複数の開発者が使用するために簡単に構成可能
• JSファイルをscript_order.txtで指定された順序で結合します
• GoogleのClosure Compilerで圧縮します
• iPhoneは25kbを超えるものをキャッシュしないため、JSを可能な限り25kb未満のチャンクに分割します。
• <script>必要に応じて含めることができるタグ付きの小さなPHPファイルを生成します
• 使用法： js.sh -u yourname

それはいくつかの改善を使用することができますが、これまでに見た他のすべてのソリューションよりも私のユースケースに適しています。

最適化の最初のステップは、ファイルの最小化です。（最小化と最適化のためにGULPを強くお勧めします。その単純な監視ソリューション、インストール、およびすべてのファイルが一度に圧縮されます。すべてのCSS、JS、less、sassなどをサポートします...）

または古い学校の解決策：

1）一般に、最適化のプロセスとして、サイトのパフォーマンスを最適化するには、すべてのCSSを1つのファイルにマージし、Compassを使用してファイルを圧縮してみてください。こうすることで、静的CSSへの複数のリクエストが1つのリクエストに置き換えられます。

2）CDN（またはGoogle Hosted Libraries）を使用して解決できる複数のJSの問題。リクエストは自分以外のサーバーに送信されます。これにより、サーバーは前のリクエストが完了するのを待たずに次のリクエストを送信します。

3）ローカルに保存された独自のJavaScriptがある場合は、ブラケットプラグイン「Compress JavaScript」を使用して各ファイルを最小化します。基本的にはJavsScriptを圧縮するためのワンクリックです。Bracketsは、CSSおよびJS用に作成された無料のエディターですが、PHPおよびその他の言語で使用できます。フロントエンドとバックエンドの両方の開発者向けに作られたプラグインがたくさんあります。一般に、これらすべて（これまでのところ複数）のコマンドを実行するための「ワンクリック」。ところで、ブラケットは私の非常に高価なDreamweaverを置き換えました;）

3）CSSを最小限に抑えるには、SassやCompass などのツールを あまり使用しないでください。

注：SASSミキシングや変数を使用しなくても、CSSは圧縮されます（純粋なCSSを使用するだけで、Compassの "watch"コマンドで圧縮されます）。

これが役に立てば幸いです！

提供するファイルに対して前処理を行っている場合は、適切なビルドシステム（Makefileなど）をセットアップする必要があります。このように、重複のないソースファイルがいくつかあり、変更を加えるたびに「make」を実行すると、自動生成されたすべてのファイルが最新の状態になります。すでに構築システムが整っている場合は、その仕組みを学び、使用します。そうでない場合は、追加する必要があります。

したがって、最初に、コマンドラインからファイルを結合および縮小する方法を理解します（YUICompressorのドキュメントでこれをカバーしています）。自動的に生成されるもののディレクトリを指定します。作業中のものとは別に、Webサーバーにアクセスでき、そこに出力されます（例：gen / scripts / combined.js）。使用したコマンドをMakefileに入れ、変更を加えてそれを有効にするたびに「make」を再実行します。次に、他のファイルのヘッダーを更新して、結合および縮小されたファイルを指すようにします。

私のsymfonyプロジェクトでは私はこのようなことをします

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}

{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

開発バージョンの本番環境の準備ができたら、このスクリプトを使用してすべてのcssファイルを結合し、の内容を置き換えますmin.css。

ただし、このソリューションは、同じcssファイルがすべてのページに含まれている場合にのみ機能します。

有名なYUIコンプレッサーから構築されたcssminノードモジュールを使用できます。

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);

より速いユーティリティはすべてここにあります

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json