assetic هو إطار عمل لإدارة أصول PHP ويديره فريق Winter CMS.
<?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 ();
الأصل assetic هو شيء يحتوي على محتوى قابل للتصفية ويمكن تحميله وتفريغه. يتضمن الأصل أيضًا بيانات وصفية، بعضها يمكن التلاعب به والبعض الآخر غير قابل للتغيير.
ملكية | ملحق | موتور |
---|---|---|
محتوى | getContent | setContent |
com.mtime | getLastModified | غير متوفر |
جذر المصدر | getSourceRoot | غير متوفر |
مسار المصدر | getSourcePath | غير متوفر |
مسار الهدف | getTargetPath | setTargetPath |
تشير الخاصية "المسار المستهدف" إلى المكان الذي يجب أن يتم فيه تفريغ الأصل (أو مجموعة الأصول).
يمكن تطبيق المرشحات لمعالجة الأصول.
<?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 ();
سوف تتوالى عوامل التصفية المطبقة على المجموعة إلى كل ورقة أصل إذا قمت بالتكرار عليها.
<?php
foreach ( $ css as $ leaf ) {
// each leaf is compressed by uglifycss
echo $ leaf -> dump ();
}
يوفر المركز عوامل التصفية التالية في مساحة الاسم assetic Filter
:
CoffeeScriptFilter
: يجمع CoffeeScript في JavascriptCssImportFilter
: يُضمّن أوراق الأنماط المستوردةCSSMinFilter
: يقلل من CSSCssRewriteFilter
: يعمل على إصلاح عناوين URL النسبية في أصول CSS عند الانتقال إلى عنوان URL جديدGoogleClosureCompilerApiFilter
: يجمع جافا سكريبت باستخدام Google Closure Compiler APIHandlebarsFilter
: يجمع قوالب المقاود في JavascriptJavaScriptMinifierFilter
: لتصغير JavascriptJpegoptimFilter
: تحسين ملفات JPEG الخاصة بكJpegtranFilter
: تحسين ملفات JPEG الخاصة بكLessFilter
: يوزع LESS إلى CSS (باستخدام less.js معNode.js)LessphpFilter
: يوزع LESS إلى CSS (باستخدام lessphp)OptiPngFilter
: تحسين صور PNG الخاصة بكPackerFilter
: يضغط Javascript باستخدام Packer الخاص بـ Dean EdwardsPhpCssEmbedFilter
: يدمج بيانات الصورة في ورقة الأنماط الخاصة بكReactJsxFilter
: يجمع React JSX في JavaScriptScssphpFilter
: يقوم بتوزيع SCSS إلى CSSSeparatorFilter
: يقوم بإدراج فاصل بين الأصول لمنع فشل الدمجStylesheetMinifyFilter
: يضغط ملفات CSS الخاصة بأوراق الأنماطStylusFilter
: يوزع STYL إلى CSSTailwindCssFilter
: إنشاء ورقة أنماط Tailwind CSS باستخدام الأداة المساعدة Tailwind CSS المستقلة لواجهة سطر الأوامر (CLI)TypeScriptFilter
: يوزع TypeScript إلى JavascriptUglifyCssFilter
: يقلل من CSSUglifyJs2Filter
: لتصغير JavascriptUglifyJs3Filter
: لتصغير Javascript يتم توفير مدير الأصول لتنظيم الأصول.
<?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/* ' ));
يمكن أيضًا استخدام مدير الأصول للإشارة إلى الأصول لتجنب الازدواجية.
<?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 ' ),
)));
يتم توفير مدير التصفية أيضًا لتنظيم المرشحات.
<?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 ());
إذا كنت تفضل عدم إنشاء كل هذه الكائنات يدويًا، فيمكنك استخدام مصنع الأصول، الذي سيقوم بمعظم العمل نيابةً عنك.
<?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
باستخدام دليل جذر يُستخدم كدليل أساسي لمسارات الأصول النسبية.
سيؤدي وضع علامة استفهام على اسم الفلتر، كما هو الحال في cssmin
هنا، إلى حذف هذا الفلتر عندما يكون المصنع في وضع التصحيح.
يمكنك أيضًا تسجيل العمال في المصنع وسيتم تمرير جميع الأصول التي تم إنشاؤها بواسطتهم إلى طريقة process()
الخاصة بالعامل قبل إعادتها. راجع خرق ذاكرة التخزين المؤقت أدناه للحصول على مثال.
يمكنك تفريغ كافة الأصول التي يحتفظ بها AssetManager في الملفات الموجودة في الدليل. من المحتمل أن يكون هذا أسفل جذر مستند خادم الويب الخاص بك حتى يمكن تقديم الملفات بشكل ثابت.
<?php
use assetic AssetWriter ;
$ writer = new AssetWriter ( ' /path/to/web ' );
$ writer -> writeManagerAssets ( $ am );
سيؤدي هذا إلى الاستفادة من المسار المستهدف للأصول.
إذا كنت تخدم أصولك من ملفات ثابتة كما هو موضح للتو، فيمكنك استخدام CacheBustingWorker لإعادة كتابة المسارات المستهدفة للأصول. سيتم إدراج معرف قبل ملحق اسم الملف الذي يكون فريدًا لإصدار معين من الأصل.
يعتمد هذا المعرف على وقت تعديل الأصل وسيأخذ أيضًا الأصول المعتمدة في الاعتبار إذا كانت عوامل التصفية المطبقة تدعمه.
<?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 ();
يتم توفير آلية تخزين مؤقت بسيطة لتجنب العمل غير الضروري.
<?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 ();
لاستخدام ملحق Twig assetic ، يجب عليك تسجيله في بيئة Twig الخاصة بك:
<?php
$ twig -> addExtension ( new assetic Extension ( $ 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 %}
سيعرض هذا المثال عنصر link
واحدًا في الصفحة يتضمن عنوان URL حيث يمكن العثور على الأصل الذي تمت تصفيته.
عندما يكون الامتداد في وضع التصحيح، ستعرض هذه العلامة نفسها عناصر link
متعددة، واحد لكل أصل مشار إليه بواسطة الكرة الأرضية css/src/*.sass
. ستظل المرشحات المحددة مطبقة، ما لم يتم وضع علامة عليها كاختيارية باستخدام الزر ?
بادئة.
يمكن أيضًا تشغيل هذا السلوك عن طريق تعيين سمة debug
على العلامة:
{% stylesheets 'css/*' debug = true %} ... {% stylesheets %}
يجب كتابة هذه الأصول في دليل الويب حتى لا تعرض عناوين URL هذه أخطاء 404.
<?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 );
assetic يعتمد على مكتبة Python webassets (المتوفرة على GitHub).