# Assetic [](https://travis-ci.org/kriswallsmith/assetic)  #

[0] Fix | Delete

[1] Fix | Delete

Assetic is an asset management framework for PHP.

[2] Fix | Delete

[3] Fix | Delete

``` php

[4] Fix | Delete

<?php

[5] Fix | Delete

[6] Fix | Delete

use Assetic\Asset\AssetCollection;

[7] Fix | Delete

use Assetic\Asset\FileAsset;

[8] Fix | Delete

use Assetic\Asset\GlobAsset;

[9] Fix | Delete

[10] Fix | Delete

$js = new AssetCollection(array(

[11] Fix | Delete

new GlobAsset('/path/to/js/*'),

[12] Fix | Delete

new FileAsset('/path/to/another.js'),

[13] Fix | Delete

));

[14] Fix | Delete

[15] Fix | Delete

// the code is merged when the asset is dumped

[16] Fix | Delete

echo $js->dump();

[17] Fix | Delete

```

[18] Fix | Delete

[19] Fix | Delete

Assets

[20] Fix | Delete

------

[21] Fix | Delete

[22] Fix | Delete

An Assetic asset is something with filterable content that can be loaded and

[23] Fix | Delete

dumped. An asset also includes metadata, some of which can be manipulated and

[24] Fix | Delete

some of which is immutable.

[25] Fix | Delete

[26] Fix | Delete

| **Property** | **Accessor** | **Mutator** |

[27] Fix | Delete

|--------------|-----------------|---------------|

[28] Fix | Delete

| content | getContent | setContent |

[29] Fix | Delete

| mtime | getLastModified | n/a |

[30] Fix | Delete

| source root | getSourceRoot | n/a |

[31] Fix | Delete

| source path | getSourcePath | n/a |

[32] Fix | Delete

| target path | getTargetPath | setTargetPath |

[33] Fix | Delete

[34] Fix | Delete

The "target path" property denotes where an asset (or an collection of assets) should be dumped.

[35] Fix | Delete

[36] Fix | Delete

Filters

[37] Fix | Delete

-------

[38] Fix | Delete

[39] Fix | Delete

Filters can be applied to manipulate assets.

[40] Fix | Delete

[41] Fix | Delete

``` php

[42] Fix | Delete

<?php

[43] Fix | Delete

[44] Fix | Delete

use Assetic\Asset\AssetCollection;

[45] Fix | Delete

use Assetic\Asset\FileAsset;

[46] Fix | Delete

use Assetic\Asset\GlobAsset;

[47] Fix | Delete

use Assetic\Filter\LessFilter;

[48] Fix | Delete

use Assetic\Filter\Yui;

[49] Fix | Delete

[50] Fix | Delete

$css = new AssetCollection(array(

[51] Fix | Delete

new FileAsset('/path/to/src/styles.less', array(new LessFilter())),

[52] Fix | Delete

new GlobAsset('/path/to/css/*'),

[53] Fix | Delete

), array(

[54] Fix | Delete

new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'),

[55] Fix | Delete

));

[56] Fix | Delete

[57] Fix | Delete

// this will echo CSS compiled by LESS and compressed by YUI

[58] Fix | Delete

echo $css->dump();

[59] Fix | Delete

```

[60] Fix | Delete

[61] Fix | Delete

The filters applied to the collection will cascade to each asset leaf if you

[62] Fix | Delete

iterate over it.

[63] Fix | Delete

[64] Fix | Delete

``` php

[65] Fix | Delete

<?php

[66] Fix | Delete

[67] Fix | Delete

foreach ($css as $leaf) {

[68] Fix | Delete

// each leaf is compressed by YUI

[69] Fix | Delete

echo $leaf->dump();

[70] Fix | Delete

}

[71] Fix | Delete

```

[72] Fix | Delete

[73] Fix | Delete

The core provides the following filters in the `Assetic\Filter` namespace:

[74] Fix | Delete

[75] Fix | Delete

* `AutoprefixerFilter`: Parse and update vendor-specific properties using autoprefixer

