Assetic is an asset management framework for PHP maintained by the Winter CMS team.
<?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();An Assetic asset is something with filterable content that can be loaded and dumped. An asset also includes metadata, some of which can be manipulated and some of which is immutable.
| Property | Accessor | Mutator |
|---|---|---|
| content | getContent | setContent |
| mtime | getLastModified | n/a |
| source root | getSourceRoot | n/a |
| source path | getSourcePath | n/a |
| target path | getTargetPath | setTargetPath |
The "target path" property denotes where an asset (or an collection of assets) should be dumped.
Filters can be applied to manipulate assets.
<?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();The filters applied to the collection will cascade to each asset leaf if you iterate over it.
<?php
foreach ($css as $leaf) {
// each leaf is compressed by uglifycss
echo $leaf->dump();
}The core provides the following filters in the Assetic\Filter namespace:
CoffeeScriptFilter: compiles CoffeeScript into JavascriptCssImportFilter: inlines imported stylesheetsCSSMinFilter: minifies CSSCssRewriteFilter: fixes relative URLs in CSS assets when moving to a new URLGoogleClosure\CompilerApiFilter: compiles Javascript using the Google Closure Compiler APIHandlebarsFilter: compiles Handlebars templates into JavascriptJavaScriptMinifierFilter: minifies JavascriptJpegoptimFilter: optimize your JPEGsJpegtranFilter: optimize your JPEGsLessFilter: parses LESS into CSS (using less.js with node.js)LessphpFilter: parses LESS into CSS (using lessphp)OptiPngFilter: optimize your PNGsPackerFilter: compresses Javascript using Dean Edwards's PackerPhpCssEmbedFilter: embeds image data in your stylesheetReactJsxFilter: compiles React JSX into JavaScriptScssphpFilter: parses SCSS into CSSSeparatorFilter: inserts a separator between assets to prevent merge failuresStylesheetMinifyFilter: compresses stylesheet CSS filesStylusFilter: parses STYL into CSSTypeScriptFilter: parses TypeScript into JavascriptUglifyCssFilter: minifies CSSUglifyJs2Filter: minifies JavascriptUglifyJs3Filter: minifies Javascript
An asset manager is provided for organizing assets.
<?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/*'));The asset manager can also be used to reference assets to avoid duplication.
<?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'),
)));A filter manager is also provided for organizing filters.
<?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());If you'd rather not create all these objects by hand, you can use the asset factory, which will do most of the work for you.
<?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();The AssetFactory is constructed with a root directory which is used as the base directory for relative asset paths.
Prefixing a filter name with a question mark, as cssmin is here, will cause
that filter to be omitted when the factory is in debug mode.
You can also register Workers on the factory and all assets created
by it will be passed to the worker's process() method before being returned. See Cache Busting below for an example.
You can dump all the assets an AssetManager holds to files in a directory. This will probably be below your webserver's document root so the files can be served statically.
<?php
use Assetic\AssetWriter;
$writer = new AssetWriter('/path/to/web');
$writer->writeManagerAssets($am);This will make use of the assets' target path.
If you serve your assets from static files as just described, you can use the CacheBustingWorker to rewrite the target paths for assets. It will insert an identifier before the filename extension that is unique for a particular version of the asset.
This identifier is based on the modification time of the asset and will also take depended-on assets into consideration if the applied filters support it.
<?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();A simple caching mechanism is provided to avoid unnecessary work.
<?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();To use the Assetic Twig extension you must register it to your Twig environment:
<?php
$twig->addExtension(new AsseticExtension($factory));Once in place, the extension exposes a stylesheets and a javascripts tag with a syntax similar to what the asset factory uses:
{% stylesheets '/path/to/sass/main.sass' filter='sass,?yui_css' output='css/all.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}This example will render one link element on the page that includes a URL
where the filtered asset can be found.
When the extension is in debug mode, this same tag will render multiple link
elements, one for each asset referenced by the css/src/*.sass glob. The
specified filters will still be applied, unless they are marked as optional
using the ? prefix.
This behavior can also be triggered by setting a debug attribute on the tag:
{% stylesheets 'css/*' debug=true %} ... {% stylesheets %}These assets need to be written to the web directory so these URLs don't return 404 errors.
<?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 is based on the Python webassets library (available on GitHub).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent