Yii中的資源是和Web頁(yè)面相關(guān)的文件，可為CSS文件，JavaScript文件，圖片或視頻等， 資源放在Web可訪問(wèn)的目錄下，直接被Web服務(wù)器調(diào)用。

通過(guò)程序自動(dòng)管理資源更好一點(diǎn)，例如，當(dāng)你在頁(yè)面中使用 yii\jui\DatePicker 小部件時(shí)， 它會(huì)自動(dòng)包含需要的CSS和JavaScript文件，而不是要求你手工去找到這些文件并包含， 當(dāng)你升級(jí)小部件時(shí)，它會(huì)自動(dòng)使用新版本的資源文件，在本教程中，我們會(huì)詳述Yii提供的強(qiáng)大的資源管理功能。

資源包

Yii在資源包中管理資源，資源包簡(jiǎn)單的說(shuō)就是放在一個(gè)目錄下的資源集合， 當(dāng)在視圖中注冊(cè)一個(gè)資源包，在渲染W(wǎng)eb頁(yè)面時(shí)會(huì)包含包中的CSS和JavaScript文件。

定義資源包

資源包指定為繼承yii\web\AssetBundle的PHP類(lèi)，包名為可自動(dòng)加載的PHP類(lèi)名， 在資源包類(lèi)中，要指定資源所在位置，包含哪些CSS和JavaScript文件以及和其他包的依賴(lài)關(guān)系。

如下代碼定義基礎(chǔ)應(yīng)用模板使用的主要資源包：

<?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 類(lèi)指定資源文件放在 @webroot 目錄下，對(duì)應(yīng)的URL為 @web，資源包中包含一個(gè)CSS文件 css/site.css，沒(méi)有JavaScript文件， 依賴(lài)其他兩個(gè)包 yii\web\YiiAsset 和 yii\bootstrap\BootstrapAsset， 關(guān)于yii\web\AssetBundle 的屬性的更多詳細(xì)如下所述：

yii\web\AssetBundle::sourcePath: 指定包包含資源文件的根目錄， 當(dāng)根目錄不能被Web訪問(wèn)時(shí)該屬性應(yīng)設(shè)置，否則，應(yīng)設(shè)置 yii\web\AssetBundle::basePath 屬性和yii\web\AssetBundle::baseUrl。 路徑別名 可在此處使用；

yii\web\AssetBundle::basePath: 指定包含資源包中資源文件并可Web訪問(wèn)的目錄， 當(dāng)指定yii\web\AssetBundle::sourcePath 屬性， 資源管理器 會(huì)發(fā)布包的資源到一個(gè)可Web訪問(wèn)并覆蓋該屬性， 如果你的資源文件在一個(gè)Web可訪問(wèn)目錄下，應(yīng)設(shè)置該屬性，這樣就不用再發(fā)布了。 路徑別名 可在此處使用。

yii\web\AssetBundle::baseUrl: 指定對(duì)應(yīng)到y(tǒng)ii\web\AssetBundle::basePath目錄的URL， 和 yii\web\AssetBundle::basePath 類(lèi)似，如果你指定 yii\web\AssetBundle::sourcePath 屬性， 資源管理器 會(huì)發(fā)布這些資源并覆蓋該屬性，路徑別名 可在此處使用。

yii\web\AssetBundle::js: 一個(gè)包含該資源包JavaScript文件的數(shù)組，注意正斜杠"/"應(yīng)作為目錄分隔符， 每個(gè)JavaScript文件可指定為以下兩種格式之一：

相對(duì)路徑表示為本地JavaScript文件 (如 js/main.js)，文件實(shí)際的路徑在該相對(duì)路徑前加上 yii\web\AssetManager::basePath，文件實(shí)際的URL在該路徑前加上yii\web\AssetManager::baseUrl。

絕對(duì)URL地址表示為外部JavaScript文件，如 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: 一個(gè)包含該資源包JavaScript文件的數(shù)組，該數(shù)組格式和 yii\web\AssetBundle::js 相同。

yii\web\AssetBundle::depends: 一個(gè)列出該資源包依賴(lài)的其他資源包（后兩節(jié)有詳細(xì)介紹）。

