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

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!