资产编译

Learn more about the Asset Compilation features included with Winter CMS.

Introduction

Winter CMS 包括一个服务器端资产编译器，它利用资产框架 通过 PHP 编译和组合 CSS 和 JavaScript 服务器端等资产，无需复杂的构建工作流程。 Asset Compiler 提供 SASS 和 LESS 样式表的即时服务器端编译，以及一次性手动编译资产 无需额外的工作流工具，如 Node 或 NPM。它还能够合并和缩小 CSS 和 JS 文件。

此外，您可以在 theme.yaml 文件中定义变量 可以在后端的主题设置区域进行修改，然后将其注入编译文件，为主题和品牌创建灵活性。

NOTE: 正在寻找一种在您的项目中编译或构建基于节点的资产的方法？查看Winter组合 可以为您处理此问题的功能。

注入页面资源

资产注入 Winter CMS 支持的站点生成的 HTML 由System\Traits\AssetMaker 特征。此特征在 Winter CMS 的多个地方使用，以直接从类（通常是与生成的 HTML 交互的类）内与资产编译器交互，并且是与资产编译器交互的主要方法。当前实现该特征的类包括：

此特性提供以下方法：

// Add a publicly accessible asset to the injected page assets
$this->addJs('/plugins/acme/blog/assets/javascript/blog-controls.js');

如果路径中指定addCss 和addJs 方法参数以斜杠 (/) 开头，然后它将相对于网站根目录。如果资产路径不以斜杠开头，那么它是相对于$assetPath 当前实现的类的属性System\Traits\AssetMaker.

这addCss 和addJs 方法提供第二个参数，将注入资产的属性定义为数组。特殊属性——build - 可用，它将使用指定插件的当前版本为您注入的资产添加后缀。这可用于在升级插件时刷新缓存的资产。

$this->addJs('/plugins/acme/blog/assets/javascript/blog-controls.js', [
    'build' => 'Acme.Test',
    'defer' => true
]);

您还可以使用字符串作为第二个参数，然后默认使用字符串值作为build 选项：

$this->addJs('/plugins/acme/blog/assets/javascript/blog-controls.js', 'Acme.Test');

资产编译

为了触发资产编译或组合，资产路径必须作为路径数组传递给上述方法，即使只有一个资产文件要编译，它本身会加载其他文件。资产编译目前支持使用 JS 文件=require path/to/other.js 语法以及 LESS 和 SASS/SCSS 文件。

Example:

$this->addCss(['assets/less/base.less']);

组合 CSS 或 JavaScript 文件

Asset Compiler 还可用于通过传递文件数组来组合相同类型的资产。

$this->addCss([
    'assets/css/styles1.css',
    'assets/css/styles2.css'
]);

NOTE：您可以使用cms.enableAssetMinify 中的配置值config/cms.php 文件。默认情况下禁用缩小。

路径符号

在某些情况下，您可能希望合并当前上下文（AssetMaker 特征容器或当前主题）之外的文件，这可以通过在路径前加上一个符号来创建动态路径来实现。例如，一条路径以~/ 将创建一个相对于应用程序的路径：

<script src="{{ ['~/modules/system/assets/js/framework.js'] | theme }}"></script>

支持以下符号来创建动态路径：

Symbol Description
$ 相对于插件目录
~ 相对于应用目录

组合器别名

资产组合器支持替代文件路径的通用别名，这些将以@ 象征。例如AJAX 框架资产 可以包含在组合器中：

<script src="{{ [
    '@jquery',
    '@framework',
    '@framework.extras',
    'assets/javascript/app.js'
] | theme }}"></script>

或例如滑雪板框架资产 可以包含在组合器中：

<script src="{{ [
    '@snowboard.base',
    '@snowboard.attr',
    '@snowboard.request',
    '@snowboard.extras',
    'assets/javascript/app.js'
] | theme }}"></script>

支持以下别名：

Alias Description
@jquery 对后端使用的 jQuery 库 (v3.4.0) 的引用。 (JavaScript)
@framework AJAX 框架附加功能，替代{% framework %} 标签。 (JavaScript)
@framework.extras AJAX 框架附加功能，替代{% framework extras %} 标签。 （JavaScript，CSS）
@framework.extras.js AJAX 框架附加功能，(JavaScript)
@framework.extras.css AJAX 框架附加功能，(CSS)
@snowboard.base 滑雪板框架，替代{% snowboard %} 标签。 (JavaScript)
@snowboard.attr 这HTML 数据属性 请求功能
@snowboard.request 基地JavaScript 技术 请求功能
@snowboard.extras 滑雪板框架附加功能，（JavaScript）
@snowboard.extras.css 滑雪板框架附加功能，（CSS）

相同的别名可以用于 JavaScript 或 CSS，例如@framework.extras.数组中至少需要一个带有文件扩展名的显式引用以确定使用哪个。

渲染注入的资产

为了在前端输出注入的资产，您需要使用{% 样式 %} 和{% 脚本 %} 标签。

Example:

<head>
    ...
    {% styles %}
</head>
<body>
    ...
    {% scripts %}
</body>

如果您想在任何其他上下文中呈现注入的资产，您可以调用$this->makeAssets() 在实现的对象上System\Traits\AssetMaker 为该对象实例重新生成注入资产的特征。

NOTE: 注入的资产默认在后端通过<?= $this->makeAssets() ?> 打电话modules/backend/layouts/_head.htm，因此如果您为后端控制器使用自定义布局，则需要确保它包含该调用。

编译器包

虽然大多数时候动态资产编译通过addJs(),addCss()， 或者| theme 筛选 应该足以满足您的需求，您可能偶尔会有一个复杂的资产编译，您希望只根据命令而不是动态生成静态文件。

Winter CMS 核心注册了几个这样的包供内部使用，只要artisan winter:util compile assets 命令 运行。

扩展资产编译器

这System\Classes\AssetCombiner 类提供了registerCallback(callable $callback) 扩展其默认行为的静态方法。此外，system.assets.beforeAddAsset 事件 可用于将任何呼叫扩展到addJs() 或者addCss()

注册自定义别名

可以通过以下方式注册您自己的自定义别名registerCallback 的方法System\Classes\CombineAssets 班级：

/*
 * Register custom asset compiler aliases
 */
CombineAssets::registerCallback(function ($combiner) {
    $this->registerAlias('jquery', '~/modules/backend/assets/js/vendor/jquery-and-migrate.min.js');
});

注册自定义资产包

可以通过以下方式注册您自己的自定义资产包registerCallback 的方法System\Classes\CombineAssets:

/*
 * Register custom asset compiler bundles
 */
CombineAssets::registerCallback(function ($combiner) {
    $combiner->registerBundle('~/modules/system/assets/less/styles.less', '$/myauthor/myplugin/assets/css/generate-styles.css');
});
豫ICP备18041297号-2
Please enter a query in order to search.