yii\web\AssetBundle::jsOptions: 當(dāng)調(diào)用yii\web\View::registerJsFile()注冊(cè)該包 每個(gè) JavaScript文件時(shí)， 指定傳遞到該方法的選項(xiàng)。

yii\web\AssetBundle::cssOptions: 當(dāng)調(diào)用yii\web\View::registerCssFile()注冊(cè)該包 每個(gè) css文件時(shí)， 指定傳遞到該方法的選項(xiàng)。

yii\web\AssetBundle::publishOptions: 當(dāng)調(diào)用yii\web\AssetManager::publish()發(fā)布該包資源文件到Web目錄時(shí) 指定傳遞到該方法的選項(xiàng)，僅在指定了yii\web\AssetBundle::sourcePath屬性時(shí)使用。

資源位置

資源根據(jù)它們的位置可以分為：

源資源: 資源文件和PHP源代碼放在一起，不能被Web直接訪問(wèn)，為了使用這些源資源，它們要拷貝到一個(gè)可Web訪問(wèn)的Web目錄中 成為發(fā)布的資源，這個(gè)過(guò)程稱(chēng)為發(fā)布資源，隨后會(huì)詳細(xì)介紹。

發(fā)布資源: 資源文件放在可通過(guò)Web直接訪問(wèn)的Web目錄中；

外部資源: 資源文件放在你的Web應(yīng)用不同的Web服務(wù)器上；

當(dāng)定義資源包類(lèi)時(shí)候，如果你指定了yii\web\AssetBundle::sourcePath 屬性，就表示任何使用相對(duì)路徑的資源會(huì)被 當(dāng)作源資源；如果沒(méi)有指定該屬性，就表示這些資源為發(fā)布資源（因此應(yīng)指定yii\web\AssetBundle::basePath 和 yii\web\AssetBundle::baseUrl 讓Yii知道它們的位置）。

推薦將資源文件放到Web目錄以避免不必要的發(fā)布資源過(guò)程，這就是之前的例子指定 yii\web\AssetBundle::basePath 而不是 yii\web\AssetBundle::sourcePath.

對(duì)于 擴(kuò)展來(lái)說(shuō)，由于它們的資源和源代碼都在不能Web訪問(wèn)的目錄下， 在定義資源包類(lèi)時(shí)必須指定yii\web\AssetBundle::sourcePath屬性。

注意: yii\web\AssetBundle::sourcePath 屬性不要用@webroot/assets，該路徑默認(rèn)為 yii\web\AssetManager資源管理器將源資源發(fā)布后存儲(chǔ)資源的路徑，該路徑的所有內(nèi)容會(huì)認(rèn)為是臨時(shí)文件， 可能會(huì)被刪除。

資源依賴(lài)

當(dāng)Web頁(yè)面包含多個(gè)CSS或JavaScript文件時(shí)，它們有一定的先后順序以避免屬性覆蓋， 例如，Web頁(yè)面在使用jQuery UI小部件前必須確保jQuery JavaScript文件已經(jīng)被包含了， 我們稱(chēng)這種資源先后次序稱(chēng)為資源依賴(lài)。

資源依賴(lài)主要通過(guò)yii\web\AssetBundle::depends 屬性來(lái)指定， 在AppAsset 示例中，資源包依賴(lài)其他兩個(gè)資源包： yii\web\YiiAsset 和 yii\bootstrap\BootstrapAsset 也就是該資源包的CSS和JavaScript文件要在這兩個(gè)依賴(lài)包的文件包含 之后 才包含。

資源依賴(lài)關(guān)系是可傳遞，也就是人說(shuō)A依賴(lài)B，B依賴(lài)C，那么A也依賴(lài)C。

資源選項(xiàng)

可指定yii\web\AssetBundle::cssOptions 和 yii\web\AssetBundle::jsOptions 屬性來(lái)自定義頁(yè)面包含CSS和JavaScript文件的方式， 這些屬性值會(huì)分別傳遞給 yii\web\View::registerCssFile() 和 yii\web\View::registerJsFile() 方法， 在視圖 調(diào)用這些方法包含CSS和JavaScript文件時(shí)。

