AssetToolkit for PHP

7490b4e3e9cb85a1f7dc0c8ea01a86e5?s=47 Yo-An Lin
November 12, 2013

AssetToolkit for PHP

Managing Your Assets Easily For Component-Based Framework.

7490b4e3e9cb85a1f7dc0c8ea01a86e5?s=128

Yo-An Lin

November 12, 2013
Tweet

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