AssetToolkit for PHP

Managing Your Assets Easily For Component-Based Framework.

Transcript

1. Managing asset dependency with AssetToolkit Yo-An Lin (c9s)
2. Intro • Yo-An Lin (@c9s) • PHP, Go • Twitter: @c9s • GitHub: @c9s 2
3. AssetToolkit Managing asset dependency with AssetToolkit. 3
4. How do you manage your asset files? • Assetic? • Require.js or other AMD solutions? 4
5. Using require.js requirejs(["app/foo", "app/bar", "app/zoo"], function(main) { }); 01. 02. 03. 5
6. 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
7. 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
8. 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
9. The Actual Directory structure bundles/FooBundle/Assets/... bundles/BarBundle/Assets/... bundles/ProductBundle/Assets/... bundles/WhatEverBundle/Assets/... 01. 02. 03. 04. 9
10. 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
11. 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
12. And we also want it works for… 1. CoffeeScript, LiveScript … script filter. 2. SASS, SCSS, Less … and any other stylesheet filter. 12
13. And we want to define asset dependency in our PHP components… 13
14. Define Asset Dependency in your PHP components class YourBundle { public function assets() { return [ "jquery", "bootstrap" ]; } } 01. 02. 03. 04. 05. 14
15. Define Asset Dependency in your PHP components (2) class FancyBundle { public function assets() { return [ "jquery", "jquery-fancybox" ]; } } 01. 02. 03. 04. 05. 15
16. And that is, AssetToolkit http://github.com/c9s/AssetToolkit 16
17. Install from composer { require: { "corneltek/assetoolkit": "~2.1" } } 01. 02. 03. 04. 05. 17
18. Initialize your assetkit config file assetkit init --baseDir public/assets --baseUrl "/assets" This creates “.assetkit.php” in your application root directory. 18
19. 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
20. 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
21. 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
22. This register them into a single PHP file for caching… <?php return array ( 'assets' => array ( 'backbone-js' => array ( 'manifest' => 'bundles/.../Assets/backbone-js/manife 'source_dir' => 'bundles/.../Assets/backbone-js', ), ... 01. 02. 03. 04. 05. 06. 07. 22
23. 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
24. 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
25. Add the asset loader in your application loader $loader = new AssetToolkit\AssetLoader( $config ); $compiler = new AssetToolkit\AssetCompiler( $config, $loader); 01. 02. 25
26. 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
27. 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
28. Output in development mode 28
29. Output in production mode <script type="text/javascript" src="assets/demo/d95da0fbdccc220ccb5e4949a41ec796.min.js" ></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
30. Listing Compiled Targets $ assetkit target demo: jquery, jquery-ui, underscore, test demo-page: jquery, jquery-ui 01. 02. 03. 30
31. Precompile targets from command-line $ assetkit compile --target demo-page jquery jquery-ui 31
32. Using twig tag in template to include assets assets "jquery", "jquery-ui" as "target-id" 32
33. Available Filters • CoffeeScriptFilter • CssImportFilter • CssRewriteFilter • SassFilter • ScssFilter 33
34. Available Compressor • YUI/CssCompressor • YUI/JsCompressor • CssMinCompressor • JsMinCompressor • UglifyCompressor 34
35. Thank you
36. See more on GitHub