assetic Télécharger - assetic Téléchargement du code source

assetic

assetic est un framework de gestion d'actifs pour PHP maintenu par l'équipe Winter CMS.

asseticAssetAssetCollection; use assetic AssetFileAsset; use assetic AssetGlobAsset; $js = new AssetCollection(array( new GlobAsset('/path/to/js/*'), new FileAsset('/path/to/another.js'), )); // the code is merged when the asset is dumped echo $js->dump();">

 <?php

use assetic  Asset  AssetCollection ;
use assetic  Asset  FileAsset ;
use assetic  Asset  GlobAsset ;

$ js = new AssetCollection ( array (
    new GlobAsset ( ' /path/to/js/* ' ),
    new FileAsset ( ' /path/to/another.js ' ),
));

// the code is merged when the asset is dumped
echo $ js -> dump ();

Actifs

Un assetic est un élément doté d'un contenu filtrable qui peut être chargé et vidé. Un actif comprend également des métadonnées, dont certaines peuvent être manipulées et d’autres sont immuables.

Propriété	Accesseur	Mutateur
contenu	obtenirContent	définirContenu
heure	getLastModified	n / A
racine source	getSourceRoot	n / A
chemin source	obtenirCheminSource	n / A
chemin cible	obtenirTargetPath	définirTargetPath

La propriété « chemin cible » indique l'endroit où un actif (ou un ensemble d'actifs) doit être vidé.

Filtres

Des filtres peuvent être appliqués pour manipuler les actifs.

asseticAssetAssetCollection; use assetic AssetFileAsset; use assetic AssetGlobAsset; use assetic FilterLessFilter; use assetic FilterUglifyCssFilter; $css = new AssetCollection(array( new FileAsset('/path/to/src/styles.less', array(new LessFilter())), new GlobAsset('/path/to/css/*'), ), array( new UglifyCssFilter('/path/to/uglifycss'), )); // this will echo CSS compiled by LESS and compressed by uglifycss echo $css->dump();">

 <?php

use assetic  Asset  AssetCollection ;
use assetic  Asset  FileAsset ;
use assetic  Asset  GlobAsset ;
use assetic  Filter  LessFilter ;
use assetic  Filter  UglifyCssFilter ;

$ css = new AssetCollection ( array (
    new FileAsset ( ' /path/to/src/styles.less ' , array ( new LessFilter ())),
    new GlobAsset ( ' /path/to/css/* ' ),
), array (
    new UglifyCssFilter ( ' /path/to/uglifycss ' ),
));

// this will echo CSS compiled by LESS and compressed by uglifycss
echo $ css -> dump ();

Les filtres appliqués à la collection seront appliqués en cascade à chaque feuille d'actif si vous parcourez celle-ci.

 <?php

foreach ( $ css as $ leaf ) {
    // each leaf is compressed by uglifycss
    echo $ leaf -> dump ();
}

Le noyau fournit les filtres suivants dans l'espace de noms assetic Filter :

CoffeeScriptFilter : compile CoffeeScript en Javascript
CssImportFilter : feuilles de style importées en ligne
CSSMinFilter : minimise le CSS
CssRewriteFilter : corrige les URL relatives dans les ressources CSS lors du déplacement vers une nouvelle URL
GoogleClosureCompilerApiFilter : compile Javascript à l'aide de l'API Google Closure Compiler
HandlebarsFilter : compile les modèles de guidons en Javascript
JavaScriptMinifierFilter : réduit Javascript
JpegoptimFilter : optimisez vos JPEG
JpegtranFilter : optimisez vos JPEG
LessFilter : analyse LESS en CSS (en utilisant less.js avec node.js)
LessphpFilter : analyse LESS en CSS (en utilisant lessphp)
OptiPngFilter : optimisez vos PNG
PackerFilter : compresse Javascript à l'aide du Packer de Dean Edwards
PhpCssEmbedFilter : intègre les données d'image dans votre feuille de style
ReactJsxFilter : compile React JSX en JavaScript
ScssphpFilter : analyse SCSS en CSS
SeparatorFilter : insère un séparateur entre les actifs pour éviter les échecs de fusion
StylesheetMinifyFilter : compresse les fichiers CSS des feuilles de style
StylusFilter : analyse STYL en CSS
TailwindCssFilter : crée une feuille de style CSS Tailwind à l'aide de l'utilitaire CLI autonome Tailwind CSS
TypeScriptFilter : analyse TypeScript en Javascript
UglifyCssFilter : minimise le CSS
UglifyJs2Filter : minimise Javascript
UglifyJs3Filter : minimise Javascript

Gestionnaire d'actifs

Un gestionnaire d'actifs est prévu pour organiser les actifs.

