PHP JavaScript CSS Sass Ruby Less
Need help with assetic?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
kriswallsmith

Description

Asset Management for PHP

3.8K Stars 582 Forks MIT License 1.2K Commits 314 Opened issues

Services available

Need anything else?

Assetic Build Status

Assetic is an asset management framework for PHP.

Project status

This project is not maintained anymore. Development has been taken over at https://github.com/assetic-php/assetic under the package name

assetic/framework
.

Example

$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();

Assets

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

Filters can be applied to manipulate assets.

$css = new AssetCollection(array(
    new FileAsset('/path/to/src/styles.less', array(new LessFilter())),
    new GlobAsset('/path/to/css/*'),
), array(
    new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'),
));

// this will echo CSS compiled by LESS and compressed by YUI echo $css->dump();

The filters applied to the collection will cascade to each asset leaf if you iterate over it.

dump();
}

The core provides the following filters in the

Assetic\Filter
namespace:
  • AutoprefixerFilter
    : Parse and update vendor-specific properties using autoprefixer
  • CoffeeScriptFilter
    : compiles CoffeeScript into Javascript
  • CompassFilter
    : Compass CSS authoring framework
  • CssEmbedFilter
    : embeds image data in your stylesheets
  • CssImportFilter
    : inlines imported stylesheets
  • CssMinFilter
    : minifies CSS
  • CleanCssFilter
    : minifies CSS
  • CssRewriteFilter
    : fixes relative URLs in CSS assets when moving to a new URL
  • DartFilter
    : compiles Javascript using dart2js
  • EmberPrecompileFilter
    : precompiles Handlebars templates into Javascript for use in the Ember.js framework
  • GoogleClosure\CompilerApiFilter
    : compiles Javascript using the Google Closure Compiler API
  • GoogleClosure\CompilerJarFilter
    : compiles Javascript using the Google Closure Compiler JAR
  • GssFilter
    : compliles CSS using the Google Closure Stylesheets Compiler
  • HandlebarsFilter
    : compiles Handlebars templates into Javascript
  • JpegoptimFilter
    : optimize your JPEGs
  • JpegtranFilter
    : optimize your JPEGs
  • JSMinFilter
    : minifies Javascript
  • JSMinPlusFilter
    : minifies Javascript
  • JSqueezeFilter
    : compresses Javascript
  • LessFilter
    : parses LESS into CSS (using less.js with node.js)
  • LessphpFilter
    : parses LESS into CSS (using lessphp)
  • OptiPngFilter
    : optimize your PNGs
  • PackagerFilter
    : parses Javascript for packager tags
  • PackerFilter
    : compresses Javascript using Dean Edwards's Packer
  • PhpCssEmbedFilter
    : embeds image data in your stylesheet
  • PngoutFilter
    : optimize your PNGs
  • ReactJsxFilter
    : compiles React JSX into JavaScript
  • Sass\SassFilter
    : parses SASS into CSS
  • Sass\ScssFilter
    : parses SCSS into CSS
  • SassphpFilter
    : parses Sass into CSS using the sassphp bindings for Libsass
  • ScssphpFilter
    : parses SCSS using scssphp
  • SeparatorFilter
    : inserts a separator between assets to prevent merge failures
  • SprocketsFilter
    : Sprockets Javascript dependency management
  • StylusFilter
    : parses STYL into CSS
  • TypeScriptFilter
    : parses TypeScript into Javascript
  • UglifyCssFilter
    : minifies CSS
  • UglifyJs2Filter
    : minifies Javascript
  • UglifyJsFilter
    : minifies Javascript
  • Yui\CssCompressorFilter
    : compresses CSS using the YUI compressor
  • Yui\JsCompressorFilter
    : compresses Javascript using the YUI compressor

Asset Manager

An asset manager is provided for organizing assets.

$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.

$am->set('my_plugin', new AssetCollection(array(
    new AssetReference($am, 'jquery'),
    new FileAsset('/path/to/jquery.plugin.js'),
)));

Filter Manager

A filter manager is also provided for organizing filters.

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

Asset Factory

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.

$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 '?yui_css', // 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

yui_css
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.

Dumping Assets to static files

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.

$writer = new AssetWriter('/path/to/web');
$writer->writeManagerAssets($am);

This will make use of the assets' target path.

Cache Busting

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.

$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();

Internal caching

A simple caching mechanism is provided to avoid unnecessary work.

$yui = new Yui\JsCompressorFilter('/path/to/yuicompressor.jar');
$js = new AssetCache(
    new FileAsset('/path/to/some.js', array($yui)),
    new FilesystemCache('/path/to/cache')
);

// the YUI compressor will only run on the first call $js->dump(); $js->dump(); $js->dump();

Twig

To use the Assetic Twig extension you must register it to your Twig environment:

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' %}
    
{% 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.

$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).

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.