assetic phpmvd

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!