asseticAssetManager; use assetic AssetFileAsset; use assetic AssetGlobAsset; $am = new AssetManager(); $am->set('jquery', new FileAsset('/path/to/jquery.js')); $am->set('base_css', new GlobAsset('/path/to/css/*'));">

 <?php

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/* ' ));

Le gestionnaire d'actifs peut également être utilisé pour référencer des actifs afin d'éviter la duplication.

asseticAssetAssetCollection; use assetic AssetAssetReference; use assetic AssetFileAsset; $am->set('my_plugin', new AssetCollection(array( new AssetReference($am, 'jquery'), new FileAsset('/path/to/jquery.plugin.js'), )));">

 <?php

use assetic  Asset  AssetCollection ;
use assetic  Asset  AssetReference ;
use assetic  Asset  FileAsset ;

$ am -> set ( ' my_plugin ' , new AssetCollection ( array (
    new AssetReference ( $ am , ' jquery ' ),
    new FileAsset ( ' /path/to/jquery.plugin.js ' ),
)));

Gestionnaire de filtres

Un gestionnaire de filtres est également fourni pour organiser les filtres.

asseticFilterManager; use assetic FilterScssFilter; use assetic FilterCssMinFilter; $fm = new FilterManager(); $fm->set('sass', new ScssFilter('/path/to/parser/scss')); $fm->set('cssmin', new CssMinFilter());">

 <?php

use assetic  FilterManager ;
use assetic  Filter  ScssFilter ;
use assetic  Filter  CssMinFilter ;

$ fm = new FilterManager ();
$ fm -> set ( ' sass ' , new ScssFilter ( ' /path/to/parser/scss ' ));
$ fm -> set ( ' cssmin ' , new CssMinFilter ());

Usine d'actifs

Si vous préférez ne pas créer tous ces objets à la main, vous pouvez utiliser l'asset factory, qui fera l'essentiel du travail à votre place.

asseticFactoryAssetFactory; $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); $factory->setDebug(true); $css = $factory->createAsset(array( '@reset', // load the asset manager's "reset" asset 'css/src/*.scss', // load every scss files from "/path/to/asset/directory/css/src/" ), array( 'scss', // filter through the filter manager's "scss" filter '?cssmin', // don't use this filter in debug mode )); echo $css->dump();">

 <?php

use assetic  Factory  AssetFactory ;

$ factory = new AssetFactory ( ' /path/to/asset/directory/ ' );
$ factory -> setAssetManager ( $ am );
$ factory -> setFilterManager ( $ fm );
$ factory -> setDebug ( true );

$ css = $ factory -> createAsset ( array (
    ' @reset ' ,         // load the asset manager's "reset" asset
    ' css/src/*.scss ' , // load every scss files from "/path/to/asset/directory/css/src/"
), array (
    ' scss ' ,           // filter through the filter manager's "scss" filter
    ' ?cssmin ' ,        // don't use this filter in debug mode
));

echo $ css -> dump ();

AssetFactory est construit avec un répertoire racine qui est utilisé comme répertoire de base pour les chemins relatifs des actifs.

Préfixer un nom de filtre avec un point d'interrogation, comme cssmin ici, entraînera l'omission de ce filtre lorsque l'usine est en mode débogage.

Vous pouvez également enregistrer des travailleurs sur l'usine et tous les actifs créés par celle-ci seront transmis à la méthode process() du travailleur avant d'être renvoyés. Voir Cache Busting ci-dessous pour un exemple.

Vidage des actifs vers des fichiers statiques

Vous pouvez transférer tous les actifs détenus par AssetManager dans des fichiers d'un répertoire. Ce sera probablement en dessous de la racine du document de votre serveur Web afin que les fichiers puissent être servis de manière statique.

asseticAssetWriter; $writer = new AssetWriter('/path/to/web'); $writer->writeManagerAssets($am);">

 <?php

use assetic  AssetWriter ;

$ writer = new AssetWriter ( ' /path/to/web ' );
$ writer -> writeManagerAssets ( $ am );

Cela utilisera le chemin cible des actifs.

Contournement du cache

Si vous diffusez vos actifs à partir de fichiers statiques comme décrit ci-dessus, vous pouvez utiliser CacheBustingWorker pour réécrire les chemins cibles des actifs. Il insérera un identifiant avant l'extension du nom de fichier qui est unique pour une version particulière de l'actif.

Cet identifiant est basé sur l'heure de modification de l'actif et prendra également en compte les actifs dépendants si les filtres appliqués le prennent en charge.

asseticFactoryAssetFactory; use assetic FactoryWorkerCacheBustingWorker; $factory = new AssetFactory('/path/to/asset/directory/'); $factory->setAssetManager($am); $factory->setFilterManager($fm); $factory->setDebug(true); $factory->addWorker(new CacheBustingWorker()); $css = $factory->createAsset(array( '@reset', // load the asset manager's "reset" asset 'css/src/*.scss', // load every scss files from "/path/to/asset/directory/css/src/" ), array( 'scss', // filter through the filter manager's "scss" filter '?yui_css', // don't use this filter in debug mode )); echo $css->dump();">

 <?php

use assetic  Factory  AssetFactory ;
use assetic  Factory  Worker  CacheBustingWorker ;

$ factory = new AssetFactory ( ' /path/to/asset/directory/ ' );
$ factory -> setAssetManager ( $ am );
$ factory -> setFilterManager ( $ fm );
$ factory -> setDebug ( true );
$ factory -> addWorker ( new CacheBustingWorker ());

$ css = $ factory -> createAsset ( array (
    ' @reset ' ,         // load the asset manager's "reset" asset
    ' css/src/*.scss ' , // load every scss files from "/path/to/asset/directory/css/src/"
), array (
    ' scss ' ,           // filter through the filter manager's "scss" filter
    ' ?yui_css ' ,       // don't use this filter in debug mode
));

echo $ css -> dump ();

Mise en cache interne

Un mécanisme de mise en cache simple est fourni pour éviter tout travail inutile.

asseticAssetAssetCache; use assetic AssetFileAsset; use assetic CacheFilesystemCache; use assetic FilterJavaScriptMinifierFilter; $jsMinifier = new JavaScriptMinifierFilter(); $js = new AssetCache( new FileAsset('/path/to/some.js', array($jsMinifier)), new FilesystemCache('/path/to/cache') ); // the JavaScriptMinifierFilter compressor will only run on the first call $js->dump(); $js->dump(); $js->dump();">

 <?php

use assetic  Asset  AssetCache ;
use assetic  Asset  FileAsset ;
use assetic  Cache  FilesystemCache ;
use assetic  Filter  JavaScriptMinifierFilter ;

$ jsMinifier = new JavaScriptMinifierFilter ();
$ js = new AssetCache (
    new FileAsset ( ' /path/to/some.js ' , array ( $ jsMinifier )),
    new FilesystemCache ( ' /path/to/cache ' )
);

// the JavaScriptMinifierFilter compressor will only run on the first call
$ js -> dump ();
$ js -> dump ();
$ js -> dump ();

Brindille

Pour utiliser l'extension assetic Twig, vous devez l'enregistrer dans votre environnement Twig :

 <?php

$ twig -> addExtension ( new assetic Extension ( $ factory ));

Une fois en place, l'extension expose une feuille de style et une balise javascripts avec une syntaxe similaire à celle utilisée par l'asset factory :

 {% stylesheets '/path/to/sass/main.sass' filter = 'sass,?yui_css' output = 'css/all.css' %}
    < link href = " {{ asset_url }} " type = " text/css " rel = " stylesheet " />
{% endstylesheets %}

Cet exemple affichera un élément link sur la page qui inclut une URL où l'élément filtré peut être trouvé.

Lorsque l'extension est en mode débogage, cette même balise affichera plusieurs éléments link , un pour chaque actif référencé par le glob css/src/*.sass . Les filtres spécifiés seront toujours appliqués, à moins qu'ils ne soient marqués comme facultatifs à l'aide du ? préfixe.

Ce comportement peut également être déclenché en définissant un attribut debug sur la balise :

 {% stylesheets 'css/*' debug = true %} ... {% stylesheets %}

Ces ressources doivent être écrites dans le répertoire Web afin que ces URL ne renvoient pas d'erreurs 404.

asseticAssetWriter; use assetic ExtensionTwigTwigFormulaLoader; use assetic ExtensionTwigTwigResource; use assetic FactoryLazyAssetManager; $am = new LazyAssetManager($factory); // enable loading assets from twig templates $am->setLoader('twig', new TwigFormulaLoader($twig)); // loop through all your templates foreach ($templates as $template) { $resource = new TwigResource($twigLoader, $template); $am->addResource($resource, 'twig'); } $writer = new AssetWriter('/path/to/web'); $writer->writeManagerAssets($am);">

 <?php

use assetic  AssetWriter ;
use assetic  Extension  Twig  TwigFormulaLoader ;
use assetic  Extension  Twig  TwigResource ;
use assetic  Factory  LazyAssetManager ;

$ am = new LazyAssetManager ( $ factory );

// enable loading assets from twig templates
$ am -> setLoader ( ' twig ' , new TwigFormulaLoader ( $ twig ));

// loop through all your templates
foreach ( $ templates as $ template ) {
    $ resource = new TwigResource ( $ twigLoader , $ template );
    $ am -> addResource ( $ resource , ' twig ' );
}

$ writer = new AssetWriter ( ' /path/to/web ' );
$ writer -> writeManagerAssets ( $ am );