js、css包管理 以及合并压缩
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>
