PageRenderTime 44ms CodeModel.GetById 17ms RepoModel.GetById 1ms app.codeStats 0ms

/vendor/kriswallsmith/assetic/README.md

https://gitlab.com/freebird/WebApp
Markdown | 344 lines | 260 code | 84 blank | 0 comment | 0 complexity | 13100f9483bafd1f20812990de3c4a44 MD5 | raw file
  1. # Assetic [![Build Status](https://travis-ci.org/kriswallsmith/assetic.png?branch=master)](https://travis-ci.org/kriswallsmith/assetic) ![project status](http://stillmaintained.com/kriswallsmith/assetic.png) #
  2. Assetic is an asset management framework for PHP.
  3. ``` php
  4. <?php
  5. use Assetic\Asset\AssetCollection;
  6. use Assetic\Asset\FileAsset;
  7. use Assetic\Asset\GlobAsset;
  8. $js = new AssetCollection(array(
  9. new GlobAsset('/path/to/js/*'),
  10. new FileAsset('/path/to/another.js'),
  11. ));
  12. // the code is merged when the asset is dumped
  13. echo $js->dump();
  14. ```
  15. Assets
  16. ------
  17. An Assetic asset is something with filterable content that can be loaded and
  18. dumped. An asset also includes metadata, some of which can be manipulated and
  19. some of which is immutable.
  20. | **Property** | **Accessor** | **Mutator** |
  21. |--------------|-----------------|---------------|
  22. | content | getContent | setContent |
  23. | mtime | getLastModified | n/a |
  24. | source root | getSourceRoot | n/a |
  25. | source path | getSourcePath | n/a |
  26. | target path | getTargetPath | setTargetPath |
  27. The "target path" property denotes where an asset (or an collection of assets) should be dumped.
  28. Filters
  29. -------
  30. Filters can be applied to manipulate assets.
  31. ``` php
  32. <?php
  33. use Assetic\Asset\AssetCollection;
  34. use Assetic\Asset\FileAsset;
  35. use Assetic\Asset\GlobAsset;
  36. use Assetic\Filter\LessFilter;
  37. use Assetic\Filter\Yui;
  38. $css = new AssetCollection(array(
  39. new FileAsset('/path/to/src/styles.less', array(new LessFilter())),
  40. new GlobAsset('/path/to/css/*'),
  41. ), array(
  42. new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'),
  43. ));
  44. // this will echo CSS compiled by LESS and compressed by YUI
  45. echo $css->dump();
  46. ```
  47. The filters applied to the collection will cascade to each asset leaf if you
  48. iterate over it.
  49. ``` php
  50. <?php
  51. foreach ($css as $leaf) {
  52. // each leaf is compressed by YUI
  53. echo $leaf->dump();
  54. }
  55. ```
  56. The core provides the following filters in the `Assetic\Filter` namespace:
  57. * `AutoprefixerFilter`: Parse and update vendor-specific properties using autoprefixer
  58. * `CoffeeScriptFilter`: compiles CoffeeScript into Javascript
  59. * `CompassFilter`: Compass CSS authoring framework
  60. * `CssEmbedFilter`: embeds image data in your stylesheets
  61. * `CssImportFilter`: inlines imported stylesheets
  62. * `CssMinFilter`: minifies CSS
  63. * `CleanCssFilter`: minifies CSS
  64. * `CssRewriteFilter`: fixes relative URLs in CSS assets when moving to a new URL
  65. * `DartFilter`: compiles Javascript using dart2js
  66. * `EmberPrecompileFilter`: precompiles Handlebars templates into Javascript for use in the Ember.js framework
  67. * `GoogleClosure\CompilerApiFilter`: compiles Javascript using the Google Closure Compiler API
  68. * `GoogleClosure\CompilerJarFilter`: compiles Javascript using the Google Closure Compiler JAR
  69. * `GssFilter`: compliles CSS using the Google Closure Stylesheets Compiler
  70. * `HandlebarsFilter`: compiles Handlebars templates into Javascript
  71. * `JpegoptimFilter`: optimize your JPEGs
  72. * `JpegtranFilter`: optimize your JPEGs
  73. * `JSMinFilter`: minifies Javascript
  74. * `JSMinPlusFilter`: minifies Javascript
  75. * `JSqueezeFilter`: compresses Javascript
  76. * `LessFilter`: parses LESS into CSS (using less.js with node.js)
  77. * `LessphpFilter`: parses LESS into CSS (using lessphp)
  78. * `OptiPngFilter`: optimize your PNGs
  79. * `PackagerFilter`: parses Javascript for packager tags
  80. * `PackerFilter`: compresses Javascript using Dean Edwards's Packer
  81. * `PhpCssEmbedFilter`: embeds image data in your stylesheet
  82. * `PngoutFilter`: optimize your PNGs
  83. * `ReactJsxFilter`: compiles React JSX into JavaScript
  84. * `Sass\SassFilter`: parses SASS into CSS
  85. * `Sass\ScssFilter`: parses SCSS into CSS
  86. * `ScssphpFilter`: parses SCSS using scssphp
  87. * `SeparatorFilter`: inserts a separator between assets to prevent merge failures
  88. * `SprocketsFilter`: Sprockets Javascript dependency management
  89. * `StylusFilter`: parses STYL into CSS
  90. * `TypeScriptFilter`: parses TypeScript into Javascript
  91. * `UglifyCssFilter`: minifies CSS
  92. * `UglifyJs2Filter`: minifies Javascript
  93. * `UglifyJsFilter`: minifies Javascript
  94. * `Yui\CssCompressorFilter`: compresses CSS using the YUI compressor
  95. * `Yui\JsCompressorFilter`: compresses Javascript using the YUI compressor
  96. Asset Manager
  97. -------------
  98. An asset manager is provided for organizing assets.
  99. ``` php
  100. <?php
  101. use Assetic\AssetManager;
  102. use Assetic\Asset\FileAsset;
  103. use Assetic\Asset\GlobAsset;
  104. $am = new AssetManager();
  105. $am->set('jquery', new FileAsset('/path/to/jquery.js'));
  106. $am->set('base_css', new GlobAsset('/path/to/css/*'));
  107. ```
  108. The asset manager can also be used to reference assets to avoid duplication.
  109. ``` php
  110. <?php
  111. use Assetic\Asset\AssetCollection;
  112. use Assetic\Asset\AssetReference;
  113. use Assetic\Asset\FileAsset;
  114. $am->set('my_plugin', new AssetCollection(array(
  115. new AssetReference($am, 'jquery'),
  116. new FileAsset('/path/to/jquery.plugin.js'),
  117. )));
  118. ```
  119. Filter Manager
  120. --------------
  121. A filter manager is also provided for organizing filters.
  122. ``` php
  123. <?php
  124. use Assetic\FilterManager;
  125. use Assetic\Filter\Sass\SassFilter;
  126. use Assetic\Filter\Yui;
  127. $fm = new FilterManager();
  128. $fm->set('sass', new SassFilter('/path/to/parser/sass'));
  129. $fm->set('yui_css', new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'));
  130. ```
  131. Asset Factory
  132. -------------
  133. If you'd rather not create all these objects by hand, you can use the asset
  134. factory, which will do most of the work for you.
  135. ``` php
  136. <?php
  137. use Assetic\Factory\AssetFactory;
  138. $factory = new AssetFactory('/path/to/asset/directory/');
  139. $factory->setAssetManager($am);
  140. $factory->setFilterManager($fm);
  141. $factory->setDebug(true);
  142. $css = $factory->createAsset(array(
  143. '@reset', // load the asset manager's "reset" asset
  144. 'css/src/*.scss', // load every scss files from "/path/to/asset/directory/css/src/"
  145. ), array(
  146. 'scss', // filter through the filter manager's "scss" filter
  147. '?yui_css', // don't use this filter in debug mode
  148. ));
  149. echo $css->dump();
  150. ```
  151. The `AssetFactory` is constructed with a root directory which is used as the base directory for relative asset paths.
  152. Prefixing a filter name with a question mark, as `yui_css` is here, will cause
  153. that filter to be omitted when the factory is in debug mode.
  154. You can also register [Workers](src/Assetic/Factory/Worker/WorkerInterface.php) on the factory and all assets created
  155. by it will be passed to the worker's `process()` method before being returned. See _Cache Busting_ below for an example.
  156. Dumping Assets to static files
  157. ------------------------------
  158. You can dump all the assets an AssetManager holds to files in a directory. This will probably be below your webserver's document root
  159. so the files can be served statically.
  160. ``` php
  161. <?php
  162. use Assetic\AssetWriter;
  163. $writer = new AssetWriter('/path/to/web');
  164. $writer->writeManagerAssets($am);
  165. ```
  166. This will make use of the assets' target path.
  167. Cache Busting
  168. -------------
  169. If you serve your assets from static files as just described, you can use the CacheBustingWorker to rewrite the target
  170. paths for assets. It will insert an identifier before the filename extension that is unique for a particular version
  171. of the asset.
  172. This identifier is based on the modification time of the asset and will also take depended-on assets into
  173. consideration if the applied filters support it.
  174. ``` php
  175. <?php
  176. use Assetic\Factory\AssetFactory;
  177. use Assetic\Factory\Worker\CacheBustingWorker;
  178. $factory = new AssetFactory('/path/to/asset/directory/');
  179. $factory->setAssetManager($am);
  180. $factory->setFilterManager($fm);
  181. $factory->setDebug(true);
  182. $factory->addWorker(new CacheBustingWorker());
  183. $css = $factory->createAsset(array(
  184. '@reset', // load the asset manager's "reset" asset
  185. 'css/src/*.scss', // load every scss files from "/path/to/asset/directory/css/src/"
  186. ), array(
  187. 'scss', // filter through the filter manager's "scss" filter
  188. '?yui_css', // don't use this filter in debug mode
  189. ));
  190. echo $css->dump();
  191. ```
  192. Internal caching
  193. -------
  194. A simple caching mechanism is provided to avoid unnecessary work.
  195. ``` php
  196. <?php
  197. use Assetic\Asset\AssetCache;
  198. use Assetic\Asset\FileAsset;
  199. use Assetic\Cache\FilesystemCache;
  200. use Assetic\Filter\Yui;
  201. $yui = new Yui\JsCompressorFilter('/path/to/yuicompressor.jar');
  202. $js = new AssetCache(
  203. new FileAsset('/path/to/some.js', array($yui)),
  204. new FilesystemCache('/path/to/cache')
  205. );
  206. // the YUI compressor will only run on the first call
  207. $js->dump();
  208. $js->dump();
  209. $js->dump();
  210. ```
  211. Twig
  212. ----
  213. To use the Assetic [Twig][3] extension you must register it to your Twig
  214. environment:
  215. ``` php
  216. <?php
  217. $twig->addExtension(new AsseticExtension($factory));
  218. ```
  219. Once in place, the extension exposes a stylesheets and a javascripts tag with a syntax similar
  220. to what the asset factory uses:
  221. ``` html+jinja
  222. {% stylesheets '/path/to/sass/main.sass' filter='sass,?yui_css' output='css/all.css' %}
  223. <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
  224. {% endstylesheets %}
  225. ```
  226. This example will render one `link` element on the page that includes a URL
  227. where the filtered asset can be found.
  228. When the extension is in debug mode, this same tag will render multiple `link`
  229. elements, one for each asset referenced by the `css/src/*.sass` glob. The
  230. specified filters will still be applied, unless they are marked as optional
  231. using the `?` prefix.
  232. This behavior can also be triggered by setting a `debug` attribute on the tag:
  233. ``` html+jinja
  234. {% stylesheets 'css/*' debug=true %} ... {% stylesheets %}
  235. ```
  236. These assets need to be written to the web directory so these URLs don't
  237. return 404 errors.
  238. ``` php
  239. <?php
  240. use Assetic\AssetWriter;
  241. use Assetic\Extension\Twig\TwigFormulaLoader;
  242. use Assetic\Extension\Twig\TwigResource;
  243. use Assetic\Factory\LazyAssetManager;
  244. $am = new LazyAssetManager($factory);
  245. // enable loading assets from twig templates
  246. $am->setLoader('twig', new TwigFormulaLoader($twig));
  247. // loop through all your templates
  248. foreach ($templates as $template) {
  249. $resource = new TwigResource($twigLoader, $template);
  250. $am->addResource($resource, 'twig');
  251. }
  252. $writer = new AssetWriter('/path/to/web');
  253. $writer->writeManagerAssets($am);
  254. ```
  255. ---
  256. Assetic is based on the Python [webassets][1] library (available on
  257. [GitHub][2]).
  258. [1]: http://elsdoerfer.name/docs/webassets
  259. [2]: https://github.com/miracle2k/webassets
  260. [3]: http://twig.sensiolabs.org