やたらたくさんcssやらjsやらを引っ張ってくるhtmlがあるとソースは汚くなるし、http通信も増えてしまって困り者です。ソースは2000歩譲って許されたとしても(許されない)http通信の増加はユーザがつらみなので許されないところです。ということで、その辺を解決してくれるAsseticについて。
Asseticは複数のcssファイル(or jsファイル)を連結して一つにまとめてくれます。フレームワーク向けにそういう機能があったりしますが、素パスタならぬ素PHPでも使えるのでオリーブオイル不要。
準備
composer.pharを用意して
{ "require":{ "kriswallsmith/assetic": "*@dev", "twig/twig": "*@dev", "leafo/lessphp": "*@dev", "leafo/scssphp": "*@dev", "ptachoire/cssembed": "*@dev", "leafo/scssphp-compass": "*@dev" } }
のように投げやりなcomposer.jsonを作って*1
$ php composer.phar install
とすれば準備完了。
インストールでこけたら前に書いたcomposerがproxy関係でコケるときの対処方法が参考になるかもしれません。
試す
https://github.com/matsu-chara/assetic_test
に動作サンプルを用意しました。
JSの結合
jsフォルダの中にある
a.js
/* a.js */ console.log("aaa");
b.js
/* b.js */ console.log("bbb");
の二つのファイルを結合します。
asset_js.php
<?php require '../vendor/autoload.php'; use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; $js = new AssetCollection(array( new GlobAsset('js/*') )); header('Content-Type: text/javascript'); echo $js->dump();
これで終わり。
あとは
index.html
<html> <head> <script type="text/javascript" src="asset_js.php"></script> </head> <body> </body> </html>
のようにscriptタグで読みこむだけ!
実際にページを見てみるとconsoleのログにaaaとbbbが書き込まれていたり、asset_js.phpとして
/* a.js */ console.log("aaa"); /* b.js */ console.log("bbb");
が読み込まれていることが確認できます。
ピンでファイルを指定したいなーというときは
new GlobAsset('js/')をnew FileAsset('js/a.js')などに変更してください。
どちらも組み合わせたり複数使うことができます。(FileAssetで指定したファイルが見つからない場合、最終的に何も出力しなくなってしまうので注意)
CSSの結合
jsとやり方はほとんど同じです。
/* a.css */ #zannen-red { background-color:red; }
b.css
/* b.css */ #zannen-red p { background-color:blue; }
の二つのファイルを結合します。
<?php require '../vendor/autoload.php'; use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; $css = new AssetCollection(array( new GlobAsset('css/*'), )); header('Content-Type: text/css'); echo $css->dump();
あとは
index.html
<html> <head> <link rel="stylesheet" href="asset_css.php"> </head> <body> <div id="zannen-red"> <p>a</p> <p>b</p> <p>c</p> </div> </body> </html>
とします。
その他
Asseticのすごいところはファイル結合だけじゃなく、coffeeやらscssやらのコンパイルを結合前に行ってくれたり、キャッシュしたり、twigと連携できたりするところらしいのですがそれは今度の機会に。
*1:assetic以外はオプションなので該当機能を使わない場合は不要