注意: 在資源包類(lèi)中設(shè)置的選項(xiàng)會(huì)應(yīng)用到該包中 每個(gè) CSS/JavaScript 文件，如果想對(duì)每個(gè)文件使用不同的選項(xiàng)， 應(yīng)創(chuàng)建不同的資源包并在每個(gè)包中使用一個(gè)選項(xiàng)集。

例如，只想IE9或更高的瀏覽器包含一個(gè)CSS文件，可以使用如下選項(xiàng)：

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

這會(huì)是包中的CSS文件使用以下HTML標(biāo)簽包含進(jìn)來(lái)：

<!--[if lte IE9]>

<link rel="stylesheet" href="path/to/foo.css">

<![endif]-->

為鏈接標(biāo)簽包含<noscript>可使用如下代碼：

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

為使JavaScript文件包含在頁(yè)面head區(qū)域（JavaScript文件默認(rèn)包含在body的結(jié)束處）使用以下選項(xiàng)：

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

Bower 和 NPM 資源

大多數(shù) JavaScript/CSS 包通過(guò)Bower 和/或 NPM管理， 如果你的應(yīng)用或擴(kuò)展使用這些包，推薦你遵循以下步驟來(lái)管理庫(kù)中的資源：

修改應(yīng)用或擴(kuò)展的 composer.json 文件將包列入require 中， 應(yīng)使用bower-asset/PackageName (Bower包) 或 npm-asset/PackageName (NPM包)來(lái)對(duì)應(yīng)庫(kù)。

創(chuàng)建一個(gè)資源包類(lèi)并將你的應(yīng)用或擴(kuò)展要使用的JavaScript/CSS 文件列入到類(lèi)中， 應(yīng)設(shè)置 yii\web\AssetBundle::sourcePath 屬性為@bower/PackageName 或 @npm/PackageName， 因?yàn)楦鶕?jù)別名Composer會(huì)安裝Bower或NPM包到對(duì)應(yīng)的目錄下。

注意: 一些包會(huì)將它們分布式文件放到一個(gè)子目錄中，對(duì)于這種情況，應(yīng)指定子目錄作為 yii\web\AssetBundle::sourcePath屬性值，例如，yii\web\JqueryAsset使用 @bower/jquery/dist 而不是 @bower/jquery。

使用資源包

為使用資源包，在視圖中調(diào)用yii\web\AssetBundle::register()方法先注冊(cè)資源， 例如，在視圖模板可使用如下代碼注冊(cè)資源包：

use app\assets\AppAsset;

AppAsset::register($this); // $this 代表視圖對(duì)象

如果在其他地方注冊(cè)資源包，應(yīng)提供視圖對(duì)象，如在 小部件 類(lèi)中注冊(cè)資源包， 可以通過(guò) $this->view 獲取視圖對(duì)象。

當(dāng)在視圖中注冊(cè)一個(gè)資源包時(shí)，在背后Yii會(huì)注冊(cè)它所依賴(lài)的資源包，如果資源包是放在Web不可訪問(wèn)的目錄下，會(huì)被發(fā)布到可訪問(wèn)的目錄， 后續(xù)當(dāng)視圖渲染頁(yè)面時(shí)，會(huì)生成這些注冊(cè)包包含的CSS和JavaScript文件對(duì)應(yīng)的<link> 和 <script> 標(biāo)簽， 這些標(biāo)簽的先后順序取決于資源包的依賴(lài)關(guān)系以及在 yii\web\AssetBundle::css和yii\web\AssetBundle::js 的列出來(lái)的前后順序。

自定義資源包

