AssetBundle 的属性
以下是 AssetBundle 的属性。
-
basePath - 定义包含此捆绑包中资产文件的 Web 可访问目录。
-
baseUrl - 指定对应于 basePath 属性的 URL。
-
js - 定义此包中包含的 JS 文件数组。
-
css - 定义此包中包含的 CSS 文件的数组。
-
depends- 定义此捆绑包所依赖的资产捆绑包的数组。这意味着当前资产包的 CSS 和 JS 文件将包含在包之后，这些包由depends属性声明。
-
sourcePath - 定义包含资产文件的根目录。如果根目录不可通过 Web 访问，则应设置此属性。否则，您应该设置basePath和baseUrl属性。
-
cssOptions - 定义将传递给yii\web\View∷registerCssFile函数的选项。
-
jsOptions - 定义将传递给yii\web\View::registerJsFile函数的选项。
-
publishOptions：指定将传递给yii\web\AssetManager::publish函数的选项。
资产分类
根据位置，资产可分为 -
使用资产包
第 1 步- 在assets文件夹中，创建一个名为DemoAsset.php的新文件，其内容如下。
<?php
namespace app\assets;
use yii\web\AssetBundle;
class DemoAsset extends AssetBundle {
public $basePath = ‘@webroot’;
public $baseUrl = ‘@web’;
public $js = [‘js/demo.js’];
}
?>
第 2 步- 我们刚刚声明了一个带有单个 demo.js 文件的新资产包。现在，在 web/js 文件夹中，使用此代码创建一个名为 demo.js 的文件。
console.log("hello from demo asset");
第 3 步 - 要注册新创建的资产包，请转到 views/layouts 目录并在 main.php 文件的顶部添加以下行。
\app\assets\DemoAsset::register($this);
第 4 步- 如果将 Web 浏览器指向http://localhost:8080/index.php，您应该会看到以下 chrome 控制台输出。
您还可以定义jsOptions和cssOptions属性来自定义CSS和JS文件包含在页面中的方式。默认情况下，JS 文件包含在结束 body 标记之前。
第 5 步- 要在 head 部分包含JS文件，请按以下方式修改DemoAsset.php文件。
<?php
namespace app\assets;
use yii\web\AssetBundle;
use yii\web\View;
class DemoAsset extends AssetBundle {
public $basePath = '@webroot';
public $baseUrl = '@web';
public $js = ['js/demo.js'];
public $jsOptions = ['position' => View::POS_HEAD];
}
?>
第 6 步- 现在转到http://localhost:8080/index.php，您应该会看到demo.js脚本包含在页面的 head 部分中。
对于在生产模式下运行的 Web 应用程序来说，为资产启用 HTTP 缓存是一种常见的做法。通过这样做，最后修改时间戳将附加到所有已发布的资产。
第 7 步- 转到config文件夹并修改web.php文件，如以下代码所示。
<?php
$params = require(__DIR__ . '/params.php');
$config = [
'id' => 'basic',
'basePath' => dirname(__DIR__),
'bootstrap' => ['log'],
'components' => [
'assetManager' => [
'appendTimestamp' => true,
],
'request' => [
// !!! insert a secret key in the following (if it is empty) - this is
//required by cookie validation
'cookieValidationKey' => 'ymoaYrebZHa8gURuolioHGlK8fLXCKjO',
],
'cache' => [
'class' => 'yii\caching\FileCache',
],
'user' => [
'identityClass' => 'app\models\User',
'enableAutoLogin' => true,
],
'errorHandler' => [
'errorAction' => 'site/error',
],
'mailer' => [
'class' => 'yii\swiftmailer\Mailer',
// send all mails to a file by default. You have to set
// 'useFileTransport' to false and configure a transport
// for the mailer to send real emails.
'useFileTransport' => true,
],
'log' => [
'traceLevel' => YII_DEBUG ? 3 : 0,
'targets' => [
[
'class' => 'yii\log\FileTarget',
'levels' => ['error', 'warning'],
],
],
],
'db' => require(__DIR__ . '/db.php'),
],
'modules' => [
'hello' => [
'class' => 'app\modules\hello\Hello',
],
],
'params' => $params,
];
if (YII_ENV_DEV) {
// configuration adjustments for 'dev' environment
$config['bootstrap'][] = 'debug';
$config['modules']['debug'] = [
'class' => 'yii\debug\Module',
];
$config['bootstrap'][] = 'gii';
$config['modules']['gii'] = [
'class' => 'yii\gii\Module',
];
}
return $config;
?>
我们添加了AssetManager组件并设置了appendTimestamp属性。
第 8 步- 现在在 Web 浏览器的地址栏中键入http://localhost:8080/index.php。您会注意到所有资产现在都有一个时间戳，如下图所示。
