Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AssetToolkit for PHP

Yo-An Lin
November 12, 2013

AssetToolkit for PHP

Managing Your Assets Easily For Component-Based Framework.

Yo-An Lin

November 12, 2013
Tweet

More Decks by Yo-An Lin

Other Decks in Programming

Transcript

  1. How do you manage your asset files? • Assetic? •

    Require.js or other AMD solutions? 4
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. And we also want it works for… 1. CoffeeScript, LiveScript

    … script filter. 2. SASS, SCSS, Less … and any other stylesheet filter. 12
  8. Define Asset Dependency in your PHP components class YourBundle {

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

    { public function assets() { return [ "jquery", "jquery-fancybox" ]; } } 01. 02. 03. 04. 05. 15
  10. Initialize your assetkit config file assetkit init --baseDir public/assets --baseUrl

    "/assets" This creates “.assetkit.php” in your application root directory. 18
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. Add the asset loader in your application loader $loader =

    new AssetToolkit\AssetLoader( $config ); $compiler = new AssetToolkit\AssetCompiler( $config, $loader); 01. 02. 25
  17. 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
  18. 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
  19. 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