Download as PDF, PPTX
Uploaded byKris Wallsmith
Drupal, meet Assetic
The document provides an overview of Assetic, a PHP asset management tool for handling web assets such as CSS and JavaScript. It describes the object-oriented API, its various implementations, and the numerous filters and tools available for optimizing asset delivery. Additionally, it includes code examples demonstrating how to use different asset types and manage them effectively.
More Related Content
Drupal, meet Assetic
- 1.
- 2.
- 3.
- 4. things could bebetter
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. inspired by python’swebassets http://github.com/miracle2k/webassets
- 12.
- 13.
- 14.
- 15. the team • kriswallsmith •stof • schmittjoh • everzet • 88 other contributors
- 16.
- 19.
- 21.
- 25.
- 26.
- 27.
- 28.
- 29. • path • lastmodified • content
- 30.
- 31. interface AssetInterface! {! function getContent();! functiongetSourceRoot();! function getSourcePath();! function getTargetPath();! function getLastModified();! ! // ...! }
- 32. interface AssetInterface! {! // ...! ! functionload();! function dump();! ! // ...! }
- 33.
- 34. use AsseticAssetStringAsset;! ! $a =new StringAsset('alert("hi!")');! $a->load();! echo $a->dump();
- 35. use AsseticAssetStringAsset;! ! $a =new StringAsset('alert("hi!")');! $a->load();! echo $a->dump();
- 36. use AsseticAssetStringAsset;! ! $a =new StringAsset('alert("hi!")');! ! echo $a->dump();
- 37. use AsseticAssetFileAsset;! ! $a =new FileAsset('/path/to/hi.js');! ! echo $a->dump();
- 38. use AsseticAssetHttpAsset;! ! $a =new HttpAsset('//example.com/hi.js');! ! echo $a->dump();
- 39. special implementations • AssetCollection •GlobAsset • AssetCache • AssetReference
- 40. use AsseticAssetAssetCollection;! use AsseticAssetFileAsset;! useAsseticAssetStringAsset;! ! $a = new AssetCollection(array(! new StringAsset('// (c) me'),! new FileAsset('/path/to/main.js'),! ));! ! echo $a->dump();
- 41. use AsseticAssetGlobAsset;! ! $a =new GlobAsset('/path/to/js/*.js');! ! echo $a->dump();
- 42. use AsseticAssetAssetCache;! use AsseticAssetHttpAsset;! useAsseticCacheApcCache;! ! $a = new AssetCache(! new HttpAsset(‘//example.com/hi.js'),! new ApcCache()! );! ! echo $a->dump();
- 43. use AsseticAssetAssetReference;! use AsseticAssetStringAsset;! useAsseticAssetManager;! ! $am = new AssetManager();! $am->set('hi', new StringAsset('...'));! ! $a = new AssetReference($am, 'hi');! ! echo $a->dump();
- 44.
- 46.
- 47.
- 48.
- 49. • CssEmbed • GoogleClosure • jpegoptim • jpegtran • JSMin • JSqueeze • optipng • PhpCssEmbed • pngout • UglifyCSS • UglifyJS • YUI Compressor
- 50.
- 51.
- 52. • CoffeeScript • Compass •Dart • Less • Lessphp • Packager • Roole • SASS • Scssphp • Sprockets • Stylus • TypeScript
- 54.
- 55. use AsseticAssetAssetInterface asAsset;! ! interface FilterInterface! {! function filterLoad(Asset $asset);! function filterDump(Asset $asset);! }
- 56. var myVariable var_a dumpload coffeescript javascript
- 57. load javascript • CoffeeScriptFilter •DartFilter • EmberPrecompileFilter • HandlebarsFilter • PackagerFilter • SprocketsFilter • TypeScriptFilter
- 58. load css • CompassFilter •CssImportFilter • GssFilter • LessFilter • LessphpFilter • PhpCssEmbedFilter • RooleFilter • SassSassFilter • SassScssFilter • ScssphpFilter • StylusFilter
- 59. dump javascript • GoogleCompilerApiFilter •GoogleCompilerJarFilter • JSMinFilter • JSMinPlusFilter • JSqueezeFilter • PackerFilter • UglifyJsFilter • UglifyJs2Filter • YuiJsCompressorFilter
- 60. dump css • CssEmbedFilter •CssMinFilter • CssRewriteFilter • UglifyCssFilter • YuiCssCompressorFilter
- 61. dump images • JpegoptimFilter •JpegtranFilter • OptiPngFilter • PngoutFilter
- 62. use AsseticFilterFilterInterface;! ! interface AssetInterface! {! functionensureFilter(! FilterInterface $filter);! ! // ...! }
- 63. use AsseticAssetFileAsset;! use AsseticFilterCoffeeScriptFilter;! useAsseticFilterUglifyJs2Filter;! ! $a = new FileAsset('/path/to/app.coffee');! $a->ensureFilter(new CoffeeScriptFilter());! $a->ensureFilter(new UglifyJs2Filter());! ! echo $a->dump();
- 64. use AsseticAssetFileAsset;! use AsseticFilterCoffeeScriptFilter;! useAsseticFilterUglifyJs2Filter;! ! $a = new FileAsset(! '/path/to/app.coffee',! array(! new CoffeeScriptFilter(),! new UglifyJs2Filter(),! )! );
- 65.
- 66. # /path/to/web/js/app.php! ! $a =new FileAsset('/path/to/app.coffee');! $a->ensureFilter(new CoffeeScriptFilter());! $a->ensureFilter(new UglifyJs2Filter());! ! header('Content-Type: text/javascript');! echo $a->dump();
- 67. # /path/to/web/js/app.php! ! use AsseticAssetAssetCache;! useAsseticCacheApcCache;! ! // ...! ! $a = new AssetCache($a, new ApcCache());! ! header('Content-Type: text/javascript');! echo $a->dump();
- 68.
- 69. use AsseticAssetFileAsset;! use AsseticAssetManager;! useAsseticAssetWriter;! ! $a = new FileAsset('/path/to/app.js');! $a->setTargetPath('js/app.js');! ! $am = new AssetManager();! $am->set('app_js', $a);! ! $writer = new AssetWriter('/path/to/web');! $writer->writeManagerAssets($am);
- 70.
- 71.
- 72.
- 73. <script src="<?= asset('app_js')?>"></scri
- 74.
- 75. <script src="<?=! assetic_javascripts(! array('js/app.coffee'),! array('coffee', 'uglifyjs2'),! array('output'=> 'js/app.js')! )! ?>"></script>
- 76. use AsseticFilterCoffeeScriptFilter;! use AsseticFilterManager;! ! $fm= new FilterManager();! $fm->set(! 'coffee',! new CoffeeScriptFilter()! );
- 77. use AsseticFactoryAssetFactory;! ! $factory =new AssetFactory('/www');! $factory->setFilterManager($fm);
- 78. use ...LoaderFunctionCallsFormulaLoader;! use ...ResourceDirectoryResource;! ! $ldr= new FunctionCallsFormulaLoader();! $rsc = new DirectoryResource(! '/path/to/views',! '/.php$/'! );
- 79. use AsseticFactoryLazyAssetManager;! ! $am =new LazyAssetManager($factory);! $am->setLoader('php', $ldr);! $am->addResource($rsc, 'php');
- 81.
- 82.
- 83. while (true) {! foreach($am->getNames() as $name) {! // ...! }! ! sleep(1);! }
- 84.
- 85.
- 86. use LurkerResourceWatcher;! ! $watcher =new ResourceWatcher();! $watcher->track('twig', '/path/to/views');! $watcher->addListener('twig', function($e) {! // ...! });! ! $watcher->start();
- 87.
- 88.
- 89. foreach ($am->getNames() as$name) {! $asset = $am->get($name);! // ...! ! if ($match) {! // ...! }! }
- 90.
- 91. profile.sass _colors.sass background.gif home.sass includes includes references references included by includedby referenced by referenced by
- 92.
- 93.
- 94. profile.sass _colors.sass background.gif home.sass includes includes references references included by includedby referenced by referenced by
- 95. profile.sass _colors.sass background.gif home.sass includes includes references references included by includedby referenced by referenced by
- 96. profile.sass _colors.sass background.gif home.sass includes includes references references included by includedby referenced by referenced by
- 98. use AsseticAssetHttpAsset;! ! $a =new HttpAsset('//example.com/hi.js');
- 99. • proxy • authentication •errors • ssl • mock • test • logging • profiling • curl • guzzle
- 100.
- 101.
- 103. • load • filter •reflection • optimization
- 104.
- 105.
- 106.
- 107.
- 108. • engines • javascriptoptimizer • css optimizer • jpeg optimizer • png optimizer
- 110.
- 111.
- 112. hire • workshops • architecture •audits • performance • symfony • phpunit • twig • doctrine
- 113.
- 114.