abeliani/asset-manager

快速简单的管理资源包

v0.4.7 2024-06-16 22:02 UTC

This package is auto-updated.

Last update: 2024-09-16 22:39:56 UTC


README

帮助您管理资源,最小化、优化和合并文件。该库使用两层缓存。

概述

my_site/
    ├── css/
    │   ├── styles.css
    │   ├── reset.css
    │   └── main.css
    ├── js/
    │   ├── app.js
    │   ├── utils.js
    │   └── main.js
    └──MySiteBundle.php
class MySiteBundle extends Bundle 
{
    public finction getTags(): TagInterface|\SplFixedArray|array
    {
        /* Separated files
        reurn [
            new Css('styles.css'),
            new Css('reset.css'),
            new Css('main.css'),
            // js...
        ]; */
        
         /* With attributes
        reurn [
            (new Css('styles.css')->addAttr('async'),
            (new Js('app.js'))->addAttr('media', 'print'),
            // ...
        ]; */
        
        /* Merge files
        return [
            new Css('styles.css', 'reset.css', 'main.css'),
            new Js('app.js', 'utils.js', 'main.js'),
        ]; */
        
        // With timestamp
        return [
            (new Css('styles.css', 'reset.css', 'main.css'))->withTimestamp(),
            (new Js('app.js', 'utils.js', 'main.js'))->withTimestamp(),
        ];
    }
}

默认情况下,所有样式或脚本都将被优化。如果您想进行一些最小化处理,可以使用minimize()方法

    /*
     * Let's minimize? optimize and merge all scripts and all styles to two files style.css and app.js
     */
    public finction getTags(): array
    {
        reurn [
             (new Css('styles.css', 'reset.css', 'main.css'))->minimize()->withTimestamp(),
             (new Js('app.js', 'utils.js', 'main.js'))->minimize()->withTimestamp(),
        ]; 
    }

结果,这里将有包含我们文件的HTML

<link href="///assets/e30fdf4770/concrete/css/styles.css?ts=1717328901" rel="stylesheet">
<script src="///assets/e30fdf4770/concrete/js/app.js?ts=1717328901"></script>

安装

composer require abeliani/asset-manager

更多示例

配置资源管理器

$this->manager = new AssetManager(
    'https://mysite.cool',
    '/path/to/runtime/dir',
    '/path/to/asset/dir',
    $env === 'prod',
);

将我们的包添加到管理器

$this->manager->addBundle(new MySiteBundle());
$this->manager->addBundle(new MyAdminBundle(), AssetManagerInterface::CATEGORY_TOP);
$this->manager->addBundle(new MyEditorBundle(), AssetManagerInterface::CATEGORY_BOTTOM);

获取一些HTML以包含我们的结果

print $this->manager->process();

它将显示如下

<link href="///assets/e30fdf4770/concrete/css/styles.css" rel="stylesheet">
<script src="///assets/e30fdf4770/concrete/js/app.js"></script>
print $this->manager->process(AssetManagerInterface::CATEGORY_TOP);

或如下

<link href="///assets/e30fdf4770/concrete/css/styles.css" rel="stylesheet" media="print">
<link href="///assets/e30fdf4770/concrete/css/reset.css" rel="stylesheet">
print $this->manager->process(AssetManagerInterface::CATEGORY_BOTTOM);

或如下

<script src="///assets/e30fdf4770/concrete/js/editor.js" async></script>