Yii2学习笔记系列17——Application Structure-Assets(应用结构之前端资源)

一 16 五月 2016

资源

Yii中的资源指的是与Web页面相关的文件,它可以是CSS、JS、图片或者视频文件等等。前端资源一般存放在Web可以访问的目录下并且由Web服务器直接提供。

一个更好的办法就是通过程序来管理资源。例如,当我们在页面中使用yii\jui\DatePicker小部件时,程序不会让你手动去定位所需要的CSS、JS文件等的位置,而是自动引入。当你将小部件升级到一个新版本时,程序会自动使用更新版本的资源文件。在本教程中,我们将会讲解Yii提供的强大的资源管理功能。

资源包

Yii在资源包中管理资源,一个所谓的资源包,简单的说就是放在一个目录下的资源集合,当我们在一个视图中注册一个资源包时,它会将CSS和JS文件包含到要渲染的Web页面中。

定义资源包

资源包是继承自yii\web\AssetBundle的PHP类。资源包的包名仅仅是对应的完整的PHP类名(不包含前面的反斜杠),并且资源包类应该被自动加载。通常它会指明资源所在的位置、CSS和JS文件包含的内容以及该资源包如何依赖其他的资源包。

下面的代码定义基础项目模板中的主要资源包:

<?php

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

上述的AppAsset类指明了资源文件位于@webroot目录下并且相应的URL是@web;该资源包包含了一个CSS文件css/site.css并且没有包含JS文件;该资源包依赖其它两个资源包:yii\web\YiiAssetyii\bootstrap\BootstrapAsset 。下面是更多关于yii\web\AssetBundle属性的详情:

  • yii\web\AssetBundle::sourcePath:指定资源包中包含资源文件的根目录,当根目录不能通过Web访问时需要设置该值,否则,我们需要设置yii\web\AssetBundle::basePath 属性和yii\web\AssetBundle::baseUrl 属性,可以使用路径别名。
  • yii\web\AssetBundle::basePath:指定资源包中可以通过Web访问的包含资源文件的目录,当我们指定sourcePath属性时,资源管理器会将资源包中的资源发布到可以通过Web访问的目录下并且相应的重写这个属性。
  • yii\web\AssetBundle::baseUrl:指定对应到yii\web\AssetBundle::basePath目录的URL,和yii\web\AssetBundle::basePath类似,如果我们指定了yii\web\AssetBundle::sourcePath 属性,资源管理器会发布资源并相应的重写该属性,可以使用路径别名。
  • yii\web\AssetBundle::js:一个包含了资源包中JS文件的数组。注意,只能使用正斜杠“/”作为目录分隔符,每个JS文件可以是以下两种格式之一:

    • 表示本地JS文件的相对路径(例如, js/main.js),实际的文件路径应该在相对路径前面加上yii\web\AssetManager::basePath,实际的文件URL应该在该路径前面加上yii\web\AssetManager::baseUrl。
    • 表示外部JS文件资源的绝对路径,例如:

      http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js 或者 //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js。
      yii\web\AssetBundle::css:一个包含该资源包中CSS样式文件的数组,具体的格式跟yii\web\AssetBundle::js相同。 yii\web\AssetBundle::depends:一个包含当前资源包所依赖的资源包的列表的数组(后续有详细介绍)。 yii\web\AssetBundle::jsOptions:在调用yii\web\View::registerJsFile()方法注册每个JS文件的时候,指定传递到该方法的参数选项。 yii\web\AssetBundle::cssOptions:在调用yii\web\View::registerCssFile()方法注册每个CSS文件时,指定传递到该方法的参数选项。 * yii\web\AssetBundle::publishOptions:在调用yii\web\AssetManager::publish()发布该资源包文件到Web目录时,指定传递到该方法的参数选项,只有在指定了yii\web\AssetBundle::sourcePath属性时有效

资源位置

资源可以按照他们存放的位置分为:

  • 源资源:源资源文件和PHP源代码放在一起,不能被Web直接访问,为了在一个页面中使用源资源,需要将其拷贝到Web目录中转换成所谓的发布资源。
  • 发布资源:资源文件存放在可以直接通过Web访问的Web目录中。
  • 外部资源:资源文件放在与我们的Web应用不同的Web服务器上。

