1.bower 安装所需前端库

本文默认你已经知道bower 的使用

根目录下创建.bowerrc 自定义安装目录

{
    "directory": "webroot/asset"
}

bower init  ##创建bower.json
bower install jquery --save
bower install vue --save
bower install zui --save

命令执行完之后，在webroot下的asset 目录会安装好jquery、vue、zui库

2.运用cakeminify 对资源进行管理

1.安装

composer require visonforcoding/cakeminify

2.配置
在项目的配置目录里新建配置文件minify.php

return[
    'minjs'=>[
       'source'=>[
           '/asset/jquery/dist/jquery.js',
           '/asset/zui/dist/js/zui.js',
           '/asset/vue/dist/vue.js'
       ],
       'desc'=>'/dist/main.js'
    ],
    'mincss'=>[
       'source'=>[
           '/asset/zui/dist/css/zui.css',
           '/css/view.css',
       ],
       'desc'=>'/dist/default.css'
    ],
    
];

在bootstrap.php 中load插件和配置


Plugin::load('Cakeminify', ['bootstrap' => false, 'routes' => true]);

Configure::load('minify');

3.shell
合并压缩

bin/cake minify start

配置好的desc 目录会出现合并压缩后的文件

4.helper

在template 下使用

  <?= $this->minify->generateAsset() ?>

5.结果输出

输出的结果有2种模式，开发模式和生产模式。取决与app.php 的debug 配置
生产模式:

<link rel="stylesheet" href="/dist/default.css"/>
<script src="/dist/main.js"></script>

开发模式:

<link rel="stylesheet" href="/asset/zui/dist/css/zui.css"/>
<link rel="stylesheet" href="/css/view.css"/>
<script src="/asset/jquery/dist/jquery.js"></script>
<script src="/asset/zui/dist/js/zui.js"></script>
<script src="/asset/vue/dist/vue.js"></script>