Your SlideShare is downloading. ×
0
Assetic
Ismael Ambrosi 28 de Mayo, 2014
¿Quién Soy?
Ismael Ambrosi
@iambrosi
Frontend Developer en VividCortex
(Fanático de PHP)
¿Qué es Assetic?
https://github.com/kriswallsmith/assetic/blob/master/README.md#assetic
“Assetic is an asset management
framework for PHP.”
Creado por Kris Wallsmith
@kriswallsmith
https://github.com/kriswallsmith/assetic
Inspirado en Python webassets
http://elsdoerfer.name/docs/webassets/
Con Assetic puedo…
•Combinar archivos
Con Assetic puedo…
•Combinar archivos
•Aplicar filtros
Con Assetic puedo…
•Combinar archivos
•Aplicar filtros
•Generar archivos estáticos
Con Assetic puedo…
Cómo …?
Cómo …?
composer require “kriswallsmith/assetic:~1.1”
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
!
$js = new AssetCollection(array(
...
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
!
$js = new AssetCollection(array(
...
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
!
$js = new AssetCollection(array(
...
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
!
$js = new AssetCollection(array(
...
Ejemplo
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
!
$js = new AssetCollection...
FileAsset
Carga el asset desde un archivo
GlobAsset
Carga el/los assets desde un pattern
HttpAsset
Carga el asset desde un...
Filtros …?
Filtros …?
“Los filtros permiten manipular los assets”
https://github.com/kriswallsmith/assetic#filters
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
use AsseticFilterLessFilter;
use As...
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
use AsseticFilterLessFilter;
use As...
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
use AsseticFilterLessFilter;
use As...
Filtros …?
use AsseticAssetAssetCollection;
use AsseticAssetFileAsset;
use AsseticAssetGlobAsset;
use AsseticFilterLessFil...
Tip
use AsseticAssetAssetCollection;
!
$css = new AssetCollection(array(
# ...
));
!
foreach ($css as $leaf) {
# Imprime e...
CoffeeScriptFilter
LessFilter
LessphpFilter
SassSassFilter
SassScssFilter
UglifyJs2Filter
YuiCssCompressorFilter
YuiJsComp...
Archivos estáticos …?
https://github.com/kriswallsmith/assetic#filters
Archivos estáticos …?
use AsseticAssetAssetCollection;
use AsseticAssetWri...
AssetManager
AssetManager
Me permite organizar mis assets
AssetManager
https://github.com/kriswallsmith/assetic#asset-manager
use AsseticAssetManager;
use AsseticAssetFileAsset;
us...
AssetManager
$am->get('jquery')->dump();
https://github.com/kriswallsmith/assetic#asset-manager
FilterManager
FilterManager
Me permite organizar mis filtros
FilterManager
https://github.com/kriswallsmith/assetic#filter-manager
use AsseticFilterManager;
use AsseticFilterSassSassFi...
FilterManager
https://github.com/kriswallsmith/assetic#filter-manager
$fm->get('yui_css');
¿Y que puedo hacer
con estos managers?
¡Mucho!
Ejemplo
<script src="/assets?name=login-scripts"></script>
!
<link href="/assets?name=login-styles" type="text/css" rel="s...
Ejemplo fancy :)
<script src="/assets/login-scripts"></script>
!
<link href="/assets/login-styles" type="text/css" rel="st...
Archivos estáticos …?
https://github.com/kriswallsmith/assetic#dumping-assets-to-static-files
use AsseticAssetManager;
use ...
AssetFactory
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
Simplifica la creación de assets y
el uso de los filtros.
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use AsseticFactoryAssetFactory;
!
$factory = new Asset...
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use AsseticFactoryAssetFactory;
!
$factory = new Asset...
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use AsseticFactoryAssetFactory;
!
$factory = new Asset...
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use AsseticFactoryAssetFactory;
!
$factory = new Asset...
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use AsseticFactoryAssetFactory;
!
$factory = new Asset...
use AsseticFactoryAssetFactory;
!
$factory = new AssetFactory('/path/to/asset/directory/');
$factory->setAssetManager($am)...
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use AsseticFactoryAssetFactory;
!
$factory = new Asset...
Symfony
Incluido por defecto en la versión standard
Zend Framework 2
https://github.com/widmogrod/zf2-assetic-module/
Lara...
Twig
$twig->addExtension(new AsseticExtension($factory));
{% stylesheets ‘/path/to/less/*' filter='less'%}
<link href="{{ ...
Links
https://github.com/kriswallsmith/assetic
https://packagist.org/packages/kriswallsmith/assetic
¿Preguntas?
¡Gracias!
Upcoming SlideShare
Loading in...5
×

Assetic PHPmvd

326

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

No notes for slide

Transcript of "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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×