当定义资源包类的时候,如果我们指定了yii\web\AssetBundle::sourcePath属性,就表示任何使用相对路径的资源都会被当做源资源;如果没有指定该属性,就表示这些资源是发布资源(因此我们需要指定yii\web\AssetBundle::basePath 和 yii\web\AssetBundle::baseUrl属性,以便Yii能够确定他们的位置)。

推荐将资源文件放到Web目录以避免不必要的发布资源过程,这就是之前的例子指定yii\web\AssetBundle::basePath而不是yii\web\AssetBundle::sourcePath的原因。

对于扩展来说,由于他们的资源和源代码都存放在不能通过Web访问的目录下,所以在定义资源包类时必须制定yii\web\AssetBundle::sourcePath属性。

注意:不要使用@webroot/assets作为yii\web\AssetBundle::sourcePath属性,该目录默认被yii\web\AssetManager资源管理器存储发布后的资源文件,因此,该路径下的所有内容都会被认为是临时文件并且可以被删除。

资源依赖

当我们在一个Web页面中引入多个CSS或者JS文件时,他们必须按照一定的顺序以避免属性重写问题。例如,如果你在Web页面中使用了一个jQuery UI组件,你必须要保证jQuery的JS文件要在jQuery UI的JS文件引入前引入。我们称这种资源先后次序为资源依赖。

资源依赖主要是通过yii\web\AssetBundle::depends属性来指定的,在AppAsset示例中,资源包依赖其他两个资源包:yii\web\YiiAsset和yii\bootstrap\BootstrapAsset,也就是该资源包的CSS和JS文件一定要在这两个依赖包的文件被引入之后再引入才行。

资源依赖关系是可以传递的,如果A依赖B,B又依赖C,那么A也依赖C。

资源选项

我们可以通过指定yii\web\AssetBundle::cssOptions和yii\web\AssetBundle::jsOptions属性来自定义CSS和JS文件在页面中的引入方式,当视图中引入CSS和JS文件时,这两个属性的值可以分别通过yii\web\View::registerCssFile()方法和yii\web\View::registerJsFile()方法分别传递进去。

注意:我们在资源包类中设置的选项会被应用到资源包内的每个CSS/JS,如果你想针对不同的文件采用不同的选项配置,那么你应该创建单独的资源包,并且针对每个资源包应用一组选项配置。

例如,在IE9及更低的版本下需要引入一个CSS文件,我们可以使用如下的选项:

public $cssOptions = ['condition' => 'lte IE9'];

这样儿会使资源包中的一个CSS文件被引用到如下的HTML标签中:

<!--[if lte IE9]>
<link rel="stylesheet" href="path/to/foo.css">
<![endif]-->

为生成的CSS链接添加<noscript>标签,你可以像如下这种方式来配置cssOptions

public $cssOptions = ['noscript' => true];

想要在页面头部引入一个JS文件的话(默认情况下,JS文件会在页面body体结束处被引入),使用如下的选项:

public $jsOptions = ['position' => \yii\web\View::POS_HEAD];

默认情况下,当一个资源包被发布的时候,yii\web\AssetBundle::sourcePath属性指定的目录下的所有内容都会被发布。你可以通过配置yii\web\AssetManager::publish()属性来自定义这一行为。例如,为了发布yii\web\AssetBundle::sourcePath目录下的一个或者几个子目录,你可以通过在资源包类中加入如下代码:

<?php
namespace app\assets;

use yii\web\AssetBundle;

class FontAwesomeAsset extends AssetBundle
{
    public $sourcePath = '@bower/font-awesome'; 
    public $css = [
        'css/font-awesome.min.css',
    ];
    public $publishOptions = [
        'only' => [
            'fonts/',
            'css/',
        ]
    ];
}

上述示例为"fontawesome" package定义了一个资源包,通过制定only选项,只有fontscss子目录会被发布。

Bower 和 NPM 资源