Yii通過(guò)名為 assetManager的應(yīng)用組件實(shí)現(xiàn)[[yii\web\AssetManager] 來(lái)管理應(yīng)用組件， 通過(guò)配置yii\web\AssetManager::bundles 屬性，可以自定義資源包的行為，例如，yii\web\JqueryAsset 資源包默認(rèn)從jquery Bower包中使用jquery.js 文件， 為了提高可用性和性能，你可能需要從Google服務(wù)器上獲取jquery文件，可以在應(yīng)用配置中配置assetManager，如下所示：

return [

 // ...

 'components' => [

  'assetManager' => [

   'bundles' => [

    'yii\web\JqueryAsset' => [

     'sourcePath' => null, // 一定不要發(fā)布該資源

     'js' => [

      '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',

     ]

    ],

   ],

  ],

 ],

];

可通過(guò)類(lèi)似yii\web\AssetManager::bundles配置多個(gè)資源包，數(shù)組的鍵應(yīng)為資源包的類(lèi)名（最開(kāi)頭不要反斜杠）， 數(shù)組的值為對(duì)應(yīng)的配置數(shù)組.

提示: 可以根據(jù)條件判斷使用哪個(gè)資源，如下示例為如何在開(kāi)發(fā)環(huán)境用jquery.js，否則用jquery.min.js：

'yii\web\JqueryAsset' => [

 'js' => [

  YII_ENV_DEV ? 'jquery.js' : 'jquery.min.js'

 ]

],

可以設(shè)置資源包的名稱(chēng)對(duì)應(yīng)false來(lái)禁用想禁用的一個(gè)或多個(gè)資源包，當(dāng)視圖中注冊(cè)一個(gè)禁用資源包， 視圖不會(huì)包含任何該包的資源以及不會(huì)注冊(cè)它所依賴(lài)的包，例如，為禁用yii\web\JqueryAsset，可以使用如下配置：

return [

 // ...

 'components' => [

  'assetManager' => [

   'bundles' => [

    'yii\web\JqueryAsset' => false,

   ],

  ],

 ],

];

可設(shè)置yii\web\AssetManager::bundles為false禁用 所有 的資源包。

資源部署

有時(shí)你想"修復(fù)" 多個(gè)資源包中資源文件的錯(cuò)誤/不兼容，例如包A使用1.11.1版本的jquery.min.js， 包B使用2.1.1版本的jquery.js，可自定義每個(gè)包來(lái)解決這個(gè)問(wèn)題，更好的方式是使用資源部署特性來(lái)部署不正確的資源為想要的， 為此，配置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的鍵為你想要修復(fù)的資源名，值為你想要使用的資源路徑， 當(dāng)視圖注冊(cè)資源包，在yii\web\AssetBundle::css 和 yii\web\AssetBundle::js 數(shù)組中每個(gè)相關(guān)資源文件會(huì)和該部署進(jìn)行對(duì)比， 如果數(shù)組任何鍵對(duì)比為資源文件的最后文件名（如果有的話前綴為 yii\web\AssetBundle::sourcePath），對(duì)應(yīng)的值為替換原來(lái)的資源。 例如，資源文件my/path/to/jquery.js 匹配鍵 jquery.js.

注意: 只有相對(duì)相對(duì)路徑指定的資源對(duì)應(yīng)到資源部署，替換的資源路徑可以為絕對(duì)路徑，也可為和yii\web\AssetManager::basePath相關(guān)的路徑。

資源發(fā)布

如前所述，如果資源包放在Web不能訪問(wèn)的目錄，當(dāng)視圖注冊(cè)資源時(shí)資源會(huì)被拷貝到一個(gè)Web可訪問(wèn)的目錄中， 這個(gè)過(guò)程稱(chēng)為資源發(fā)布，yii\web\AssetManager會(huì)自動(dòng)處理該過(guò)程。

資源默認(rèn)會(huì)發(fā)布到@webroot/assets目錄，對(duì)應(yīng)的URL為@web/assets， 可配置yii\web\AssetManager::basePath 和 yii\web\AssetManager::baseUrl 屬性自定義發(fā)布位置。

除了拷貝文件方式發(fā)布資源，如果操作系統(tǒng)和Web服務(wù)器允許可以使用符號(hào)鏈接，該功能可以通過(guò)設(shè)置 yii\web\AssetManager::linkAssets 為 true 來(lái)啟用。

return [

 // ...

 'components' => [

  'assetManager' => [

   'linkAssets' => true,

  ],

 ],

];

使用以上配置，資源管理器會(huì)創(chuàng)建一個(gè)符號(hào)鏈接到要發(fā)布的資源包源路徑，這比拷貝文件方式快并能確保發(fā)布的資源一直為最新的。

常用資源包

Yii框架定義許多資源包，如下資源包是最常用，可在你的應(yīng)用或擴(kuò)展代碼中引用它們。

yii\web\YiiAsset: 主要包含yii.js 文件，該文件完成模塊JavaScript代碼組織功能， 也為 data-method 和 data-confirm屬性提供特別支持和其他有用的功能。

yii\web\JqueryAsset: 包含從jQuery bower 包的jquery.js文件。

yii\bootstrap\BootstrapAsset: 包含從Twitter Bootstrap 框架的CSS文件。

yii\bootstrap\BootstrapPluginAsset: 包含從Twitter Bootstrap 框架的JavaScript 文件來(lái)支持Bootstrap JavaScript插件。

yii\jui\JuiAsset: 包含從jQuery UI庫(kù)的CSS 和 JavaScript 文件。

如果你的代碼需要jQuery, jQuery UI 或 Bootstrap，應(yīng)盡量使用這些預(yù)定義資源包而非自己創(chuàng)建， 如果這些包的默認(rèn)配置不能滿足你的需求，可以自定義配置，詳情參考自定義資源包。

資源轉(zhuǎn)換

除了直接編寫(xiě)CSS 和/或 JavaScript代碼，開(kāi)發(fā)人員經(jīng)常使用擴(kuò)展語(yǔ)法來(lái)編寫(xiě)，再使用特殊的工具將它們轉(zhuǎn)換成CSS/Javascript。 例如，對(duì)于CSS代碼可使用LESS 或 SCSS， 對(duì)于JavaScript 可使用 TypeScript。

可將使用擴(kuò)展語(yǔ)法的資源文件列到資源包的yii\web\AssetBundle::css 和 yii\web\AssetBundle::js中，如下所示：

class AppAsset extends AssetBundle

{

 public $basePath = '@webroot';

 public $baseUrl = '@web';

 public $css = [

  'css/site.less',

 ];

 public $js = [

  'js/site.ts',

 ];

 public $depends = [

  'yii\web\YiiAsset',

  'yii\bootstrap\BootstrapAsset',

 ];

}

當(dāng)在視圖中注冊(cè)一個(gè)這樣的資源包，yii\web\AssetManager資源管理器會(huì)自動(dòng)運(yùn)行預(yù)處理工具將使用擴(kuò)展語(yǔ)法 的資源轉(zhuǎn)換成CSS/JavaScript，當(dāng)視圖最終渲染頁(yè)面時(shí)，在頁(yè)面中包含的是CSS/Javascipt文件，而不是原始的擴(kuò)展語(yǔ)法代碼文件。

Yii使用文件擴(kuò)展名來(lái)表示資源使用哪種擴(kuò)展語(yǔ)法，默認(rèn)可以識(shí)別如下語(yǔ)法和文件擴(kuò)展名：

LESS: .less

SCSS: .scss

Stylus: .styl

CoffeeScript: .coffee

TypeScript: .ts

Yii依靠安裝的預(yù)處理工具來(lái)轉(zhuǎn)換資源，例如，為使用LESS，應(yīng)安裝lessc 預(yù)處理命令。

可配置yii\web\AssetManager::converter自定義預(yù)處理命令和支持的擴(kuò)展語(yǔ)法，如下所示：

return [

 'components' => [

  'assetManager' => [

   'converter' => [

    'class' => 'yii\web\AssetConverter',

    'commands' => [

     'less' => ['css', 'lessc {from} {to} --no-color'],

     'ts' => ['js', 'tsc --out {to} {from}'],

    ],

   ],

  ],

 ],

];

如上所示，通過(guò)yii\web\AssetConverter::commands 屬性指定支持的擴(kuò)展語(yǔ)法， 數(shù)組的鍵為文件擴(kuò)展名（前面不要.），數(shù)組的值為目標(biāo)資源文件擴(kuò)展名和執(zhí)行資源轉(zhuǎn)換的命令， 命令中的標(biāo)記 {from} 和{to}會(huì)分別被源資源文件路徑和目標(biāo)資源文件路徑替代。

補(bǔ)充: 除了以上方式，也有其他的方式來(lái)處理擴(kuò)展語(yǔ)法資源，例如，可使用編譯工具如grunt 來(lái)監(jiān)控并自動(dòng)轉(zhuǎn)換擴(kuò)展語(yǔ)法資源，此時(shí)，應(yīng)使用資源包中編譯后的CSS/Javascript文件而不是原始文件。

合并和壓縮資源

一個(gè)Web頁(yè)面可以包含很多CSS 和/或 JavaScript 文件，為減少HTTP 請(qǐng)求和這些下載文件的大小， 通常的方式是在頁(yè)面中合并并壓縮多個(gè)CSS/JavaScript 文件為一個(gè)或很少的幾個(gè)文件，并使用壓縮后的文件而不是原始文件。

補(bǔ)充: 合并和壓縮資源通常在應(yīng)用在產(chǎn)品上線模式，在開(kāi)發(fā)模式下使用原始的CSS/JavaScript更方便調(diào)試。

接下來(lái)介紹一種合并和壓縮資源文件而不需要修改已有代碼的方式：

找出應(yīng)用中所有你想要合并和壓縮的資源包，

將這些包分成一個(gè)或幾個(gè)組，注意每個(gè)包只能屬于其中一個(gè)組，

合并/壓縮每個(gè)組里CSS文件到一個(gè)文件，同樣方式處理JavaScript文件，

為每個(gè)組定義新的資源包：

設(shè)置yii\web\AssetBundle::css 和 yii\web\AssetBundle::js 屬性分別為壓縮后的CSS和JavaScript文件；

自定義設(shè)置每個(gè)組內(nèi)的資源包，設(shè)置資源包的yii\web\AssetBundle::css 和 yii\web\AssetBundle::js 屬性為空, 并設(shè)置它們的 yii\web\AssetBundle::depends 屬性為每個(gè)組新創(chuàng)建的資源包。

使用這種方式，當(dāng)在視圖中注冊(cè)資源包時(shí)，會(huì)自動(dòng)觸發(fā)原始包所屬的組資源包的注冊(cè)，然后，頁(yè)面就會(huì)包含以合并/壓縮的資源文件， 而不是原始文件。

示例

使用一個(gè)示例來(lái)解釋以上這種方式：

鑒定你的應(yīng)用有兩個(gè)頁(yè)面X 和 Y，頁(yè)面X使用資源包A，B和C，頁(yè)面Y使用資源包B，C和D。

有兩種方式劃分這些資源包，一種使用一個(gè)組包含所有資源包，另一種是將（A,B,C）放在組X，（B，C，C）放在組Y， 哪種方式更好？第一種方式優(yōu)點(diǎn)是兩個(gè)頁(yè)面使用相同的已合并CSS和JavaScript文件使HTTP緩存更高效，另一方面，由于單個(gè)組包含所有文件， 已合并的CSS和Javascipt文件會(huì)更大，因此會(huì)增加文件傳輸時(shí)間，在這個(gè)示例中，我們使用第一種方式，也就是用一個(gè)組包含所有包。

補(bǔ)充: 將資源包分組并不是無(wú)價(jià)值的，通常要求分析現(xiàn)實(shí)中不同頁(yè)面各種資源的數(shù)據(jù)量，開(kāi)始時(shí)為簡(jiǎn)便使用一個(gè)組。

在所有包中使用工具(例如 Closure Compiler, YUI Compressor) 來(lái)合并和壓縮CSS和JavaScript文件， 注意合并后的文件滿足包間的先后依賴(lài)關(guān)系，例如，如果包A依賴(lài)B，B依賴(lài)C和D，那么資源文件列表以C和D開(kāi)始，然后為B最后為A。

合并和壓縮之后，會(huì)得到一個(gè)CSS文件和一個(gè)JavaScript文件，假定它們的名稱(chēng)為all-xyz.css 和 all-xyz.js， xyz 為使文件名唯一以避免HTTP緩存問(wèn)題的時(shí)間戳或哈希值。

現(xiàn)在到最后一步了，在應(yīng)用配置中配置yii\web\AssetManager 資源管理器如下所示：

return [

 'components' => [

  'assetManager' => [

   'bundles' => [

    'all' => [

     'class' => 'yii\web\AssetBundle',

     'basePath' => '@webroot/assets',

     'baseUrl' => '@web/assets',

     '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']],

   ],

  ],

 ],

];

