Managing asset dependency with AssetToolkit Yo-An Lin (c9s) 

Intro • Yo-An Lin (@c9s) • PHP, Go • Twitter: @c9s • GitHub: @c9s 2 

AssetToolkit Managing asset dependency with AssetToolkit. 3 

How do you manage your asset files? • Assetic? • Require.js or other AMD solutions? 4 

Using require.js requirejs(["app/foo", "app/bar", "app/zoo"], function(main) { }); 01. 02. 03. 5 

Useful for simple application, but… • But does not work for PHP application with plugins or bundles • For PHP applications, we usually include the assets from backend. • We don’t want to modifty the require.js loader whenever we changed bundles/plugins. 6 

Application with bundles 1. FooBundle requires “foo”, “foo2”, “foo3” assets. 2. BarBundle requries “bar”, “bar2”, “bar3” assets. 3. ProductBundle requires “jquery”, “product” assets. 4. WhatEverBundle requires “jquery”, “jquery-fancybox” assets. 7 

Ideal require.js solution in your main application requirejs([ "foobundle/app", "barbundle/app", "productbundle/app", ".../app" ], function(main) { }); 01. 02. 03. 04. 05. 06. 07. 8 

The Actual Directory structure bundles/FooBundle/Assets/... bundles/BarBundle/Assets/... bundles/ProductBundle/Assets/... bundles/WhatEverBundle/Assets/... 01. 02. 03. 04. 9 

Disadvantage • What if you have more than 20 assets in different bundles? • You don’t want to modify the require.js loader everytime… • And you don’t want to expose all directory to your public directory. 10 

We need something works for PHP framework 1. Expose asset directory from bundles by symlink or auto-copy 2. Mount required assets automatically when we require new PHP component. 3. Command-line tool for pre-compiling, registering new assets. 4. Not to loss too much performance. 5. Support development/production mode. 6. Do auto-compressing when in production mode. 11 

And we also want it works for… 1. CoffeeScript, LiveScript … script filter. 2. SASS, SCSS, Less … and any other stylesheet filter. 12 

And we want to define asset dependency in our PHP components… 13 

Define Asset Dependency in your PHP components class YourBundle { public function assets() { return [ "jquery", "bootstrap" ]; } } 01. 02. 03. 04. 05. 14 

Define Asset Dependency in your PHP components (2) class FancyBundle { public function assets() { return [ "jquery", "jquery-fancybox" ]; } } 01. 02. 03. 04. 05. 15 

And that is, AssetToolkit http://github.com/c9s/AssetToolkit 16 

Install from composer { require: { "corneltek/assetoolkit": "~2.1" } } 01. 02. 03. 04. 05. 17 

Initialize your assetkit config file assetkit init --baseDir public/assets --baseUrl "/assets" This creates “.assetkit.php” in your application root directory. 18 

Define your manifest file vim bundles/CoreBundle/Assets/jquery-1.8/manifest.yml --- collections: - js: - jquery-1.8.3.js 01. 02. 03. 04. 05. 19 

Define your manifest file (2) --- collections: - cs: - app.coffee - filters: [ "css_import" ] css: - style.css - style2.css 01. 02. 03. 04. 05. 06. 07. 08. 20 

Run command-line tool to register assets assetkit add path/to/assets/jquery assetkit add path/to/another/assets/jquery-ui assetkit add path/to/bootstrap assetkit add path/to/angular 01. 02. 03. 04. 21 

This register them into a single PHP file for caching… array ( 'backbone-js' => array ( 'manifest' => 'bundles/.../Assets/backbone-js/manife 'source_dir' => 'bundles/.../Assets/backbone-js', ), ... 01. 02. 03. 04. 05. 06. 07. 22 

Install assets into your public directory: assetkit install # if you want symbol link (faster for development mode) assetkit install --link 01. 02. 03. 04. 23 

Initialize the asset config $config = new AssetToolkit\AssetConfig( APPLICATION_ROOT . '/.assetkit.php',array( 'root' => APPLICATION_ROOT, 'cache' => new UniversalCache\ApcCache(array( 'namespace 'environment' => AssetToolkit\AssetConfig::PRODUCTION, ) ); 01. 02. 03. 04. 05. 06. 07. 24 

Add the asset loader in your application loader $loader = new AssetToolkit\AssetLoader( $config ); $compiler = new AssetToolkit\AssetCompiler( $config, $loader); 01. 02. 25 

Load assets $assets = $loader->loadAssets(array( 'jquery', 'jquery-ui') ); $render = new AssetToolkit\AssetRender($config,$loader, $compile $render->renderAssets($assets,'page-id'); 01. 02. 03. 26 

Add the asset loader in your application loader (advanced) $compiler = new AssetToolkit\AssetCompiler( $config, $loader); $compiler->defaultJsCompressor = 'uglifyjs'; $compiler->defaultCssCompressor = 'cssmin'; 01. 02. 03. 27 

Output in development mode 28 

Output in production mode </scr <link rel="stylesheet" type="text/css" href="assets/demo/3fffd7e7bf5d2a459cad396bd3c375b4.min.css"/> Include content md5 checksum in path to do cache invalidation. 01. 02. 03. 04. 29 

Listing Compiled Targets $ assetkit target demo: jquery, jquery-ui, underscore, test demo-page: jquery, jquery-ui 01. 02. 03. 30 

Precompile targets from command-line $ assetkit compile --target demo-page jquery jquery-ui 31 

Using twig tag in template to include assets assets "jquery", "jquery-ui" as "target-id" 32 

Available Filters • CoffeeScriptFilter • CssImportFilter • CssRewriteFilter • SassFilter • ScssFilter 33 

Available Compressor • YUI/CssCompressor • YUI/JsCompressor • CssMinCompressor • JsMinCompressor • UglifyCompressor 34 

Thank you 

See more on GitHub