[76] Fix | Delete

* `CoffeeScriptFilter`: compiles CoffeeScript into Javascript

[77] Fix | Delete

* `CompassFilter`: Compass CSS authoring framework

[78] Fix | Delete

* `CssEmbedFilter`: embeds image data in your stylesheets

[79] Fix | Delete

* `CssImportFilter`: inlines imported stylesheets

[80] Fix | Delete

* `CssMinFilter`: minifies CSS

[81] Fix | Delete

* `CleanCssFilter`: minifies CSS

[82] Fix | Delete

* `CssRewriteFilter`: fixes relative URLs in CSS assets when moving to a new URL

[83] Fix | Delete

* `DartFilter`: compiles Javascript using dart2js

[84] Fix | Delete

* `EmberPrecompileFilter`: precompiles Handlebars templates into Javascript for use in the Ember.js framework

[85] Fix | Delete

* `GoogleClosure\CompilerApiFilter`: compiles Javascript using the Google Closure Compiler API

[86] Fix | Delete

* `GoogleClosure\CompilerJarFilter`: compiles Javascript using the Google Closure Compiler JAR

[87] Fix | Delete

* `GssFilter`: compliles CSS using the Google Closure Stylesheets Compiler

[88] Fix | Delete

* `HandlebarsFilter`: compiles Handlebars templates into Javascript

[89] Fix | Delete

* `JpegoptimFilter`: optimize your JPEGs

[90] Fix | Delete

* `JpegtranFilter`: optimize your JPEGs

[91] Fix | Delete

* `JSMinFilter`: minifies Javascript

[92] Fix | Delete

* `JSMinPlusFilter`: minifies Javascript

[93] Fix | Delete

* `JSqueezeFilter`: compresses Javascript

[94] Fix | Delete

* `LessFilter`: parses LESS into CSS (using less.js with node.js)

[95] Fix | Delete

* `LessphpFilter`: parses LESS into CSS (using lessphp)

[96] Fix | Delete

* `OptiPngFilter`: optimize your PNGs

[97] Fix | Delete

* `PackagerFilter`: parses Javascript for packager tags

[98] Fix | Delete

* `PackerFilter`: compresses Javascript using Dean Edwards's Packer

[99] Fix | Delete

* `PhpCssEmbedFilter`: embeds image data in your stylesheet

[100] Fix | Delete

* `PngoutFilter`: optimize your PNGs

[101] Fix | Delete

* `ReactJsxFilter`: compiles React JSX into JavaScript

[102] Fix | Delete

* `Sass\SassFilter`: parses SASS into CSS

[103] Fix | Delete

* `Sass\ScssFilter`: parses SCSS into CSS

[104] Fix | Delete

* `SassphpFilter`: parses Sass into CSS using the sassphp bindings for Libsass

[105] Fix | Delete

* `ScssphpFilter`: parses SCSS using scssphp

[106] Fix | Delete

* `SeparatorFilter`: inserts a separator between assets to prevent merge failures

[107] Fix | Delete

* `SprocketsFilter`: Sprockets Javascript dependency management

[108] Fix | Delete

* `StylusFilter`: parses STYL into CSS

[109] Fix | Delete

* `TypeScriptFilter`: parses TypeScript into Javascript

[110] Fix | Delete

* `UglifyCssFilter`: minifies CSS

[111] Fix | Delete

* `UglifyJs2Filter`: minifies Javascript

[112] Fix | Delete

* `UglifyJsFilter`: minifies Javascript

[113] Fix | Delete

* `Yui\CssCompressorFilter`: compresses CSS using the YUI compressor

[114] Fix | Delete

* `Yui\JsCompressorFilter`: compresses Javascript using the YUI compressor

[115] Fix | Delete

[116] Fix | Delete

Asset Manager

[117] Fix | Delete

-------------

[118] Fix | Delete

[119] Fix | Delete

An asset manager is provided for organizing assets.

[120] Fix | Delete

[121] Fix | Delete

