Embed Size (px)
DESCRIPTION
Charla sobre Assetic presentada en la Meetup de PHP en Mayo 2014
Citation preview
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 webassetshttp://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 Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; !$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--
use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; !$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
use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; !$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
use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; !$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
Ejemplo
use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; !$js = new AssetCollection(array( new FileAsset('vendor/jquery.js'), new GlobAsset('src/js/*'), )); !echo $js->dump();
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
Filtros …?
Filtros …?
“Los filtros permiten manipular los assets”
https://github.com/kriswallsmith/assetic#filters
use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; use Assetic\Filter\LessFilter; use Assetic\Filter\Yui; !$css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new Yui\CssCompressorFilter('/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
use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; use Assetic\Filter\LessFilter; use Assetic\Filter\Yui; !$css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new Yui\CssCompressorFilter('/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
use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; use Assetic\Filter\LessFilter; use Assetic\Filter\Yui; !$css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new Yui\CssCompressorFilter('/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
Filtros …?use Assetic\Asset\AssetCollection; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; use Assetic\Filter\LessFilter; use Assetic\Filter\Yui; !$css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'), )); !# Imprime el resultado de la combinación # con la compresión de los estilos echo $css->dump();
Muestra el resultado
Tip
use Assetic\Asset\AssetCollection; !$css = new AssetCollection(array( # ... )); !foreach ($css as $leaf) { # Imprime el asset comprimido por YUI echo $leaf->dump(); }
CoffeeScriptFilter LessFilter LessphpFilter Sass\SassFilter Sass\ScssFilter
UglifyJs2Filter Yui\CssCompressorFilter Yui\JsCompressorFilter JpegoptimFilter OptiPngFilter
Algunos de los filtros que podemos utilizar
Archivos estáticos …?
https://github.com/kriswallsmith/assetic#filters
Archivos estáticos …?use Assetic\Asset\AssetCollection; use Assetic\AssetWriter; !$js = new AssetCollection(array( # ... )); !$writer = new AssetWriter('/path/to/web'); !# Genera el archivo $writer->writeAsset($js);
AssetManager
AssetManager
Me permite organizar mis assets
AssetManager
https://github.com/kriswallsmith/assetic#asset-manager
use Assetic\AssetManager; use Assetic\Asset\FileAsset; use Assetic\Asset\GlobAsset; !$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'), )));
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 Assetic\FilterManager; use Assetic\Filter\Sass\SassFilter; use Assetic\Filter\Yui; !$fm = new FilterManager(); $fm->set('sass', new SassFilter(‘/path/to/parser/sass')); !$fm->set( 'yui_css', new Yui\CssCompressorFilter(‘/path/to/yuicompressor.jar') );
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="stylesheet" />
Ejemplo fancy :)
<script src="/assets/login-scripts"></script> !<link href="/assets/login-styles" type="text/css" rel="stylesheet" />
Archivos estáticos …?
https://github.com/kriswallsmith/assetic#dumping-assets-to-static-files
use Assetic\AssetManager; use Assetic\AssetWriter; !$am = new AssetManager(); # ... !$writer = new AssetWriter('/path/to/web'); !# Genera el archivo $writer->writeManagerAssets($am);
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 Assetic\Factory\AssetFactory; !$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
https://github.com/kriswallsmith/assetic#asset-factory
use Assetic\Factory\AssetFactory; !$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
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use Assetic\Factory\AssetFactory; !$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
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use Assetic\Factory\AssetFactory; !$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
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use Assetic\Factory\AssetFactory; !$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
use Assetic\Factory\AssetFactory; !$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
AssetFactory
https://github.com/kriswallsmith/assetic#asset-factory
use Assetic\Factory\AssetFactory; !$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
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
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 %}
Links
https://github.com/kriswallsmith/assetic https://packagist.org/packages/kriswallsmith/assetic
¿Preguntas?
¡Gracias!
