Yii-assets

提供：Dev Guides
移動先:案内、検索

Yii-資産

アセットとは、Webページで参照されるファイル（css、js、ビデオ、オーディオ、画像など）です。 Yiiは*アセットバンドル*でアセットを管理します。 アセットバンドルの目的は、関連する JS または CSS ファイルのグループをコードベースに保持し、それらを単一のPHP呼び出し内で登録できるようにすることです。 アセットバンドルは、他のアセットバンドルに依存する場合もあります。

アセットフォルダー内には、基本的なアプリケーションテンプレートのアセットバンドルがあります- 

<?php
   namespace app\assets;
   use yii\web\AssetBundle;
  /**
 *@author Qiang Xue <[email protected]>
  * @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',
      ];
   }
?>

上記のクラスは、アセットファイルがURL @ web に対応する @ webroot フォルダー内にあることを指定します。 バンドルには 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ディレクトリにコピーする必要があります。 このプロセスは*アセット発行*と呼ばれます。
  • 公開されたアセット-アセットはWebアクセス可能なディレクトリにあります
  • 外部アセット-アセットは別のWebサーバーにあります。

アセットバンドルの使用

ステップ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 *-ヘッドセクションに *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 *- *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 と入力します。 次の画像に示すように、すべてのアセットにタイムスタンプが追加されていることがわかります。

Web PHPファイル

コアYiiアセットバンドル

コアYii Assetbundleは次のとおりです。

  • yii \ web \ JqueryAsset -jquery.jsファイルが含まれています。
  • yii \ web \ YiiAsset -モジュールでJSコードを整理するメカニズムを実装するyii.jsファイルが含まれています。
  • yii \ bootstrap \ BootstrapAsset -Twitter BootstrapフレームワークのCSSファイルが含まれます。
  • yii \ bootstrap \ BootstrapPluginAsset -Twitter BootstrapフレームワークのJSファイルが含まれます。
  • yii \ jui \ JuiAsset -jQuery UIライブラリのCSSおよびJSファイルが含まれます。
「https://www.finddevguides.com/index.php?title=Yii-assets&oldid=14164」から取得
Powered by MediaWiki