大多数的CSS/JS包都是通过Bower 和/或 NPM来管理。如果你的应用或者扩展使用了这样儿的一个包,那么推荐你使用如下的步骤来管理类库中的资源:

  1. 修改你的应用或者扩展中的composer.json文件并且在require部分中列出所需的资源包。你应该使用bower-asset/PackageName(针对Bower包)或者npm-asset/PackageName(针对NPM包)指向相应的库。
  2. 创建一个资源包类并且将你的应用或者扩展要用到的JS/CSS文件列出来。你需要将yii\web\AssetBundle::sourcePath属性设置为@bower/PackageName或者@npm/PackageName,因为Composer会根据该属性将Bower或者NPM包安装到对应的目录下。

注意:有些包可能会将所有的文件存放在一个子目录下,如果是这种情况,你需要将yii\web\AssetBundle::sourcePath属性设置为该子目录的路径。例如,yii\web\JqueryAsset使用@bower/jquery/dist而不是@bower/jquery

使用资源包

想要使用一个资源包,需要在视图中通过调用yii\web\AssetBundle::register()方法将其进行注册。例如,在一个视图模板中,你可以通过类似如下的方式来注册一个资源包:

use app\assets\AppAsset;
AppAsset::register($this); //$this变量代表当前的视图对象

补充:yii\web\AssetBundle::register()方法返回一个包含了发布资源信息的资源包对象,例如basePath和baseUrl。

如果你在其他地方注册一个资源包,你应该提供所需的视图对象。例如,如果你想要在一个小部件类中注册一个资源包,可以通过$this->view来获取视图对象。

当我们向一个视图中注册一个资源包时,Yii会在幕后把所有的依赖资源包也进行注册,并且如果资源包位于不能通过Web访问的目录下,那么它会被发布到Web目录下。之后,当视图渲染页面时,它会为已注册的资源包中列出的CSS和JS文件分别生成<link><script>标签,这些标签的顺序由已注册的资源包之间的依赖关系以及yii\web\AssetBundle::cssyii\web\AssetBundle::js属性中列出的资源所决定。

定制资源包

Yii通过一个名为assetManager的应用组件来管理资源包,assetManager通过继承yii\web\AssetManager。通过配置yii\web\AssetManager::bundles属性可以实现定制资源包的动作。例如,yii\web\JqueryAsset资源包类默认使用已安装的Bower包下的jquery.js文件,但是为了提升性能,你可能想要使用google提供的版本,通过配置类似如下的代码可以实现这个需求:

return [
    //.....
    'components' => [
        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'sourcePath' => null, // 不发布该资源
                    'js' => [
                        '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
                    ],
                ],
            ],
        ],
    ],
];

同样的,你也可以通过yii\web\AssetManager::bundles来配置多个资源包。数组的键是资源包的类名(不包含反斜杠),数组的值是对应的配置数组

提示:你可以在一个资源包中选择使用哪些资源包。下面的代码展示了如何在开发环境下使用jquery.js,在其他环境下使用jquery.min.js

php 'yii\web\JqueryAsset' => [ 'js' => [ YII_ENV_DEV ? 'jquery.js' : 'jquery.min.js' ] ],

你可以通过将资源包名对应的值设置为false来禁用一个或多个资源包。当你在一个视图中注册一个被禁用掉了的资源包时,该资源包的所有依赖资源包都不会进行注册,当然,该资源包的任何资源也不会在页面渲染时被引入。例如,为了禁用yii\web\JqueryAsset,你可以使用如下的配置:

return [
    // ...
    'components' => [
        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => false,
            ],
        ],
    ],
];

你也可以通过将yii\web\AssetManager::bundles属性设置为false来禁用所有的资源包。

资源部署

有时候你可能想要“修复”多个资源包中的错误/不兼容的资源包,例如,A资源包使用jquery.min.js的1.11.1版本,B资源包使用jquery.js的2.1.1版本,你可以分别调整两个资源包中的资源版本来解决这个问题,但是更简单的办法是使用资源部署特性来将资源修复为你想要的资源。为了实现这个目标,需要像如下这样儿来配置yii\web\AssetManager::assetMap属性:

return [
    // ...
    'components' => [
        'assetManager' => [
            'assetMap' => [
                'jquery.js' => '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
            ],
        ],
    ],
];

