web-dev-qa-db-ja.com

複数の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 。しかし、その後、これらの3つのファイルを必要とするすべてのページを更新して、新しく縮小されたCSSを参照する必要があります。これはエラーが発生しやすいようです（たとえば、多くのファイルでいくつかの行を削除および追加しています）。他のリスクの少ないアプローチはありますか？ JSファイルにも同じ問題があります。

javascriptcssoptimizationyui-compressorhttp-compression
88
moey

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

CodeKitにオンザフライの縮小/圧縮を依頼することもできます。

免責事項：私はCodeKitとは一切関係ありません。私はランダムにウェブ上でそれを見つけ、私の開発プロセスの素晴らしいツールとして役立っています。また、1年以上前に最初に使用したため、優れた更新プログラムも付属しています。

12
moey

minify をチェックしてください-複数のjs、cssファイルをURLにスタックするだけで1つにまとめることができます。

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

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

35
Noodles

YUI Compressor が最高だと思います。 JSとCSSを縮小し、低レベルのJavaScriptデバッグに使用するconsole.logステートメントも削除します。

どれだけ簡単かを確認してください 。

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

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

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

UPDATE：今日、人々はうなり声とその前身である「gulp」から離れ、npmをビルドツールとして使用しています。それを読んでください ここ 。

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

23
Andresch Serj

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

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

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

19
Somnath Muluk

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

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

例：

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

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

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

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
11
mpx

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

10
aiho

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

プラグインを使用すると、圧縮されていないバージョンを編集可能な状態に保つことができ、変更が行われると、プラグインは自動的に変更を含めてファイルを再圧縮します。何かを壊す場合に備えて、ファイル（カスタムjsファイルなど）を除外できるプラグインを選択してください。

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

6
RachelD

もう少し軽量で柔軟なものが必要な人のために、この問題に対処するために js.sh を今日作成しました。これは、CSSファイルの世話をするために簡単に変更できるJSファイルを対象とした単純なコマンドラインツールです。利点：

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

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

6
Ben Y

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

または古い学校のソリューション：

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

2）CDN（またはGoogle Hosted Libraries）を使用して解決できる複数のJSの問題により、リクエストは自分のものではなく他のサーバーに送信されます。この方法では、サーバーは前のリクエストが完了するのを待ってから次のリクエストを送信しません。

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

3） Sass 、Compass、 less などのツールを使用して、CSSを最小化してみてください。

注： SASS 混合または変数を使用しなくても、CSSは圧縮されます（単純な純粋なCSSを使用し、 Compass "watch"コマンドで圧縮します）。

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

4
StefaDesign

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

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

3
jimrandomh

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

$ 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);
1
sdc

私の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ファイルが含まれている場合にのみ機能します。

1
moldcraft

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

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
0
SIbghat