閱讀(20.8k) 書簽贊(0) 我要糾錯(cuò)

前端資源（Assets）

2018-02-24 15:40 更新

資源

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

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

資源包

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

定義資源包

資源包指定為繼承yii\web\AssetBundle的PHP類，包名為可自動(dòng)加載的PHP類名，在資源包類中，要指定資源所在位置，包含哪些CSS和JavaScript文件以及和其他包的依賴關(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?類指定資源文件放在?@webroot?目錄下，對(duì)應(yīng)的URL為?@web，資源包中包含一個(gè)CSS文件?css/site.css，沒有JavaScript文件，依賴其他兩個(gè)包 yii\web\YiiAsset 和 yii\bootstrap\BootstrapAsset，關(guān)于yii\web\AssetBundle 的屬性的更多詳細(xì)如下所述：

yii\web\AssetBundle::sourcePath: 指定包包含資源文件的根目錄，當(dāng)根目錄不能被Web訪問時(shí)該屬性應(yīng)設(shè)置，否則，應(yīng)設(shè)置 yii\web\AssetBundle::basePath 屬性和yii\web\AssetBundle::baseUrl。?路徑別名?可在此處使用；
yii\web\AssetBundle::basePath: 指定包含資源包中資源文件并可Web訪問的目錄，當(dāng)指定yii\web\AssetBundle::sourcePath 屬性，?資源管理器?會(huì)發(fā)布包的資源到一個(gè)可Web訪問并覆蓋該屬性，如果你的資源文件在一個(gè)Web可訪問目錄下，應(yīng)設(shè)置該屬性，這樣就不用再發(fā)布了。?路徑別名?可在此處使用。
yii\web\AssetBundle::baseUrl: 指定對(duì)應(yīng)到y(tǒng)ii\web\AssetBundle::basePath目錄的URL，和 yii\web\AssetBundle::basePath 類似，如果你指定 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è)列出該資源包依賴的其他資源包（后兩節(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直接訪問，為了使用這些源資源，它們要拷貝到一個(gè)可Web訪問的Web目錄中成為發(fā)布的資源，這個(gè)過程稱為發(fā)布資源，隨后會(huì)詳細(xì)介紹。
發(fā)布資源: 資源文件放在可通過Web直接訪問的Web目錄中；
外部資源: 資源文件放在你的Web應(yīng)用不同的Web服務(wù)器上；

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

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

對(duì)于?擴(kuò)展來說，由于它們的資源和源代碼都在不能Web訪問的目錄下，在定義資源包類時(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ì)被刪除。

資源依賴

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

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

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

資源選項(xiàng)

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

注意: 在資源包類中設(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)來：

<!--[if lte IE9]>
<link rel="stylesheet" href="path/to/foo.css">
<![endif]-->

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

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

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

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

Bower 和 NPM 資源

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

修改應(yīng)用或擴(kuò)展的?composer.json?文件將包列入require?中，應(yīng)使用bower-asset/PackageName?(Bower包) 或?npm-asset/PackageName?(NPM包)來對(duì)應(yīng)庫。
創(chuàng)建一個(gè)資源包類并將你的應(yīng)用或擴(kuò)展要使用的JavaScript/CSS 文件列入到類中，應(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ì)象，如在?小部件?類中注冊(cè)資源包，可以通過?$this->view?獲取視圖對(duì)象。

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

自定義資源包

Yii通過名為?assetManager的應(yīng)用組件實(shí)現(xiàn)[[yii\web\AssetManager] 來管理應(yīng)用組件，通過配置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',
                    ]
                ],
            ],
        ],
    ],
];

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

提示: 可以根據(jù)條件判斷使用哪個(gè)資源，如下示例為如何在開發(fā)環(huán)境用jquery.js，否則用jquery.min.js：
'yii\web\JqueryAsset' => [
    'js' => [
        YII_ENV_DEV ? 'jquery.js' : 'jquery.min.js'
    ]
],

可以設(shè)置資源包的名稱對(duì)應(yīng)false來禁用想禁用的一個(gè)或多個(gè)資源包，當(dāng)視圖中注冊(cè)一個(gè)禁用資源包，視圖不會(huì)包含任何該包的資源以及不會(huì)注冊(cè)它所依賴的包，例如，為禁用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è)包來解決這個(gè)問題，更好的方式是使用資源部署特性來部署不正確的資源為想要的，為此，配置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)的值為替換原來的資源。例如，資源文件my/path/to/jquery.js?匹配鍵?jquery.js.

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

資源發(fā)布

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

資源默認(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)鏈接，該功能可以通過設(shè)置 yii\web\AssetManager::linkAssets 為 true 來啟用。

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 文件來支持Bootstrap JavaScript插件。
yii\jui\JuiAsset: 包含從jQuery UI庫的CSS 和 JavaScript 文件。

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

資源轉(zhuǎn)換

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

可將使用擴(kuò)展語法的資源文件列到資源包的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ò)展語法的資源轉(zhuǎn)換成CSS/JavaScript，當(dāng)視圖最終渲染頁面時(shí)，在頁面中包含的是CSS/Javascipt文件，而不是原始的擴(kuò)展語法代碼文件。

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

LESS:?.less
SCSS:?.scss
Stylus:?.styl
CoffeeScript:?.coffee
TypeScript:?.ts

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

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

return [
    'components' => [
        'assetManager' => [
            'converter' => [
                'class' => 'yii\web\AssetConverter',
                'commands' => [
                    'less' => ['css', 'lessc {from} {to} --no-color'],
                    'ts' => ['js', 'tsc --out {to} {from}'],
                ],
            ],
        ],
    ],
];

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

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

合并和壓縮資源

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

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

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

找出應(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è)，然后，頁面就會(huì)包含以合并/壓縮的資源文件，而不是原始文件。

示例

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

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

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

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

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

合并和壓縮之后，會(huì)得到一個(gè)CSS文件和一個(gè)JavaScript文件，假定它們的名稱為all-xyz.css?和?all-xyz.js，?xyz?為使文件名唯一以避免HTTP緩存問題的時(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不再包含任何資源文件，都依賴包含合并后的all-xyz.css?和?all-xyz.js文件的包all，因此，對(duì)于頁面X會(huì)包含這兩個(gè)合并后的文件而不是包A、B、C的原始文件，對(duì)于頁面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)命令來使上述操作自動(dòng)處理。

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

yii asset/template assets.php

該命令在當(dāng)前目錄下生成一個(gè)名為assets.php的文件，文件的內(nè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ì)被合并壓縮后寫入到js/all-{hash}.js文件，其中 {hash} 會(huì)被結(jié)果文件的哈希值替換。

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

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

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

生成的配置文件可以在應(yīng)用配置中包含，如最后一小節(jié)所描述的。

補(bǔ)充: 使用asset?命令并不是唯一一種自動(dòng)合并和壓縮過程的方法，可使用優(yōu)秀的工具grunt來完成這個(gè)過程。

以上內(nèi)容是否對(duì)您有幫助：

← 小部件（Widgets）

擴(kuò)展（Extensions） →

寫筆記

我要補(bǔ)充