yii\web\AssetManager::assetMap的键是你想要“修复”的资源名,对应的值是预设的资源路径。当你在一个视图中注册一个资源包时,CSS数组和JS数组中每个相应的资源文件都会根据这个数组进行检查。如果能在资源文件的最后一部分(前缀是yii\web\AssetBundle::sourcePath)找到任何一个匹配的键值,那么键对应的值会替换相应的资源并且被注册到视图文件中。例如,资源文件my/path/to/jquery.js能够匹配jquery.js

注意:只有使用相对路径指定的资源才可以使用资源部署,目标资源路径应该要么是绝对的URL地址或者相对yii\web\AssetBundle

资源发布

前面提到过了,如果一个资源包所处的目录不能通过Web进行访问,当它被一个视图文件引用时,它的资源都会被拷贝到Web目录中,这个过程被称为“资源发布”,主要是由资源管理器来完成的。

默认情况下,资源会被发布到@webroot/assets,对应的URL是@web/assets,你可以通过设置basePath和baseUrl属性来定制。

除了通过拷贝的方式发布资源,你还可以考虑软链接的方式,如果你的系统和Web服务器支持的话,可以通过设置linkAssets为true来启用该特性。

return [
    // ...
    'components' => [
        'assetManager' => [
            'linkAssets' => true,
        ],
    ],
];

有了上面的配置,当资源包被发布时,资源管理器会创建一个链接到资源目录的软链接,这种方式要比拷贝资源文件快得多,并且可以确保资源文件总是最新的。

缓存清除

对于生产环境下的Web应用来说,开启HTTP缓存来缓存静态资源是一个常见的手段,但是这么做有个缺点,就是当你修改了一个资源,并且把它发布到生产环境下时,由于HTTP缓存问题,客户端可能还在使用旧版本。为了克服这个难题,你可能需要缓存清除特性(在2.0.3版本被引进),通过类似如下方式配置yii\web\AssetManager:

return [
    // ...
    'components' => [
        'assetManager' => [
            'appendTimestamp' => true,
        ],
    ],
];

通过这样做,每个发布的资源的URL都会被追加上它的最后修改时间。例如,yii.js的URL可能会像"assets/5515a87c/yii.js?v= 1423448645",参数v代表yii.js文件最后被修改的时间。现在,如果你修改了资源文件,那么它的URL也会相应的改变,客户端也会因此去匹配最新的版本。

常用资源包

Yii核心代码定义了许多资源包,以下是其中最常用的,可能会在你的应用或者扩展中用到:

如果你的代码依赖jQuery、jQuery UI或者Bootstrap,你应该使用这些预定义好的资源包,而不是自己再次创建。如果这些默认的设置不能满足你的需求,你可以参考自定义资源包

资源转换

除了直接编写CSS和JS代码,很多时候开发者们会使用扩展语法来编写,并且使用工具将它们转换为CSS/JS代码。例如,针对CSS代码,你可以使用LESS或者SCSS,针对JS代码可以使用TypeScript

你可以在资源包中的CSSJS属性中列出所要使用的扩展语法,例如:

