mzphp 模板引擎 - 静态文件

语法:

<!--{static source_file target_file is_compress}-->

说明:

source_file 文件后缀为 scss 或者 js 时,会调用对应的编译类对文件进行编译和生成,生成的文件路径:static/{$target_file}

is_compress 参数可以为 0 或 1(默认 1),为 1 时,source_file 压缩,反之而不压缩。

注:支持第三方压缩 js 或者 css 文件,当 js 或 css 所在目录下,有同名文件:xxx.min.js 或者 xxx.min.css,则优先当做压缩文件来使用,一旦存在 .min 文件,模板引擎将不再使用系统压缩引擎来压缩 js 或者 css。

在 debug 开启后,每次访问页面,都会生成一遍静态文件。在代码 push 的时候,需要产生的所有静态文件提交(线上不会再编译静态资源)

规范

  • 建议编译后的缓存文件名都使用 _ 开头命名,这样后期方便清理。
  • 编译后的 css 文件只能在原 css 目录(可选,如果css 包含路径信息的,必须写死,否则相对路径的图片可能加载失败)
  • 编译后的 js 文件最好在原 js 目录(可选,js 文件对路径有依赖的必须写绝对路径或者生成到原目录)

静态文件寻找先后顺序

  1. static/
  2. view/ (模板目录)

关于 css sprite

当 source_file 以 * 结尾时, 识别为 css sprite 模式,程序将会对 source_file 目录中的所有文件进行合并,读取所有图片的 size ,生成对应的 scss 文件和合并的 png 文件:

  1. targetfile.scss (命名方式:.filename-png,文件名中和.替换成-)
  2. target_file.png(不需要重复的图片合并文件)
  3. target_file-x.png (需要 x 轴重复的图片合并文件)
  4. target_file-y.png(需要 y 轴重复的图片合并文件)

实例

<!--{static scss/png/* scss/sprite}-->
<!--{static scss/test.scss scss/_a.css}-->
<!--{static js/test1.js js/_a.js}-->
<!--{static js/test2.js js/_a.js 0}-->
<!--{static js/test3.js js/_a.js 1}-->

test.scss 的文件内容为:

@import 'sprite';

.find{
    @extend .loading-png;
}

在以上例子中,系统做了以下处理:

1.先合并 scss/png/ 中所有图片为: scss/sprite.png,同时生成坐标 scss 文件:scss/sprite.scss

2.scss/test.scss 中调用 @import 'sprite'; 然后用 scss @extend语法来继承 icon ,图片路径中.会变成-,更具体可以先成生一次后,打开生成后的sprite.scss看看.

3.开启合并文件 js/_a.js ,并将 js/test1.min.js(存在的情况下)或 js/test1.js(mzphp JS 压缩引擎压缩后) 写入。

4.读取 js/test2.min.js(存在的情况下)或 js/test2.js(不压缩),写入 js/_a.js 尾部。

5.读取 js/test3.min.js(存在的情况下)或 js/test3.js(mzphp JS 压缩引擎压缩后),写入 js/_a.js

6.<!--{static scss/png/* scss/sprite}--> 替换成 空

7.<!--{static scss/test.scss scss/_a.css}--> 替换成 <link rel="stylesheet" href="scss/_a.css">

8.<!--{static js/test1.js js/_a.js}--> 替换成 <script src="js/_a.js"></ script>

9.<!--{static js/test2.js js/_a.js 0}--> <!--{static js/test3.js js/_a.js 1}--> 均替换成空

results matching ""

    No results matching ""