Assetic PHPmvd

687 views

Published on

Charla sobre Assetic presentada en la Meetup de PHP en Mayo 2014

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
687
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Assetic PHPmvd

  1. 1. Assetic Ismael Ambrosi 28 de Mayo, 2014
  2. 2. ¿Quién Soy? Ismael Ambrosi @iambrosi Frontend Developer en VividCortex (Fanático de PHP)
  3. 3. ¿Qué es Assetic?
  4. 4. https://github.com/kriswallsmith/assetic/blob/master/README.md#assetic “Assetic is an asset management framework for PHP.”
  5. 5. Creado por Kris Wallsmith @kriswallsmith https://github.com/kriswallsmith/assetic
  6. 6. Inspirado en Python webassets http://elsdoerfer.name/docs/webassets/
  7. 7. Con Assetic puedo…
  8. 8. •Combinar archivos Con Assetic puedo…
  9. 9. •Combinar archivos •Aplicar filtros Con Assetic puedo…
  10. 10. •Combinar archivos •Aplicar filtros •Generar archivos estáticos Con Assetic puedo…
  11. 11. Cómo …?
  12. 12. Cómo …? composer require “kriswallsmith/assetic:~1.1”
  13. 13. use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; ! $js = new AssetCollection(array( # Todos los archivos dentro de js/ new GlobAsset('/path/to/js/*'), ! # Un único archivo new FileAsset('/path/to/another.js'), )); ! # Imprime en pantalla el resultado de la combinación echo $js->dump(); Cómo …? https://github.com/kriswallsmith/assetic#assetic--
  14. 14. use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; ! $js = new AssetCollection(array( # Todos los archivos dentro de js/ new GlobAsset('/path/to/js/*'), ! # Un único archivo new FileAsset('/path/to/another.js'), )); ! # Imprime en pantalla el resultado de la combinación echo $js->dump(); Cómo …? Crea la colección de assets
  15. 15. use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; ! $js = new AssetCollection(array( # Todos los archivos dentro de js/ new GlobAsset('/path/to/js/*'), ! # Un único archivo new FileAsset('/path/to/another.js'), )); ! # Imprime en pantalla el resultado de la combinación echo $js->dump(); Cómo …? Con los assets a utilizar
  16. 16. use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; ! $js = new AssetCollection(array( # Todos los archivos dentro de js/ new GlobAsset('/path/to/js/*'), ! # Un único archivo new FileAsset('/path/to/another.js'), )); ! # Imprime en pantalla el resultado de la combinación echo $js->dump(); Cómo …? Muestra el resultado
  17. 17. Ejemplo use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; ! $js = new AssetCollection(array( new FileAsset('vendor/jquery.js'), new GlobAsset('src/js/*'), )); ! echo $js->dump();
  18. 18. FileAsset Carga el asset desde un archivo GlobAsset Carga el/los assets desde un pattern HttpAsset Carga el asset desde una URL StringAsset Crea un asset desde un string :) Tipos de assets
  19. 19. Filtros …?
  20. 20. Filtros …? “Los filtros permiten manipular los assets” https://github.com/kriswallsmith/assetic#filters
  21. 21. use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; use AsseticFilterLessFilter; use AsseticFilterYui; ! $css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new YuiCssCompressorFilter('/path/to/yuicompressor.jar'), )); ! # Imprime el resultado de la combinación # con la compresión de los estilos echo $css->dump(); Filtros …? https://github.com/kriswallsmith/assetic#filters
  22. 22. use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; use AsseticFilterLessFilter; use AsseticFilterYui; ! $css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new YuiCssCompressorFilter('/path/to/yuicompressor.jar'), )); ! # Imprime el resultado de la combinación # con la compresión de los estilos echo $css->dump(); Filtros …? Indica los filtros a aplicar al asset
  23. 23. use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; use AsseticFilterLessFilter; use AsseticFilterYui; ! $css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new YuiCssCompressorFilter('/path/to/yuicompressor.jar'), )); ! # Imprime el resultado de la combinación # con la compresión de los estilos echo $css->dump(); Filtros …? Indico los filtros a aplicar a la colección
  24. 24. Filtros …? use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; use AsseticFilterLessFilter; use AsseticFilterYui; ! $css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new YuiCssCompressorFilter('/path/to/yuicompressor.jar'), )); ! # Imprime el resultado de la combinación # con la compresión de los estilos echo $css->dump(); Muestra el resultado
  25. 25. Tip use AsseticAssetAssetCollection; ! $css = new AssetCollection(array( # ... )); ! foreach ($css as $leaf) { # Imprime el asset comprimido por YUI echo $leaf->dump(); }
  26. 26. CoffeeScriptFilter LessFilter LessphpFilter SassSassFilter SassScssFilter UglifyJs2Filter YuiCssCompressorFilter YuiJsCompressorFilter JpegoptimFilter OptiPngFilter Algunos de los filtros que podemos utilizar
  27. 27. Archivos estáticos …?
  28. 28. https://github.com/kriswallsmith/assetic#filters Archivos estáticos …? use AsseticAssetAssetCollection; use AsseticAssetWriter; ! $js = new AssetCollection(array( # ... )); ! $writer = new AssetWriter('/path/to/web'); ! # Genera el archivo $writer->writeAsset($js);
  29. 29. AssetManager
  30. 30. AssetManager Me permite organizar mis assets
  31. 31. AssetManager https://github.com/kriswallsmith/assetic#asset-manager use AsseticAssetManager; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; ! $am = new AssetManager(); $am->set('jquery', new FileAsset('/path/to/jquery.js')); $am->set('base_css', new GlobAsset('/path/to/css/*')); ! # Agrego una colección $am->set('my_plugin', new AssetCollection(array( new AssetReference($am, 'jquery'), new FileAsset('/path/to/jquery.plugin.js'), )));
  32. 32. AssetManager $am->get('jquery')->dump(); https://github.com/kriswallsmith/assetic#asset-manager
  33. 33. FilterManager
  34. 34. FilterManager Me permite organizar mis filtros
  35. 35. FilterManager https://github.com/kriswallsmith/assetic#filter-manager use AsseticFilterManager; use AsseticFilterSassSassFilter; use AsseticFilterYui; ! $fm = new FilterManager(); $fm->set('sass', new SassFilter(‘/path/to/parser/sass')); ! $fm->set( 'yui_css', new YuiCssCompressorFilter(‘/path/to/yuicompressor.jar') );
  36. 36. FilterManager https://github.com/kriswallsmith/assetic#filter-manager $fm->get('yui_css');
  37. 37. ¿Y que puedo hacer con estos managers?
  38. 38. ¡Mucho!
  39. 39. Ejemplo <script src="/assets?name=login-scripts"></script> ! <link href="/assets?name=login-styles" type="text/css" rel="stylesheet" />
  40. 40. Ejemplo fancy :) <script src="/assets/login-scripts"></script> ! <link href="/assets/login-styles" type="text/css" rel="stylesheet" />
  41. 41. Archivos estáticos …? https://github.com/kriswallsmith/assetic#dumping-assets-to-static-files use AsseticAssetManager; use AsseticAssetWriter; ! $am = new AssetManager(); # ... ! $writer = new AssetWriter('/path/to/web'); ! # Genera el archivo $writer->writeManagerAssets($am);
  42. 42. AssetFactory
  43. 43. AssetFactory https://github.com/kriswallsmith/assetic#asset-factory Simplifica la creación de assets y el uso de los filtros.
  44. 44. AssetFactory https://github.com/kriswallsmith/assetic#asset-factory use AsseticFactoryAssetFactory; ! $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); ! $css = $factory->createAsset(array( # Carga el asset “reset” desde el asset manager '@reset', 'css/src/*.scss', ), array( 'scss', ! # No utiliza el filtro en modo debug '?yui_css', )); ! echo $css->dump();
  45. 45. AssetFactory https://github.com/kriswallsmith/assetic#asset-factory use AsseticFactoryAssetFactory; ! $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); ! $css = $factory->createAsset(array( # Carga el asset “reset” desde el asset manager '@reset', 'css/src/*.scss', ), array( 'scss', ! # No utiliza el filtro en modo debug '?yui_css', )); ! echo $css->dump(); Se instancia con un directorio base
  46. 46. AssetFactory https://github.com/kriswallsmith/assetic#asset-factory use AsseticFactoryAssetFactory; ! $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); ! $css = $factory->createAsset(array( # Carga el asset “reset” desde el asset manager '@reset', 'css/src/*.scss', ), array( 'scss', ! # No utiliza el filtro en modo debug '?yui_css', )); ! echo $css->dump(); Configura los managers
  47. 47. AssetFactory https://github.com/kriswallsmith/assetic#asset-factory use AsseticFactoryAssetFactory; ! $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); ! $css = $factory->createAsset(array( # Carga el asset “reset” desde el asset manager '@reset', 'css/src/*.scss', ), array( 'scss', ! # No utiliza el filtro en modo debug '?yui_css', )); ! echo $css->dump(); Assets
  48. 48. AssetFactory https://github.com/kriswallsmith/assetic#asset-factory use AsseticFactoryAssetFactory; ! $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); ! $css = $factory->createAsset(array( # Carga el asset “reset” desde el asset manager '@reset', 'css/src/*.scss', ), array( 'scss', ! # No utiliza el filtro en modo debug '?yui_css', )); ! echo $css->dump(); Filtros
  49. 49. use AsseticFactoryAssetFactory; ! $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); ! $css = $factory->createAsset(array( # Carga el asset “reset” desde el asset manager '@reset', 'css/src/*.scss', ), array( 'scss', ! # No utiliza el filtro en modo debug '?yui_css', )); ! echo $css->dump(); AssetFactory http://www.thumbresources.org/wp-content/uploads/2012/10/thumb-resources.jpg
  50. 50. AssetFactory https://github.com/kriswallsmith/assetic#asset-factory use AsseticFactoryAssetFactory; ! $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); ! $css = $factory->createAsset(array( # Carga el asset “reset” desde el asset manager '@reset', 'css/src/*.scss', ), array( 'scss', ! # No utiliza el filtro en modo debug '?yui_css', )); ! echo $css->dump(); Muestra el resultado
  51. 51. Symfony Incluido por defecto en la versión standard Zend Framework 2 https://github.com/widmogrod/zf2-assetic-module/ Laravel https://github.com/barryvdh/laravel-assetic https://github.com/slushie/laravel-assetic Integración con Frameworks
  52. 52. Twig $twig->addExtension(new AsseticExtension($factory)); {% stylesheets ‘/path/to/less/*' filter='less'%} <link href="{{ asset_url }}" type="text/css" rel="stylesheet" /> {% endstylesheets %} ! {% javascripts '/path/to/js/*' %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %}
  53. 53. Links https://github.com/kriswallsmith/assetic https://packagist.org/packages/kriswallsmith/assetic
  54. 54. ¿Preguntas?
  55. 55. ¡Gracias!

×