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
    ]
]

scripts - 存储JavaScript文件路径数组（单个值 （作为字符串） 不允许）。
styles - 存储CSS文件路径数组（单个值 （作为字符串） 不允许）。
require - 存储必须与该库一起加载的库/资产（集合中的元素）的名称。依赖项。
order - 加载文件中的位置号。数字越小，位置越靠前。
group - 该库所属的组。

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();

命名空间

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

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 来搜索和替换命名空间，因此如果命名空间仅由字母组成，某些资产路径可能会损坏。

如何在 <head> 中需要 CSS 并在 <body> 中需要 JS？

这种元素的分离是一种常见技术，它允许网页浏览器渲染完全样式化的内容，而无需在开始时渲染和下载任何JavaScript。如今，我们在网站中需要如此多的JavaScript库，所有这些文件都必须由浏览器在发生位置下载。将这些文件移至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>

imansa / assetter

维护者

详细信息