assetic
v3.1.2
assetic Winter CMS チームによって保守されている PHP 用の資産管理フレームワークです。
<?php
use assetic Asset AssetCollection ;
use assetic Asset FileAsset ;
use assetic Asset GlobAsset ;
$ js = new AssetCollection ( array (
new GlobAsset ( ' /path/to/js/* ' ),
new FileAsset ( ' /path/to/another.js ' ),
));
// the code is merged when the asset is dumped
echo $ js -> dump ();assetic資産とは、ロードおよびダンプできるフィルター可能なコンテンツを含むものです。アセットにはメタデータも含まれており、その一部は操作可能であり、一部は不変です。
| 財産 | アクセサ | ミューテーター |
|---|---|---|
| コンテンツ | コンテンツの取得 | セット内容 |
| 分時間 | getLastModified | 該当なし |
| ソースルート | ソースルートの取得 | 該当なし |
| ソースパス | ソースパスの取得 | 該当なし |
| ターゲットパス | getターゲットパス | setTargetPath |
「ターゲット パス」プロパティは、アセット (またはアセットのコレクション) をダンプする場所を示します。
フィルターを適用してアセットを操作できます。
<?php
use assetic Asset AssetCollection ;
use assetic Asset FileAsset ;
use assetic Asset GlobAsset ;
use assetic Filter LessFilter ;
use assetic Filter UglifyCssFilter ;
$ css = new AssetCollection ( array (
new FileAsset ( ' /path/to/src/styles.less ' , array ( new LessFilter ())),
new GlobAsset ( ' /path/to/css/* ' ),
), array (
new UglifyCssFilter ( ' /path/to/uglifycss ' ),
));
// this will echo CSS compiled by LESS and compressed by uglifycss
echo $ css -> dump ();コレクションに適用されたフィルターは、反復処理を行うと各アセット リーフにカスケードされます。
<?php
foreach ( $ css as $ leaf ) {
// each leaf is compressed by uglifycss
echo $ leaf -> dump ();
}コアは、 assetic Filter名前空間に次のフィルターを提供します。
CoffeeScriptFilter : CoffeeScript を Javascript にコンパイルします。CssImportFilter : インポートされたスタイルシートをインライン化しますCSSMinFilter : CSS を縮小しますCssRewriteFilter : 新しい URL に移動するときに CSS アセット内の相対 URL を修正しますGoogleClosureCompilerApiFilter : Google Closure Compiler API を使用して JavaScript をコンパイルしますHandlebarsFilter : ハンドルバー テンプレートを Javascript にコンパイルします。JavaScriptMinifierFilter : JavaScript を縮小しますJpegoptimFilter : JPEG を最適化します。JpegtranFilter : JPEG を最適化します。LessFilter : LESS を CSS に解析します (less.js と node.js を使用)LessphpFilter : LESS を CSS に解析します (lessphp を使用)OptiPngFilter : PNG を最適化します。PackerFilter : Dean Edwards の Packer を使用して Javascript を圧縮しますPhpCssEmbedFilter : スタイルシートに画像データを埋め込みますReactJsxFilter : React JSX を JavaScript にコンパイルしますScssphpFilter : SCSS を CSS に解析します。SeparatorFilter : マージの失敗を防ぐためにアセット間にセパレーターを挿入します。StylesheetMinifyFilter : スタイルシート CSS ファイルを圧縮しますStylusFilter : STYL を CSS に解析します。TailwindCssFilter : Tailwind CSS スタンドアロン CLI ユーティリティを使用して Tailwind CSS スタイルシートを構築しますTypeScriptFilter : TypeScript を JavaScript に解析します。UglifyCssFilter : CSS を縮小しますUglifyJs2Filter : Javascript を縮小しますUglifyJs3Filter : Javascript を縮小します資産を整理するために資産マネージャーが提供されます。
<?php
use assetic AssetManager ;
use assetic Asset FileAsset ;
use assetic Asset GlobAsset ;
$ am = new AssetManager ();
$ am -> set ( ' jquery ' , new FileAsset ( ' /path/to/jquery.js ' ));
$ am -> set ( ' base_css ' , new GlobAsset ( ' /path/to/css/* ' ));アセット マネージャーを使用してアセットを参照し、重複を避けることもできます。
<?php
use assetic Asset AssetCollection ;
use assetic Asset AssetReference ;
use assetic Asset FileAsset ;
$ am -> set ( ' my_plugin ' , new AssetCollection ( array (
new AssetReference ( $ am , ' jquery ' ),
new FileAsset ( ' /path/to/jquery.plugin.js ' ),
)));フィルターを整理するためのフィルター マネージャーも提供されます。
<?php
use assetic FilterManager ;
use assetic Filter ScssFilter ;
use assetic Filter CssMinFilter ;
$ fm = new FilterManager ();
$ fm -> set ( ' sass ' , new ScssFilter ( ' /path/to/parser/scss ' ));
$ fm -> set ( ' cssmin ' , new CssMinFilter ());これらすべてのオブジェクトを手動で作成したくない場合は、ほとんどの作業を自動的に実行してくれるアセット ファクトリを使用できます。
<?php
use assetic Factory AssetFactory ;
$ factory = new AssetFactory ( ' /path/to/asset/directory/ ' );
$ factory -> setAssetManager ( $ am );
$ factory -> setFilterManager ( $ fm );
$ factory -> setDebug ( true );
$ css = $ factory -> createAsset ( array (
' @reset ' , // load the asset manager's "reset" asset
' css/src/*.scss ' , // load every scss files from "/path/to/asset/directory/css/src/"
), array (
' scss ' , // filter through the filter manager's "scss" filter
' ?cssmin ' , // don't use this filter in debug mode
));
echo $ css -> dump (); AssetFactoryは、相対アセット パスのベース ディレクトリとして使用されるルート ディレクトリで構築されます。
cssminのようにフィルター名の前に疑問符を付けると、ファクトリがデバッグ モードのときにそのフィルターが省略されます。
ファクトリにワーカーを登録することもできます。これにより作成されたすべてのアセットは、返される前にワーカーのprocess()メソッドに渡されます。例については、以下のキャッシュ無効化を参照してください。
AssetManager が保持するすべてのアセットをディレクトリ内のファイルにダンプできます。これはおそらく Web サーバーのドキュメント ルートの下にあるため、ファイルを静的に提供できます。
<?php
use assetic AssetWriter ;
$ writer = new AssetWriter ( ' /path/to/web ' );
$ writer -> writeManagerAssets ( $ am );これにより、アセットのターゲット パスが使用されます。
先ほど説明したように静的ファイルからアセットを提供する場合、CacheBustingWorker を使用してアセットのターゲット パスを書き換えることができます。ファイル名拡張子の前に、アセットの特定のバージョンに固有の識別子が挿入されます。
この識別子はアセットの変更時間に基づいており、適用されたフィルターがサポートしている場合は依存するアセットも考慮されます。
<?php
use assetic Factory AssetFactory ;
use assetic Factory Worker CacheBustingWorker ;
$ factory = new AssetFactory ( ' /path/to/asset/directory/ ' );
$ factory -> setAssetManager ( $ am );
$ factory -> setFilterManager ( $ fm );
$ factory -> setDebug ( true );
$ factory -> addWorker ( new CacheBustingWorker ());
$ css = $ factory -> createAsset ( array (
' @reset ' , // load the asset manager's "reset" asset
' css/src/*.scss ' , // load every scss files from "/path/to/asset/directory/css/src/"
), array (
' scss ' , // filter through the filter manager's "scss" filter
' ?yui_css ' , // don't use this filter in debug mode
));
echo $ css -> dump ();不必要な作業を避けるために、単純なキャッシュ メカニズムが提供されています。
<?php
use assetic Asset AssetCache ;
use assetic Asset FileAsset ;
use assetic Cache FilesystemCache ;
use assetic Filter JavaScriptMinifierFilter ;
$ jsMinifier = new JavaScriptMinifierFilter ();
$ js = new AssetCache (
new FileAsset ( ' /path/to/some.js ' , array ( $ jsMinifier )),
new FilesystemCache ( ' /path/to/cache ' )
);
// the JavaScriptMinifierFilter compressor will only run on the first call
$ js -> dump ();
$ js -> dump ();
$ js -> dump ();assetic Twig 拡張機能を使用するには、それを Twig 環境に登録する必要があります。
<?php
$ twig -> addExtension ( new assetic Extension ( $ factory ));拡張機能を配置すると、アセット ファクトリが使用するものと同様の構文を持つスタイルシートと JavaScript タグが公開されます。
{% stylesheets '/path/to/sass/main.sass' filter = 'sass,?yui_css' output = 'css/all.css' %}
< link href = " {{ asset_url }} " type = " text/css " rel = " stylesheet " />
{% endstylesheets %}この例では、フィルターされたアセットが見つかる URL を含む 1 つのlink要素をページ上にレンダリングします。
拡張機能がデバッグ モードの場合、この同じタグは複数のlink要素をレンダリングします ( css/src/*.sass glob によって参照されるアセットごとに 1 つずつ)。指定されたフィルタは、 ?接頭語。
この動作は、タグにdebug属性を設定することによってもトリガーできます。
{% stylesheets 'css/*' debug = true %} ... {% stylesheets %}これらの URL が 404 エラーを返さないように、これらのアセットを Web ディレクトリに書き込む必要があります。
<?php
use assetic AssetWriter ;
use assetic Extension Twig TwigFormulaLoader ;
use assetic Extension Twig TwigResource ;
use assetic Factory LazyAssetManager ;
$ am = new LazyAssetManager ( $ factory );
// enable loading assets from twig templates
$ am -> setLoader ( ' twig ' , new TwigFormulaLoader ( $ twig ));
// loop through all your templates
foreach ( $ templates as $ template ) {
$ resource = new TwigResource ( $ twigLoader , $ template );
$ am -> addResource ( $ resource , ' twig ' );
}
$ writer = new AssetWriter ( ' /path/to/web ' );
$ writer -> writeManagerAssets ( $ am );assetic 、Python Webassets ライブラリ (GitHub で入手可能) に基づいています。
