[TOC]
## JS和CSS合并
- 文件名称：tpl.css，tpl.scss，tpl.js
> 仅需在模板目录下创建文件就会自动生成对应的文件URL连接
> 调用多个模板时CSS或JS始终对应一个URL连接，这个连接会随着模板路径和模板的个数而改变
> 可对CSS和JS进行压缩设置
> CSS和JS代码保存于缓存中并压缩（需设置/.env文件设置TPL_CACHE=true）
#### 代码示例
设置文件/html/www/demo/test/js_css/demo1/tpl.blade.php内容如下
```
<div>Hello TPHP !</div>
```
设置文件/html/www/demo/test/js_css/demo1/tpl.css内容如下
```
body{
background-color: #FEE;
}
_CLASS_{
background-color: #FCC;
}
```
设置文件/html/www/demo/test/js_css/demo1/tpl.js内容如下
```
$(function () {
$('body').append('<div>这是JS生成效果</div>');
$('_CLASS_').append('<div>模板内效果</div>');
});
```
打开网址[http://demo.tphp.com/test/js_css/demo1](http://demo.tphp.com/test/js_css/demo1)获得如下效果
生成源代码
生成的CSS
生成的JS
- 可以看到_CLASS_替换成了模块路径的样式名称，可以根据样式名称定位到模块代码
#### 压缩JS和CSS
编辑/.env文件设置TPL_CACHE=true
生成的CSS
生成的JS
#### 配置JS和CSS
设置文件/html/www/demo/test/js_css/demo2/data.php内容如下
```
<?php
return [
// 调用其他模块样式
'css' => '../demo1',
// 'css' => ['../demo1'], // 或者
// 调用其他模块JS
'js' => '../demo1',
// 'js' => ['../demo1'], // 或者
// tplDelete默认为true
// 设置为false效果：<div class="www_demo_test_js_css_demo2" tpl="www_demo_test_js_css_demo2">...</div>
'tplDelete' => false
];
```
设置文件/html/www/demo/test/js_css/demo2/tpl.blade.php内容如下
```
<div>Hello TPHP !</div>
<div class="demo2">DEMO2演示</div>
```
设置文件/html/www/demo/test/js_css/demo2/tpl.css内容如下
```
_CLASS_ .demo2{
background-color: #CCF;
color: #F00;
}
```
设置文件/html/www/demo/test/js_css/demo2/tpl.js内容如下
```
$(function () {
$('_CLASS_ .demo2').append('\t加了点字符串');
});
```
打开网址[http://demo.tphp.com/test/js_css/demo2](http://demo.tphp.com/test/js_css/demo2)获得如下效果
生成源代码
生成的CSS
生成的JS
#### tpl.scss，scss示例
在模块中有介绍，文件路径/html/www/demo/test/module/tpl.scss
#### 外部JS、CSS设置（设置更灵活）
设置文件/html/www/demo/test/js_css/demo3/data.php内容如下
```
<?php
return [
'css' => [
// 相同demo1路径排重
'../demo1', // 在模板径下相对位置
'@../demo1', // 直接输出路径（指定为head标签中）
'@@../demo1', // 直接输出路径（指定为head标签中）
'http://www.baidu.com/test.css' // 直接输出路径（指定为head标签中），当指定http或https时默认直接输出路径
],
'js' => [
// 相同demo1路径排重
'../demo1',// 在模板径下相对位置
'@../demo1', // 直接输出路径（指定为body标签底部）
'@@../demo1', // 直接输出路径（指定为head标签中）
'http://www.baidu.com/test.js', // 直接输出路径（指定为body标签底部）
'@@http://www.baidu.com/test.js' // head标签中
],
];
```
打开网址[http://demo.tphp.com/test/js_css/demo3](http://demo.tphp.com/test/js_css/demo3)获得如下效果
#### 浏览器型号匹配
- css和scss文件可以混合使用
目前支持的浏览器有
- chrome: 谷歌
- firefox: 火狐
- ie: IE浏览器
- opera: Opera
- edge: Edge
- other: 其他
设置文件/html/www/demo/test/js_css/demo4/tpl.blade.php内容如下
```
<div>谷歌浏览器应用示例</div>
```
设置文件/html/www/demo/test/js_css/demo4/tpl.chrome.css内容如下
```
.chrome {
color: #000;
}
```
设置文件/html/www/demo/test/js_css/demo4/tpl.chrome.js内容如下
```
function is_chrome() {
}
```
设置文件/html/www/demo/test/js_css/demo4/tpl.ie.js内容如下
```
function is_ie() {
}
```
设置文件/html/www/demo/test/js_css/demo4/tpl.ie.scss内容如下
```
.chrome {
color: #000;
}
```
设置文件/html/www/demo/test/js_css/demo4/tpl.js内容如下
```
function no_browser() {
}
```
设置文件/html/www/demo/test/js_css/demo4/tpl.scss内容如下
```
.no_browser {
color: #000;
}
```
以下以谷歌浏览器为例
打开网址[http://demo.tphp.com/test/js_css/demo4](http://demo.tphp.com/test/js_css/demo4)获得如下效果（查看源码）
css 源码
js 源码
