第九区

一个程序员的经验笔记

Yii2的前端资源Assets

| 暂无评论

Yii2的前端资源是指css、js、图片和视频等静态文件,这些文件必须放到web可访问的文件夹下才能正常访问,而模块化开发时,我们总会希望一个模块的文件能够打包在同一个文件夹下以便于传播和发布。比如,如果我们开发一个小部件widgets,希望把它开源出来放到github或是打包放在什么网站上供人下载,配一个说明文档要求下载者把哪些文件夹放到哪些指定的位置,总会非常地不便,所以最好用Assets进行统一管理。

前端资源主要在视图和小部件里调用,它可以直接调用静态文件,也可以把文件发布到指定文件夹中,甚至还能用扩展语法如LECSS、SCSS、TYPESCRIPT来写相关代码。

 

要使用LECSS等扩展语法,需要安装LECSS并在main.php里进行如下配置:

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

用netbeans开发项目时,netbeans自带LECSS转换功能,非常好用,建议不必采用yii2来完成这一工作。

自定义一个外部资源包可以参考basic演示中的代码:

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

如果需要自动转换LESS,则应该这么写:

<?php
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $sourcePath = '@webroot/less';//指定less文件所在的目录
    public $css = [
        'site.less',//指定less文件
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

 

发表评论

*为必填字段!