如自定義資源包 小節(jié)中所述，如上配置改變每個(gè)包的默認(rèn)行為， 特別是包A、B、C和D不再包含任何資源文件，都依賴(lài)包含合并后的all-xyz.css 和 all-xyz.js文件的包all， 因此，對(duì)于頁(yè)面X會(huì)包含這兩個(gè)合并后的文件而不是包A、B、C的原始文件，對(duì)于頁(yè)面Y也是如此。

最后有個(gè)方法更好地處理上述方式，除了直接修改應(yīng)用配置文件，可將自定義包數(shù)組放到一個(gè)文件，在應(yīng)用配置中根據(jù)條件包含該文件，例如：

return [

 'components' => [

  'assetManager' => [

   'bundles' => require(__DIR__ . '/' . (YII_ENV_PROD ? 'assets-prod.php' : 'assets-dev.php')), 

  ],

 ],

];

如上所示，在產(chǎn)品上線模式下資源包數(shù)組存儲(chǔ)在assets-prod.php文件中，不是產(chǎn)品上線模式存儲(chǔ)在assets-dev.php文件中。

使用 asset 命令

Yii提供一個(gè)名為asset控制臺(tái)命令來(lái)使上述操作自動(dòng)處理。

為使用該命令，應(yīng)先創(chuàng)建一個(gè)配置文件設(shè)置哪些資源包要合并以及分組方式，可使用asset/template 子命令來(lái)生成一個(gè)模板， 然后修改模板成你想要的。