class AppAsset extends AssetBundle
{
  public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css' => 'css/site.less',
    ];
    public $js = [
        'js' => 'js/site.ts',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

当你在视图中注册这样儿的一个资源包时,资源管理器会运行预处理工具,将扩展语法转换成CSS/JS代码。

Yii通过文件扩展名来确定资源应该属于哪种类型的扩展语法。默认情况下,Yii能够识别以下的扩展语法和文件扩展名:

Yii依赖已安装的预处理工具来转换资源。例如,想要使用LESS,你应该先安装less预处理命令。

你可以通过类似如下方式配置yii\web\AssetManager::converter来实现自定义预处理命令以及支持的扩展语法:

return [
    'components' => [
        'assetManager' => [
            'converter' => [
                'class' => 'yii\web\AssetConverter',
                'commands' => [
                    'less' => ['css', 'less {from} {to} --no-color'],
                    'ts' => ['js', 'tsc --out {to} {from}'],
                ],
            ],
        ],
    ],
];

如上所示,我们通过yii\web\AssetConverter::commands属性指定了支持的扩展语法,数组的键是文件扩展名(不包含反斜杠),数组的值是生成的资源文件扩展名以及实现资源转换的命令。命令中的{from}{to}将会被替换成源资源文件路径和目标资源路径。

补充:除了上述的方式,还有其他的方式来处理扩展语法。例如,你可以使用诸如grunt这样的构建工具来监控和自动转换扩展语法。在这种情况下,你需要使用编译后的CSS/JS文件而不是原始文件。

合并和压缩资源

一个Web页面可能需要包含许多CSS 和/或 JS文件,为了减少HTTP请求的次数以及这些文件的总的下载尺寸,通常的处理方式是合并并且压缩多个CSS/JS文件到一个或几个文件中,并且使用压缩后的文件而不是原文件。

补充:合并和压缩资源通常是在生产模式下才需要,在开发模式下,使用原始的CSS/JS文件通常更方便调试。

接下来,我们将要介绍一种合并压缩资源文件同时无需修改已有的应用程序代码的方法:

  1. 找到你的应用中所有的你打算合并和压缩的资源包。
  2. 将这些资源包分割成一个或几个分组,需要注意的是每个资源包只能属于一个分组。
  3. 合并压缩每个组里的CSS到一个文件中,JS也采取同样的处理方式。
  4. 为每个组重新定义一个新的资源包:
    • 设置yii\web\AssetBundle::cssyii\web\AssetBundle::js属性分别为压缩后的CSS和JS文件
    • 自定义每个组的资源包,将每个组的yii\web\AssetBundle::css和yii\web\AssetBundle::js属性设置为空,并且将他们的yii\web\AssetBundle::depends属性设置为新创建的资源包

使用这种方式,当你在一个视图中注册一个资源包的时候,会自动触发原始包所属的资源包进行注册,然后页面会引入合并压缩后的文件而非原始文件。

示例

让我们来用一个示例讲解一下上述的方式:

假设你的应用有两个页面,X和Y。X页面使用资源包A,B和C,Y页面使用资源包B,C和D。你有两种方式来划分这些资源包,一种是讲所有的资源包放在一个组里;另一种是将A、B、C放在X组,将B、C、D放在Y组织。哪种方式更好?这个要看情况。第一种方式,两个页面都使用相同的合并压缩过的CSS/JS文件,可以使得HTTP缓存更高效,然而由于所有的资源包都包含在一个组里,合并压缩后的CSS/JS文件的体积会比较大,从而导致传输的时间也会增加。在这个示例中,我们使用第一种方式,也就是在一个组中包含所有的资源包:

补充:将资源包分割成不同的分组并不是毫无意义的,它通常需要分析不同的页面上的各种资源的实际流量数据。简单起见,我们通常会先从一个分组开始做。

使用已有的工具(例如Closure CompilerYUI Compressor)来合并和压缩CSS/JS文件,需要注意的是合并后的文件满足资源包内的先后依赖关系。例如,如果包A依赖包B,包B依赖包C和包D,那么资源文件以C和D开头,然后是B,最后是A。

经过合并和压缩之后,我们得到了一个CSS文件和一个JS文件,假设他们的名字分别是all-xyz.cssall-xyz.js,为了防止HTTP缓存问题这里xyz可以是时间戳或者哈希值来保证其唯一性。

接下来我们就只差最后一步了,在应用程序配置文件中通过类似如下的代码来配置资源管理器

return [
    'components' => [
        'assetManager' => [
            'bundles' => [
                'all' => [
                    'class' => 'yii\web\AssetBundle',
                    'basePath' => '@webroot/assets',
                    'baseUrl' => '@web/asset',
                    'css' => ['all-xyz.css'],
                    'js' => ['all-xyz.js'],
                ],
                'A' => ['css' => [], 'js' => [], 'depends' => ['all']],
                'B' => ['css' => [], 'js' => [], 'depends' => ['all']],
                'C' => ['css' => [], 'js' => [], 'depends' => ['all']],
                'D' => ['css' => [], 'js' => [], 'depends' => ['all']],
            ],
        ],
    ],
];

自定义资源包一节中所述,上述配置改变了每个资源包的默认行为。其中,资源包A、B、C、D不再包含任何的资源文件,他们现在都依赖于包含了压缩后的all-xyz.cssall-xyz.js的名为all的资源包。因此,对于X页面来说,不再需要引入A、B、C、D这几个资源包中的原始文件,只需要引入这两个压缩后的文件即可,Y页面也是同理。

最后还有个更好的方式来处理上述文件,除了直接修改应用程序的配置源文件,你可以将自定义包数组放到一个文件,在应用配置中根据条件来选择性的包含该文件,例如:

return [
    'components' => [
        'assetManager' => [
            'bundles' => require(__DIR__ . '/' . (YII_ENV_PROD ? 'assets-prodphp' : ''assets-dev.php)),
        ],
    ],
];

上述代码表示,生产环境下的资源包配置数组保存在assets-prod.php文件下,非生产环境下则保存在assets-dev.php

使用asset命令

Yii提供了一个asset命令来实现上述操作的自动化处理。

为了使用该命令,应该先创建一个配置文件设置哪些资源包要以何种方式组合,可以使用asset/template子命令来生成一个模板,然后将其修改成你想要的。

yii asset/template assets.php

该命令在当前目录下生成一个assets.php文件,文件内容如下所示:

<?php
/**
 * Configuration file for the "yii asset" console command.
 * Note that in the console environment, some path aliases like '@webroot' and '@web' may not exist.
 * Please define these missing path aliases.
 */
return [
    // Adjust command/callback for JavaScript files compressing:
    'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',
    // Adjust command/callback for CSS files compressing:
    'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',
    // The list of asset bundles to compress:
    'bundles' => [
        // 'yii\web\YiiAsset',
        // 'yii\web\JqueryAsset',
    ],
    // Asset bundle for compression output:
    'targets' => [
        'all' => [
            'class' => 'yii\web\AssetBundle',
            'basePath' => '@webroot/assets',
            'baseUrl' => '@web/assets',
            'js' => 'js/all-{hash}.js',
            'css' => 'css/all-{hash}.css',
        ],
    ],
    // Asset manager configuration:
    'assetManager' => [
    ],
];

你应该修改这个文件并且在bundles属性中指明你想要组合的那些资源包,在targets选项中指明这些包如何分组,可以指定一个或多个分组。

注意:使用asset命令并不是唯一的可以实现自动处理资源合并和压缩的方式,你也可以使用grunt来实现相同的目标。

资源包分组

在最后一项中,我们已经解释过如何将应用中的资源包合并到单个文件以减少HTTP请求,但实际中并不是一直都这样儿的。例如,想象一下,假设你的应用同时包含一个“前端”和一个“后端”,分别使用了不同的CSS和JS文件。在这种情况下,将前后端所用到的资源都组合到一个单文件中明显是不合理的,因为针对“前端”的资源不会被“后端”用到,同理,当“前端”的页面被请求时,将“后端”资源发送过去也是对网络带宽资源的一种浪费。

为了解决上述问题,你可以将资源包划分成不同的分组并且为每组绑定不同的资源,如下代码显示了如何组织资源包:

return [
    ...
    // 指定每组的输出资源包:
    'targets' => [
        'allShared' => [
            'js' => 'js/all-shared-{hash}.js',
            'css' => 'css/all-shared-{hash}.css',
            'depends' => [
                // 引入“前端”和“后端”共享的所有资源
                'yii\web\YiiAsset',
                'app\assets\SharedAsset',
            ],
        ],
        'allBackEnd' => [
            'js' => 'js/all-{hash}.js',
            'css' => 'css/all-{hash}.css',
            'depends' => [
                // 引入只针对“后端”的资源
                'app\assets\AdminAsset'
            ],
        ],
        'allFrontEnd' => [
            'js' => 'js/all-{hash}.js',
            'css' => 'css/all-{hash}.css',
            'depends' => [],// 引入只针对前端的资源 
        ],
    ],
    ...
];

正如你看到的,资源包被划分成了三个分组:allSharedallBackEndallFrontEnd,每组都依赖一系列的资源包。例如,allBackEnd依赖app\assets\AdminAsset。当运行asset命令时,它会根据上面的描述来组合资源。

补充:你可以将其中的一个目标资源包的depends选项置空,这样儿做的话,该资源包将会依赖所有其他没有被依赖的资源包。

Category: PHP Develop

Comments