Assetic PHPmvd
Upcoming SlideShare
Loading in...5
×
 

Assetic PHPmvd

on

  • 186 views

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

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

Statistics

Views

Total Views
186
Views on SlideShare
178
Embed Views
8

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 8

https://twitter.com 7
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Assetic PHPmvd Assetic PHPmvd Presentation Transcript

  • 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( # 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 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
  • 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
  • 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
  • Ejemplo use AsseticAssetAssetCollection; use AsseticAssetFileAsset; use AsseticAssetGlobAsset; ! $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 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
  • 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
  • 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
  • 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
  • Tip use AsseticAssetAssetCollection; ! $css = new AssetCollection(array( # ... )); ! foreach ($css as $leaf) { # Imprime el asset comprimido por YUI echo $leaf->dump(); }
  • CoffeeScriptFilter LessFilter LessphpFilter SassSassFilter SassScssFilter UglifyJs2Filter YuiCssCompressorFilter YuiJsCompressorFilter JpegoptimFilter OptiPngFilter Algunos de los filtros que podemos utilizar
  • Archivos estáticos …?
  • 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);
  • AssetManager
  • AssetManager Me permite organizar mis assets
  • 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'), )));
  • 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 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') );
  • 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 AsseticAssetManager; use AsseticAssetWriter; ! $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 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 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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!