``` php

[122] Fix | Delete

<?php

[123] Fix | Delete

[124] Fix | Delete

use Assetic\AssetManager;

[125] Fix | Delete

use Assetic\Asset\FileAsset;

[126] Fix | Delete

use Assetic\Asset\GlobAsset;

[127] Fix | Delete

[128] Fix | Delete

$am = new AssetManager();

[129] Fix | Delete

$am->set('jquery', new FileAsset('/path/to/jquery.js'));

[130] Fix | Delete

$am->set('base_css', new GlobAsset('/path/to/css/*'));

[131] Fix | Delete

```

[132] Fix | Delete

[133] Fix | Delete

The asset manager can also be used to reference assets to avoid duplication.

[134] Fix | Delete

[135] Fix | Delete

``` php

[136] Fix | Delete

<?php

[137] Fix | Delete

[138] Fix | Delete

use Assetic\Asset\AssetCollection;

[139] Fix | Delete

use Assetic\Asset\AssetReference;

[140] Fix | Delete

use Assetic\Asset\FileAsset;

[141] Fix | Delete

[142] Fix | Delete

$am->set('my_plugin', new AssetCollection(array(

[143] Fix | Delete

new AssetReference($am, 'jquery'),

[144] Fix | Delete

new FileAsset('/path/to/jquery.plugin.js'),

[145] Fix | Delete

)));

[146] Fix | Delete

```

[147] Fix | Delete

[148] Fix | Delete

Filter Manager

[149] Fix | Delete

--------------

[150] Fix | Delete

[151] Fix | Delete

A filter manager is also provided for organizing filters.

[152] Fix | Delete

[153] Fix | Delete

``` php

[154] Fix | Delete

<?php

[155] Fix | Delete

[156] Fix | Delete

use Assetic\FilterManager;

[157] Fix | Delete

use Assetic\Filter\Sass\SassFilter;

[158] Fix | Delete

use Assetic\Filter\Yui;

[159] Fix | Delete

[160] Fix | Delete

$fm = new FilterManager();

[161] Fix | Delete

$fm->set('sass', new SassFilter('/path/to/parser/sass'));

[162] Fix | Delete

$fm->set('yui_css', new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'));

[163] Fix | Delete

```

[164] Fix | Delete

[165] Fix | Delete

Asset Factory

[166] Fix | Delete

-------------

[167] Fix | Delete

[168] Fix | Delete

If you'd rather not create all these objects by hand, you can use the asset

[169] Fix | Delete

factory, which will do most of the work for you.

[170] Fix | Delete

[171] Fix | Delete

``` php

[172] Fix | Delete

<?php

[173] Fix | Delete

[174] Fix | Delete

use Assetic\Factory\AssetFactory;

[175] Fix | Delete

[176] Fix | Delete

$factory = new AssetFactory('/path/to/asset/directory/');

[177] Fix | Delete

$factory->setAssetManager($am);

[178] Fix | Delete

$factory->setFilterManager($fm);

[179] Fix | Delete

$factory->setDebug(true);

[180] Fix | Delete

[181] Fix | Delete

$css = $factory->createAsset(array(

[182] Fix | Delete

'@reset', // load the asset manager's "reset" asset

[183] Fix | Delete

'css/src/*.scss', // load every scss files from "/path/to/asset/directory/css/src/"

[184] Fix | Delete

), array(

[185] Fix | Delete

'scss', // filter through the filter manager's "scss" filter

[186] Fix | Delete

'?yui_css', // don't use this filter in debug mode

[187] Fix | Delete

));

[188] Fix | Delete

[189] Fix | Delete

echo $css->dump();

[190] Fix | Delete

```

[191] Fix | Delete

[192] Fix | Delete

The `AssetFactory` is constructed with a root directory which is used as the base directory for relative asset paths.

[193] Fix | Delete

[194] Fix | Delete

Prefixing a filter name with a question mark, as `yui_css` is here, will cause

[195] Fix | Delete

that filter to be omitted when the factory is in debug mode.

[196] Fix | Delete

[197] Fix | Delete

