Your SlideShare is downloading. ×
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Assetic PHPmvd
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Assetic PHPmvd

311

Published on

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

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
311
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Assetic Ismael Ambrosi 28 de Mayo, 2014
  • 2. ¿Quién Soy? Ismael Ambrosi @iambrosi Frontend Developer en VividCortex (Fanático de PHP)
  • 3. ¿Qué es Assetic?
  • 4. https://github.com/kriswallsmith/assetic/blob/master/README.md#assetic “Assetic is an asset management framework for PHP.”
  • 5. Creado por Kris Wallsmith @kriswallsmith https://github.com/kriswallsmith/assetic
  • 6. Inspirado en Python webassets http://elsdoerfer.name/docs/webassets/
  • 7. Con Assetic puedo…
  • 8. •Combinar archivos Con Assetic puedo…
  • 9. •Combinar archivos •Aplicar filtros Con Assetic puedo…
  • 10. •Combinar archivos •Aplicar filtros •Generar archivos estáticos Con Assetic puedo…
  • 11. Cómo …?
  • 12. Cómo …? composer require “kriswallsmith/assetic:~1.1”
  • 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. 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. 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. 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. Ejemplo use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; ! $js = new AssetCollection(array( new FileAsset('vendor/jquery.js'), new GlobAsset('src/js/*'), )); ! echo $js->dump();
  • 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. Filtros …?
  • 20. Filtros …? “Los filtros permiten manipular los assets” https://github.com/kriswallsmith/assetic#filters
  • 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. 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. 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. 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. Tip use AsseticAssetAssetCollection; ! $css = new AssetCollection(array( # ... )); ! foreach ($css as $leaf) { # Imprime el asset comprimido por YUI echo $leaf->dump(); }
  • 26. CoffeeScriptFilter LessFilter LessphpFilter SassSassFilter SassScssFilter UglifyJs2Filter YuiCssCompressorFilter YuiJsCompressorFilter JpegoptimFilter OptiPngFilter Algunos de los filtros que podemos utilizar
  • 27. Archivos estáticos …?
  • 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. AssetManager
  • 30. AssetManager Me permite organizar mis assets
  • 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. AssetManager $am->get('jquery')->dump(); https://github.com/kriswallsmith/assetic#asset-manager
  • 33. FilterManager
  • 34. FilterManager Me permite organizar mis filtros
  • 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. FilterManager https://github.com/kriswallsmith/assetic#filter-manager $fm->get('yui_css');
  • 37. ¿Y que puedo hacer con estos managers?
  • 38. ¡Mucho!
  • 39. Ejemplo <script src="/assets?name=login-scripts"></script> ! <link href="/assets?name=login-styles" type="text/css" rel="stylesheet" />
  • 40. Ejemplo fancy :) <script src="/assets/login-scripts"></script> ! <link href="/assets/login-styles" type="text/css" rel="stylesheet" />
  • 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. AssetFactory
  • 43. AssetFactory https://github.com/kriswallsmith/assetic#asset-factory Simplifica la creación de assets y el uso de los filtros.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Links https://github.com/kriswallsmith/assetic https://packagist.org/packages/kriswallsmith/assetic
  • 54. ¿Preguntas?
  • 55. ¡Gracias!

×