编程宝库 - 技术改变世界

编程宝库

Yii

Yii Assets

资产是可以在网页中引用的文件（css，js，视频，音频或图像等）。Yii管理 资产包 中的资产。资产包的目的是在代码库中 包含一组 相关的 JS 或 CSS 文件，并能够在一次PHP调用中注册它们。资产捆绑也可以依赖于其他资产捆绑。

在资产文件夹中，您可以找到基本应用程序模板的资产包 -

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   /**
   * @author Qiang Xue <qiang.xue@gmail.com>
   * @since 2.0
   */
   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',
      ];
   }
?>

上面的类指定资产文件位于 @webroot 文件夹中，该文件夹对应于URL @web 。该包不包含 JS 文件和单个 CSS 文件。捆绑依赖于其他捆绑 -

yii \ web \ YiiAsset和yii \ bootstrap \ BootstrapAsset。

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 函数的选项。

资产分类

根据地点的不同，资产可以分为 -

源资产 - 资产位于无法通过网络直接访问的目录中。它们应该被复制到一个Web目录中以便在页面中使用源资源。这个过程被称为 资产发布 。
已发布的资产 - 资产位于网络可访问的目录中
外部资产 - 资产位于另一个Web服务器上。

使用资产包

第1步 - 在资产文件夹中，使用以下内容创建一个名为 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步 - 如果您的浏览器指向 http：// localhost：8080 / index.php ，您应该看到以下chrome控制台输出。

使用资产包

您还可以定义 jsOptions 和 cssOptions 属性来自定义 CSS 和 JS 文件包含在页面中的方式。默认情况下，JS文件包含在关闭正文标记之前。

第5步 - 要在头部包含 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 脚本包含在页面的头部分。

解密PHP文件

在生产模式下运行的Web应用程序通常会为资产启用HTTP缓存。通过这样做，最后修改时间戳将被附加到所有已发布的资产。

第7步 - 进入配置文件夹并修改 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 。您会注意到所有资产现在都有一个时间戳，如下图所示。

Web PHP文件

核心Yii AssetBundles

以下是Core Yii AssetBundles。

yii \ web \ JqueryAsset - 包含jquery.js文件。
yii \ web \ YiiAsset - 包含yii.js文件，该文件实现了在模块中组织JS代码的机制。
yii \ bootstrap \ BootstrapAsset - 包含来自Twitter Bootstrap框架的CSS文件。
yii \ bootstrap \ BootstrapPluginAsset - 包含来自Twitter Bootstrap框架的JS文件。
yii \ jui \ JuiAsset - 包含jQuery UI库中的CSS和JS文件。

下一节：Yii Assets转换

Yii 教程

开发人员经常使用扩展语法，比如 LESS，SCSS， Stylus for CSS和TypeScript，以及CoffeeScript forJS，而不是编写 CSS 或 JS 代码。然后他们使用特殊工具将这些文 ...

Yii 布局

Yii Assets转换