You can also register [Workers](src/Assetic/Factory/Worker/WorkerInterface.php) on the factory and all assets created

[198] Fix | Delete

by it will be passed to the worker's `process()` method before being returned. See _Cache Busting_ below for an example.

[199] Fix | Delete

[200] Fix | Delete

Dumping Assets to static files

[201] Fix | Delete

------------------------------

[202] Fix | Delete

[203] Fix | Delete

You can dump all the assets an AssetManager holds to files in a directory. This will probably be below your webserver's document root

[204] Fix | Delete

so the files can be served statically.

[205] Fix | Delete

[206] Fix | Delete

``` php

[207] Fix | Delete

<?php

[208] Fix | Delete

[209] Fix | Delete

use Assetic\AssetWriter;

[210] Fix | Delete

[211] Fix | Delete

$writer = new AssetWriter('/path/to/web');

[212] Fix | Delete

$writer->writeManagerAssets($am);

[213] Fix | Delete

```

[214] Fix | Delete

[215] Fix | Delete

This will make use of the assets' target path.

[216] Fix | Delete

[217] Fix | Delete

Cache Busting

[218] Fix | Delete

-------------

[219] Fix | Delete

[220] Fix | Delete

If you serve your assets from static files as just described, you can use the CacheBustingWorker to rewrite the target

[221] Fix | Delete

paths for assets. It will insert an identifier before the filename extension that is unique for a particular version

[222] Fix | Delete

of the asset.

[223] Fix | Delete

[224] Fix | Delete

This identifier is based on the modification time of the asset and will also take depended-on assets into

[225] Fix | Delete

consideration if the applied filters support it.

[226] Fix | Delete

[227] Fix | Delete

``` php

[228] Fix | Delete

<?php

[229] Fix | Delete

[230] Fix | Delete

use Assetic\Factory\AssetFactory;

[231] Fix | Delete

use Assetic\Factory\Worker\CacheBustingWorker;

[232] Fix | Delete

[233] Fix | Delete

$factory = new AssetFactory('/path/to/asset/directory/');

[234] Fix | Delete

$factory->setAssetManager($am);

[235] Fix | Delete

$factory->setFilterManager($fm);

[236] Fix | Delete

$factory->setDebug(true);

[237] Fix | Delete

$factory->addWorker(new CacheBustingWorker());

[238] Fix | Delete

[239] Fix | Delete

$css = $factory->createAsset(array(

[240] Fix | Delete

'@reset', // load the asset manager's "reset" asset

[241] Fix | Delete

'css/src/*.scss', // load every scss files from "/path/to/asset/directory/css/src/"

[242] Fix | Delete

), array(

[243] Fix | Delete

'scss', // filter through the filter manager's "scss" filter

[244] Fix | Delete

'?yui_css', // don't use this filter in debug mode

[245] Fix | Delete

));

[246] Fix | Delete

[247] Fix | Delete

echo $css->dump();

[248] Fix | Delete

```

[249] Fix | Delete

[250] Fix | Delete

Internal caching

[251] Fix | Delete

-------

[252] Fix | Delete

[253] Fix | Delete

A simple caching mechanism is provided to avoid unnecessary work.

[254] Fix | Delete

[255] Fix | Delete

``` php

[256] Fix | Delete

<?php

[257] Fix | Delete

[258] Fix | Delete

use Assetic\Asset\AssetCache;

[259] Fix | Delete

use Assetic\Asset\FileAsset;

[260] Fix | Delete

use Assetic\Cache\FilesystemCache;

[261] Fix | Delete

use Assetic\Filter\Yui;

[262] Fix | Delete

[263] Fix | Delete

$yui = new Yui\JsCompressorFilter('/path/to/yuicompressor.jar');

[264] Fix | Delete

$js = new AssetCache(

[265] Fix | Delete

new FileAsset('/path/to/some.js', array($yui)),

[266] Fix | Delete

new FilesystemCache('/path/to/cache')

[267] Fix | Delete

);

[268] Fix | Delete

[269] Fix | Delete

// the YUI compressor will only run on the first call

[270] Fix | Delete

$js->dump();

[271] Fix | Delete

$js->dump();

[272] Fix | Delete

$js->dump();

[273] Fix | Delete

```

