README

PHP 资产管理器。允许管理网站及其依赖项中的 CSS 和 JS 文件。还可以通过添加加载文件的修订版来刷新浏览器缓存。Assetter 允许您为文件路径注册命名空间以更好地管理（如有必要）。

安装

通过 composer.json

{
    "require": {
        "requtize/assetter": "^2.0.0"
    }
}

通过 Composer CLI

composer require requtize/assetter:^2.0.0

基础

1. 定义集合数组

首先，您需要创建一个包含文件集合的数组。

以下是集合中一个元素的完整索引数组。

[
    // Basic asset
    'jquery' => [
        'scripts' => [ 'https://code.jqueryjs.cn/jquery-3.6.0.min.js' ],
    ],
    // Full asset
    'theme' => [
        'scripts' => [ '/assets/theme/js/script.min.js' ],
        'styles' => [ '/assets/theme/css/theme.min.css' ],
        'require' => [ 'jquery' ],
        'group' => 'head',
        'order' => 100,
        'collection' => 'collection-name'
    ]
]

scripts - 存储JavaScript文件路径的数组（不允许单个值 (作为字符串) 不允许）。
styles - 存储CSS文件路径的数组（不允许单个值 (作为字符串) 不允许）。
require - 存储必须与该库一起加载的库/资产的名称（来自集合中的元素）。依赖项。
order - 加载文件中的位置编号。数字越小 = 越靠前。
group - 该库所属的组。
collection - 来自不同模块的资产集合。更多信息请参阅将资产注册为集合的一部分

2. 创建 Assetter 对象

现在我们需要创建 Assetter 对象。要使用 Assetter，您必须创建 Assetter 可以管理的资产集合（数组）。

use Requtize\Assetter\Assetter;
use Requtize\Assetter\Collection;

$assetsCollection = [];
$collection = new Collection($assetsCollection);
$assetter = new Assetter($collection);

3. 引入一些库

现在，我们可以引入一些库。在这里，我们引入了我们的 theme 资产，它还引入了 jquery 资产。

$assetter->require('theme');

4. 在文档中显示所需的文件

我们已经引入了我们的文件。现在，是时候在文档中显示它们了。为此，您必须为资产组构建一个集合，然后获取渲染的资产。

// Build default group
$group = $assetter->build();
// Build "body" group
$group = $assetter->build('body');
// Build "head" group
$group = $assetter->build('head');

要使用组渲染资产标签，请使用以下方法之一。

// Returns both CSS and JS files
echo $group->all();
// Returns only CSS files
echo $group->css();
// Returns only JS files
echo $group->js();

将资产注册为集合的一部分

假设，您有一个管理动态表单的脚本。脚本实现了需要与其一起加载的插件。但插件有不同的名称，存在于应用程序的不同部分。如何加载我们的脚本和所有模块？

Assetter 具有称为 collections 的功能。集合是一组单独的资产名称，当您需要集合的名称时，将作为一个整体加载。

例如，我们有一个主脚本，并定义了两个插件。现在所有这些脚本都有一个名为 my-collection 的相同 collection。

[
    'main-script' => [
        'scripts' => [ '/main-script.js' ],
        'collection' => 'my-collection',
    ],
    'plugin-1' => [
        'scripts' => [ '/plugin-1.js' ],
        'collection' => 'my-collection',
    ],
    'plugin-2' => [
        'scripts' => [ '/plugin-2.js' ],
        'collection' => 'my-collection',
    ],
]

现在，您只需使用集合名称调用 require()。

$assetter->require('my-collection');

Assetter 加载 my-collection 集合中的所有资产。

资产将按声明顺序加载，或者按每个资产中定义的 require 选项的顺序加载（如果已定义）。

命名空间

您可以为每个使用它的资产路径定义命名空间。在这个例子中，命名空间（在这种情况下）就像一些根路径，比如项目中图像的根路径，或者是（更适用于此）资产的路径。您可以注册多个命名空间，并在资产路径中使用多个命名空间。您需要什么。

1. 注册命名空间

要注册命名空间，请调用以下方法。第一个参数是要注册的命名空间的名称。第二个参数是某个目录的路径。以下代码展示了如何注册两个命名空间。

// Root namespace
$assetter->registerNamespace('{ROOT}', '/web');
// Namespace for global assets
$assetter->registerNamespace('{ASSETS}', '/web/assets');

注意 - 在加载任何资产之前注册命名空间。命名空间只有在需要时才会生效，因此只有在加载（或追加）任何资产时才会生效。加载或追加后注册的命名空间将不会工作。

2. 注册命名空间的用法

当我们注册了命名空间后，我们只需要将这些文件的路径中添加命名空间的名称。以下示例展示了两个资产，一个与命名空间一起工作，另一个则没有。

[
    // With namespace
    'with' => [
        'js' => [ '{ASSETS}/jquery-ui.min.js' ],
        'css' => [  '{ASSETS}/themes/smoothness/jquery-ui.css' ]
    ],
    // Without namespace
    'without' => [
        'js' => [ 'https://code.jqueryjs.cn/ui/1.11.3/jquery-ui.min.js' ],
        'css' => [ 'https://code.jqueryjs.cn/ui/1.11.3/themes/smoothness/jquery-ui.css' ]
    ]
]

命名空间可以按照您想要的任何方式命名，这里我提供了一些建议，您可以使用任何命名约定，例如：{NS}，[NS]，%NS，|NS|，-NS，并且可以混合大小写作为名称。但请记住添加一些特殊字符。Assetter使用str_replace来搜索和替换命名空间，所以如果您只使用字母来命名命名空间，一些资产的路径可能会损坏。

如何在中引入CSS和在中引入JS？

这种元素的分离是一种常见的技术，它允许浏览器在不渲染和下载任何JavaScript的情况下渲染完全样式化的内容。如今，我们在网站上需要引入许多JS库，所有这些文件都必须由浏览器在出现的地方下载。将这些文件移动到body的末尾可以加快页面加载速度。

为了实现这一点，您必须定义资产的head和body部分，然后将它们合并成一个，如下所示

[
    // This goes to HEAD, only CSS
    'bootstrap.head' => [
        'styles' => [ 'bootstrap.min.css' ],
        'group' => 'head',
    ],
    // This goes to BODY, all JS
    'bootstrap.body' => [
        'scripts' => [ 'bootstrap.min.js' ],
        'group' => 'body',
    ],
    // This mix it up together
    'bootstrap' => [
        'require' => [ 'bootstrap.head', 'bootstrap.body' ],
    ],
]

定义的资产您只需要使用混合名称bootstrap进行引入。Assetter会处理其他资产的其余部分，并在构建时将它们构建成适当的定义组。

$assetter->require('bootstrap');

最后一部分，您只需要分别为HEAD和BODY构建资产。

<html>
    <head>
        <?php echo $assetter->build('body')->all(); ?>
    </head>
    <body>
        <?php echo $assetter->build('head')->all(); ?>
    </body>
</html>

requtize / assetter

维护者

详细信息