kekrozsak/concepts.md at 973b3318251370b34cd739606dfa7e8a173aca36

Polonkai Gergely 082a0130c2 Initial commit with Symfony 2.1+Vendors

Signed-off-by: Gergely POLONKAI (W00d5t0ck) <polesz@w00d5t0ck.info>

2012-07-01 09:52:20 +02:00

5.5 KiB

Raw Blame History

Assetic OOP APIを使用するためには、まず、[アセット」と「フィルタ」の2つの重要なコンセプトを理解する必要があります。

アセット

アセットとは、読み込み、及びダンプが可能な、コンテンツとメタデータを内包しているオブジェクトの事を指します。大体の場合において3つのカテゴリー、すなわち、Javascriptとスタイルシート、画像のどれかに属することになるでしょう。読み込みの方法としては、ファイルシステムからがほとんどですが、 HTTPやデータベース経由でも、文字列としてでも読み込みが可能で、事実上あらゆるものが読み込み可能です。 Asseticのアセットインターフェースを満足させさえすれば良いのです。

フィルタ

フィルタは、アセットが読み込まれる、かつ/もしくは、ダンプされる際に、アセットコンテンツに対して作用するオブジェクトです。アセットと同様に、Asseticのフィルタインターフェースを実装することで、どのような作用も可能になります。

フィルタを用いて、アセットに適用できるツール群の一覧です。

CoffeeScript
CssEmbed
CssMin
Google Closure Compiler
jpegoptim
jpegtran
Less
LessPHP
optipng
Packager
pngout
SASS
Sprockets (version 1)
Stylus
YUI Compressor

アセットとフィルタの使用

まずはアセットオブジェクトを作成することから始まります。多くの場合はFileAssetをインスタンス化し、ファイルシステムのパスを第一引数に渡します。

$asset = new Assetic\Asset\FileAsset('/path/to/main.css');

アセットオブジェクトを作成したら、ensureFilter()を呼び、フィルタを追加します。例えば、アセットコンテンツにYUI Compressorを適用してみましょう。

$yui = new Assetic\Filter\Yui\CssCompressorFilter('/path/to/yui.jar');
$asset->ensureFilter($yui);

任意のフィルタを追加したら、完成したアセットをブラウザに出力してみましょう。

header('Content-Type: text/css');
echo $asset->dump();

アセットコレクション

1つのファイルに同じ種類のアセットをまとめて、不要なHTTPリクエストを抑えてみるのも良いでしょう。 AsseticではAsseticColletionクラスを使用することで可能となります。 Assetic内部的には、このクラス自体は他のアセットと同様に、アセットインターフェースを実装したものですが、複数のアセットを1つにまとめることが可能になります。

use Assetic\Asset\AssetCollection;

$asset = new AssetCollection(array(
    new FileAsset('/path/to/js/jquery.js'),
    new FileAsset('/path/to/js/jquery.plugin.js'),
    new FileAsset('/path/to/js/application.js'),
));

ネストしたアセットコレクション

コレクションクラス自体がアセットインターフェースを実装し、コレクション内のアセットも同様にアセットインターフェースを実装しているので、簡単にネストすることができます。

use Assetic\Asset\AssetCollection;
use Assetic\Asset\GlobAsset;
use Assetic\Asset\HttpAsset;

$asset = new AssetCollection(array(
    new HttpAsset('http://example.com/jquery.min.js'),
    new GlobAsset('/path/to/js/*'),
));

HttpAssetは、HTTP経由でファイルを読み込むアセットクラス。 GlobAssetは、ファイルシステムのglobを基にファイル群を読み込むアセットコレクションクラス。両者ともにアセットインターフェースを実装しています。

このネストしたアセットコレクションという概念は、コレクションそれぞれに異なるフィルタ群を適用しようとしたときに、効果を発揮します。例えば、スタイルシートがSAASで記述されたものと、vanilla CSSを用いて記述されたものからなるアプリケーションを考えた場合、次のようにして、全てを1つのシームレスなCSSアセットにまとめることができます。

use Assetic\Asset\AssetCollection;
use Assetic\Asset\GlobAsset;
use Assetic\Filter\SassFilter;
use Assetic\Filter\Yui\CssCompressorFilter;

$css = new AssetCollection(array(
    new GlobAsset('/path/to/sass/*.sass', array(new SassFilter())),
    new GlobAsset('/path/to/css/*.css'),
), array(
    new YuiCompressorFilter('/path/to/yuicompressor.jar'),
));

上記の例では、1つにまとめられたCSSを、さらにYUI compressorフィルタを適用することで、全体を圧縮しています。

アセットコレクションのイテレーション

アセットコレクションは、旧来のPHP配列のように、イテレートできます。

echo "Source paths:\n";
foreach ($collection as $asset) {
    echo ' - '.$asset->getSourcePath()."\n";
}

アセットコレクションのイテレーションは再帰的で、「葉」にあたるアセットの取得を行います。また、気の利いたフィルタを内蔵しているので、同じアセットがコレクション内に複数存在する場合でも、一度だけのインクルードが保証されます。

Next: アセットを「オンザフライ」で定義する

5.5 KiB Raw Blame History