Yii – Assets

Assets文件夹可以引用的文件（css，js，视频，音频或图像等）。

Yii管理Assets捆绑中的Asset。Assets捆绑包的目的是在代码库中具有一组相关的JS或CSS文件，并能够在单个PHP调用中注册它们。Assets也可以依赖于其他Asset。

在Assets文件夹内，您将找到基本应用程序模板的Assets捆绑包

<?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',
      ];
   }
?>

上面的类指定Assets文件位于@webroot文件夹内，该文件夹对应于URL @web。该捆绑包不包含JS文件和单个CSS文件。捆绑包取决于其他捆绑包-

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

AssetBundle的属性

以下是AssetBundle的属性。

• basePath-定义一个Web可访问目录，其中包含此捆绑包中的Assets文件。
• baseUrl-指定与basePath属性相对应的URL。
• js-定义此捆绑包中包含的JS文件的数组。
• css-定义此捆绑包中包含的CSS文件的数组。
• 取决于-定义该Assets束所依赖的Asset的数组。这意味着当前Assets的CSS和JS文件将被包含在束之后，这些由depends属性声明。
• sourcePath-定义包含Assets文件的根目录。如果根目录不可通过Web访问，则应设置此属性。否则，您应该设置basePath和baseUrl属性。
• cssOptions-定义将传递给yii \ web \View∷registerCssFile函数的选项。
• jsOptions-定义将传递给yii \ web \ View :: registerJsFile函数的选项。
• publishOptions：指定将传递给yii \ web \ AssetManager :: publish函数的选项。

Assets分类

根据位置，Assets可以分类为-

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

使用Assets捆绑包

步骤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文件声明了一个新的Assets捆绑包。现在，在web / js文件夹中，使用此代码创建一个名为demo.js的文件。

console.log("hello from demo asset");

步骤3-要注册新创建的Assets捆绑包，请转到views / layouts目录，并在main.php文件顶部，添加以下行。

\app\assets\DemoAsset::register($this);

步骤4-如果将Web浏览器指向http：// localhost：8080 / index.php，则应该看到以下chrome控制台输出。

您还可以定义jsOptions和cssOptions属性，以自定义页面中包含CSS和JS文件的方式。默认情况下，JS文件位于结束body标记之前。

步骤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脚本包含在页面的顶部。

在生产模式下运行的Web应用程序启用Assets的HTTP缓存是一种常见的做法。这样，最后的修改时间戳将被附加到所有已发布的Assets上。

步骤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-现在在网络浏览器的地址栏中键入http：// localhost：8080 / index.php。您会注意到，所有Assets现在都有一个时间戳，如下图所示。

Yii核心Assets捆绑

以下是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文件。