[274] Fix | Delete

[275] Fix | Delete

Twig

[276] Fix | Delete

----

[277] Fix | Delete

[278] Fix | Delete

To use the Assetic [Twig][3] extension you must register it to your Twig

[279] Fix | Delete

environment:

[280] Fix | Delete

[281] Fix | Delete

``` php

[282] Fix | Delete

<?php

[283] Fix | Delete

[284] Fix | Delete

$twig->addExtension(new AsseticExtension($factory));

[285] Fix | Delete

```

[286] Fix | Delete

[287] Fix | Delete

Once in place, the extension exposes a stylesheets and a javascripts tag with a syntax similar

[288] Fix | Delete

to what the asset factory uses:

[289] Fix | Delete

[290] Fix | Delete

``` html+jinja

[291] Fix | Delete

{% stylesheets '/path/to/sass/main.sass' filter='sass,?yui_css' output='css/all.css' %}

[292] Fix | Delete

<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />

[293] Fix | Delete

{% endstylesheets %}

[294] Fix | Delete

```

[295] Fix | Delete

[296] Fix | Delete

This example will render one `link` element on the page that includes a URL

[297] Fix | Delete

where the filtered asset can be found.

[298] Fix | Delete

[299] Fix | Delete

When the extension is in debug mode, this same tag will render multiple `link`

[300] Fix | Delete

elements, one for each asset referenced by the `css/src/*.sass` glob. The

[301] Fix | Delete

specified filters will still be applied, unless they are marked as optional

[302] Fix | Delete

using the `?` prefix.

[303] Fix | Delete

[304] Fix | Delete

This behavior can also be triggered by setting a `debug` attribute on the tag:

[305] Fix | Delete

[306] Fix | Delete

``` html+jinja

[307] Fix | Delete

{% stylesheets 'css/*' debug=true %} ... {% stylesheets %}

[308] Fix | Delete

```

[309] Fix | Delete

[310] Fix | Delete

These assets need to be written to the web directory so these URLs don't

[311] Fix | Delete

return 404 errors.

[312] Fix | Delete

[313] Fix | Delete

``` php

[314] Fix | Delete

<?php

[315] Fix | Delete

[316] Fix | Delete

use Assetic\AssetWriter;

[317] Fix | Delete

use Assetic\Extension\Twig\TwigFormulaLoader;

[318] Fix | Delete

use Assetic\Extension\Twig\TwigResource;

[319] Fix | Delete

use Assetic\Factory\LazyAssetManager;

[320] Fix | Delete

[321] Fix | Delete

$am = new LazyAssetManager($factory);

[322] Fix | Delete

[323] Fix | Delete

// enable loading assets from twig templates

[324] Fix | Delete

$am->setLoader('twig', new TwigFormulaLoader($twig));

[325] Fix | Delete

[326] Fix | Delete

// loop through all your templates

[327] Fix | Delete

foreach ($templates as $template) {

[328] Fix | Delete

$resource = new TwigResource($twigLoader, $template);

[329] Fix | Delete

$am->addResource($resource, 'twig');

[330] Fix | Delete

}

[331] Fix | Delete

[332] Fix | Delete

$writer = new AssetWriter('/path/to/web');

[333] Fix | Delete

$writer->writeManagerAssets($am);

[334] Fix | Delete

```

[335] Fix | Delete

[336] Fix | Delete

---

[337] Fix | Delete

[338] Fix | Delete

Assetic is based on the Python [webassets][1] library (available on

[339] Fix | Delete

[GitHub][2]).

[340] Fix | Delete

[341] Fix | Delete

[1]: http://elsdoerfer.name/docs/webassets

[342] Fix | Delete

[2]: https://github.com/miracle2k/webassets

[343] Fix | Delete

[3]: http://twig.sensiolabs.org

[344] Fix | Delete

[345] Fix | Delete