読者です 読者をやめる 読者になる 読者になる

複数のcssやjsをまとめてくれるassetic

やたらたくさん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とやり方はほとんど同じです。

一応例を挙げると
cssフォルダの中にある
a.css

/* a.css */
#zannen-red {
    background-color:red;
}

b.css

/* b.css */
#zannen-red p {
    background-color:blue;
}

の二つのファイルを結合します。

asset_css.php

<?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以外はオプションなので該当機能を使わない場合は不要