yii asset/template assets.php

該命令在當(dāng)前目錄下生成一個(gè)名為assets.php的文件，文件的內(nèi)容類(lèi)似如下：

<?php

/**

 * 為控制臺(tái)命令"yii asset"使用的配置文件

 * 注意在控制臺(tái)環(huán)境下，一些路徑別名如 '@webroot' 和 '@web' 不會(huì)存在

 * 請(qǐng)定義不存在的路徑別名

 */

return [

 // 為JavaScript文件壓縮修改 command/callback 

 'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',

 // 為CSS文件壓縮修改command/callback 

 'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',

 // 要壓縮的資源包列表

 'bundles' => [

  // 'yii\web\YiiAsset',

  // 'yii\web\JqueryAsset',

 ],

 // 資源包壓縮后的輸出

 'targets' => [

  'all' => [

   'class' => 'yii\web\AssetBundle',

   'basePath' => '@webroot/assets',

   'baseUrl' => '@web/assets',

   'js' => 'js/all-{hash}.js',

   'css' => 'css/all-{hash}.css',

  ],

 ],

 // 資源管理器配置:

 'assetManager' => [

 ],

];

應(yīng)修改該文件的bundles的選項(xiàng)指定哪些包你想要合并，在targets選項(xiàng)中應(yīng)指定這些包如何分組，如前述的可以指定一個(gè)或多個(gè)組。

注意: 由于在控制臺(tái)應(yīng)用別名 @webroot and @web 不可用，應(yīng)在配置中明確指定它們。

JavaScript文件會(huì)被合并壓縮后寫(xiě)入到j(luò)s/all-{hash}.js文件，其中 {hash} 會(huì)被結(jié)果文件的哈希值替換。

jsCompressor 和 cssCompressor 選項(xiàng)指定控制臺(tái)命令或PHP回調(diào)函數(shù)來(lái)執(zhí)行JavaScript和CSS合并和壓縮， Yii默認(rèn)使用Closure Compiler來(lái)合并JavaScript文件， 使用YUI Compressor來(lái)合并CSS文件， 你應(yīng)手工安裝這些工具或修改選項(xiàng)使用你喜歡的工具。

根據(jù)配置文件，可執(zhí)行asset 命令來(lái)合并和壓縮資源文件并生成一個(gè)新的資源包配置文件assets-prod.php:

yii asset assets.php config/assets-prod.php