README

分支	构建	覆盖率	样式
master
develop

Assets 是一个库，最初是为 UserFrosting 4 创建的，旨在使在生产和开发环境中引用前端资产变得更加容易。

它自带以下功能：

• 通过定位器提供一个简单的方法来生成资产的绝对URL。
• 提供与 gulp-bundle-assets 的基本集成，以及与 @userfrosting/gulp-bundle-assets 的完全集成，从而简化对资产包的引用。
• 通过通用接口与几乎任何打包系统集成。
• 与 Slim 集成，在开发环境中提供无法从公共文件夹访问的资产的集成。
• 执行URL到路径的转换。对于制作可调试的URL并将其回退到由 Slim 资产服务器使用的路径非常有用。
• 与您首选的（并可扩展的）模板引擎集成，以便轻松访问被适当标签包装的资产包和单个资产。

安装

composer require userfrosting/assets

用法

要使用 Assets，您需要

• 一个 ResourceLocator 实例，其中您可以添加所需的搜索路径。
• 您希望查找资产的定位器方案（如果存在）。
• 基本URL（用于生成资产URL）。
• 基本路径（用于修剪定位器返回的绝对路径）。

<?php

use UserFrosting\UniformResourceLocator\ResourceLocator;
use UserFrosting\Assets\Assets;

$basePath = __DIR__;
$baseUrl = 'https://assets.userfrosting.com/';
$locator = new ResourceLocator($basePath);
$locator->registerStream('assets', '', [
    'owls/assets',
    'hawks/assets'
]);

$assets = new Assets($locator, 'assets', $baseUrl);

可选地，还可以将一个 PrefixTransformer 实例作为额外参数传递给 Assets 构造函数。

查看 UserFrosting 的开发模式，以查看其实际效果！

资产包

要从 Assets 实例访问资产包，首先需要通过 addAssetBundles 方法传递一个 AssetBundlesInterface 实例。以下示例演示了如何与 @userfrosting/gulp-bundle-assets（以及扩展的 gulp-bundle-assets）集成。请注意，仅当其配置定义为JSON时才支持原始包。

目录树

/
├build/
│ └asset-bundles.json
└public/
  └index.php

build/asset-bundles.json

{
  "bundle": {
    "js/main": {
      "scripts": [
        "js/bootstrap-3.3.1.js",
        "js/crud.js"
      ]
    },
    "css/main": {
      "styles": [
        "vendor/font-awesome-4.5.0/css/font-awesome.css",
        "css/bootstrap-3.3.1.css",
        "css/bootstrap-custom.css",
        "css/paper.css"
      ]
    }
  }
}

public/index.php

use UserFrosting\Assets\GulpBundleAssetsRawBundles;

// Load asset bundles.
$assetBundles = new GulpBundleAssetsRawBundles('../build/asset-bundles.json');

// Send loaded asset bundles to Assets instance.
$assets->addAssetBundles($assetBundles);

// Grab an asset bundle.
$assets->getJsBundleAssets('js/main');
// Outputs ["js/bootstrap-3.3.1.js", "js/crud.js"]

编译后的包可以像原始包一样使用，除了使用 GulpBundleAssetsCompiledBundles 和打包器的结果文件。

如果您使用原始的 gulp-bundle-assets，则需要在每个包中包含额外的设置 options->result->type->styles/scripts="plain"。

模板插件

模板插件通过将其 Assets 实例传递给模板，并简单地将它传递给您选择的模板引擎环境来使用，可以轻松初始化。

use UserFrosting\Assets\AssetsTemplatePlugin;

$assetsPlugin = new AssetsTemplatePlugin($assets);

// Some code that passes it to Twig rendering environment.

{# Gets replaced at runtime with the following. Additional argument is optional. #}
{{ assets.js("js/main", { defer: true }) }}

<script src="https://assets.userfrosting.com/assets/bootstrap/js/bootstrap.js" defer="true"></script>
<script src="https://assets.userfrosting.com/assets/bootstrap/js/npm.js" defer="true"></script>

风格指南

测试