$this->view->headScript()->appendFile('/static/js/script1.js'); $this->view->headScript()->appendFile('/static/js/script2.js'); $this->view->headScript()->appendFile('/static/js/script3.js');
代わりに:
<script type="text/javascript" src="/static/js/script1.js"></script> <script type="text/javascript" src="/static/js/script2.js"></script> <script type="text/javascript" src="/static/js/script3.js"></script>
これを入手してください:
<script type="text/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script>
この記事はあなたのためです。
ヘルパーのインストール
ヘルパーはcomposerを使用してインストールできます。
require: { "denis-isaev/zend-view-helper-head-concatenate": "*@dev" }, "repositories":[ { "type":"git", "url":"http://github.com/denis-isaev/ZendHeadConcat" } ]
または単にgithubからダウンロード/クローンします: github.com/denis-isaev/ZendHeadConcat
ヘルパー構成
Bootsrap.phpで、ヘルパーとクラス名のプレフィックスを含むディレクトリへのパスを追加する必要があります。
$view->addHelperPath(APPLICATION_PATH . '/../vendor/denis-isaev/zend-view-helper-head-concatenate/library/Iden/View/Helper/', 'Iden_View_Helper');
apllication.iniでヘルパー構成を追加します。
resources.view.concatenateHeadScript.enable = true resources.view.concatenateHeadScript.cacheDir = APPLICATION_PATH "/../static/cache/" resources.view.concatenateHeadScript.cacheUri = /static/cache/ resources.view.concatenateHeadScript.map./static = APPLICATION_PATH "/../static"
パラメーターの説明:
- enable-ヘルパーを有効 /無効にします。 このパラメーターがfalseに設定されている場合、ヘルパー自体ではなくヘルパーがZend_View_Helper_HeadScriptインスタンスを返し、すべてのスクリプトタグが通常どおり表示されます。
- cacheDir-キャッシュファイルが追加されるディレクトリへのパス。
- cacheUri-キャッシュファイルが追加されるディレクトリのURI。
- map-ここで、スクリプトが保存されているディレクトリへのuriの対応を示す必要があります。
例:
resources.view.concatenateHeadScript.map./uri_path = APPLICATION_PATH "/../file_path"
$this->view->headScript()->appendFile('/uri_path/js/script1.js');
APPLICATION_PATH "/../file_path/js/script1.js"
より現実的な例:
resources.view.concatenateHeadScript.map./static = APPLICATION_PATH "/../static" $this->view->headScript()->appendFile('/static/js/script1.js');
APPLICATION_PATH "/../static/js/script1.js"
Webサーバーにスクリプトがある複数のディレクトリの複数のエイリアスがある場合は、ヘルパーがすべてのディレクトリのファイルを見つけることができるように、それらすべてを記述する必要があります。 例:
resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static" resources.view.concatenateHeadLink.map./admin/static = APPLICATION_PATH "/../cms_static"
プレフィックスが異なることが重要です。 これはできません:
resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static" resources.view.concatenateHeadLink.map./static/admin = APPLICATION_PATH "/../cms_static"
ヘルパーの使用
スクリプトタグ(レイアウトまたはビュー)を追加する必要がある場所で、次のように記述します。
<?php echo $this->concatenateHeadScript(); ?>
そして、htmlの出力では次のようになります。
<script type="text/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script>
結果の
bff149a0b87f5b0e00d9dd364e9ddaa0.js
ファイルは、すべてのスクリプトの結合です。
ファイル名は、スクリプトの初期リストとその変更時間からのmd5です。 したがって、キャッシュファイルの最初の生成後、その後のヒットで、ヘルパーはそれを再度生成しません。 キャッシュファイルの新しい世代は、マージされるファイルのリストが変更された場合、またはファイルの1つの変更時間が変更された場合にのみ発生します。
新しい世代ごとに新しいキャッシュファイルが取得されますが、古いファイルは削除されないため、キャッシュディレクトリを定期的に消去して、その内容をすべて削除するのが理にかなっています。
より多くの使用例。
結果のファイルに対して、
appendFile
ヘルパーの
appendFile
メソッドで指定されるのと同様に、タイプ(
application/javascript
)と条件(
lt IE 7
)を指定できます。
<?php echo $this->concatenateHeadScript('application/javascript', array('conditional' => 'lt IE 7')); ?>
出力は次のようになります。
<!--[if lt IE 7]><script type="application/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script><![endif]-->
headScriptヘルパーを使用してスクリプトを追加する場合:
$this->view->headScript()->appendFile('/static/script_no_concat.js');
noConcatパラメーターを指定して、このスクリプトが別個のタグとしてhtmlに挿入されるようにすることができます。 この場合、このファイルの前に追加されたすべてのファイルが1つのキャッシュファイルに結合され、 script_no_concat.js
が挿入され、その後追加されたすべてのスクリプトが2番目のキャッシュファイルに結合されます。
$this->view->headScript()->appendFile('/static/js/script1.js'); $this->view->headScript()->appendFile('/static/js/script2.js'); $this->view->headScript()->appendFile('/static/js/script_no_concat.js', null, array('noConcat' => true)); $this->view->headScript()->appendFile('/static/js/script3.js'); $this->view->headScript()->appendFile('/static/js/script4.js');
出力:
<script type="text/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <script type="text/javascript" src="/static/js/script_no_concat.js"></script> <script type="text/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script>
マージするスクリプトのリストを走査するとき、ヘルパーは追加されたスクリプトのタイプをチェックして結果のファイルのタイプと一致させ、それらが異なる場合、現在のスクリプトはnoConcatとしてマークされます。
$this->view->headScript()->appendFile('/static/script1.js', 'application/javascript'); $this->view->headScript()->appendFile('/static/script2.js'); // text/javascript $this->view->headScript()->appendFile('/static/script3.js', 'application/javascript'); $this->view->headScript()->appendFile('/static/script4.js'); // text/javascript
これで、指定されたタイプ
application/javascript
ヘルパーを呼び出すとき:
<?php echo $this->concatenateHeadScript('application/javascript'); ?>
出力は次のようになります。
<script type="application/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <!-- script2.js --> <script type="text/javascript" src="/static/js/script2.js"></script> <script type="application/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script> <!-- script2.js script4.js --> <script type="text/javascript" src="/static/js/script4.js"></script>
そして、デフォルトのタイプで呼び出された場合:
<?php echo $this->concatenateHeadScript(); ?>
出力は次のようになります。
<script type="application/javascript" src="/static/js/script1.js"></script> <script type="text/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script> <!-- script1.js script3.js --> <script type="application/javascript" src="/static/js/script3.js"></script> <script type="text/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <!-- script3.js -->
スタイルはどうですか?
CSSスタイルの場合、まったく同様のヘルパー。 すぐに設定と例。
resources.view.concatenateHeadLink.enable = true resources.view.concatenateHeadLink.cacheDir = APPLICATION_PATH "/../static/cache/" resources.view.concatenateHeadLink.cacheUri = /static/cache/ resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static"
ファイルの追加:
$this->view->headLink()->appendStylesheet('/static/css/style1.css'); $this->view->headLink()->appendStylesheet('/static/css/style2.css'); $this->view->headLink()->appendStylesheet('/static/css/style3.css');
ヘルパーの呼び出し:
<?php echo $this->concatenateHeadStylesheet(); ?>
出力:
<link href="/static/cache/4e0eb351038628091ac42188b1e92977.css" media="screen" rel="stylesheet" type="text/css" >
メディア(tv)属性と条件(lt IE 9)を使用したヘルパー呼び出し:
<?php echo $this->concatenateHeadStylesheet('tv', 'lt IE 9'); ?>
出力:
<!--[if lt IE 9]> <link href="/static/cache/4e0eb351038628091ac42188b1e92977.css" media="tv" rel="stylesheet" type="text/css" > <![endif]-->
$ extras属性を持つスタイルファイルを追加する場合
$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, null, $extras);
noConcatとして自動的にマークされます。
ファイルのメディア(tv)属性
$this->view->headLink()->appendStylesheet('/static/css/style1.css', 'tv');
最終的なCSSのメディア(アプリケーション/ JavaScript)とは異なります <?php echo $this->concatenateHeadStylesheet('application/javascript'); ?>
そのようなファイルはnoConcatとしてマークされます。
条件を使用する場合
$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, 'lt IE 9');
ファイルはnoConcatとしてマークされます。
次のようにファイルを手動でNoConcatとしてマークします。
$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, null, array('noConcat' => true));
エピローグとして
このキットでこれらのヘルパーを使用します。
- phpStormでは、File Watcherを使用してスクリプトとスタイルの自動縮小を構成します。
- headScriptおよびheadLinkヘルパーは、プロジェクト内のスクリプトを接続し、開発モードでは元のファイルが挿入され、実稼働ではphpStormによって縮小されます。
- ビューでは、構成の開発部分を介して非アクティブ化しながら、記事で説明されているヘルパーを使用します。
その結果、開発モードでは元のスクリプトファイルとスタイルファイルがあり、それぞれが個別のスクリプト/リンクタグを介して接続され、本番モードでは縮小バージョンが1つのファイルに結合されています。