/static-resource-management-system-demo

展示静态资源管理系统设计思路的demo

Primary LanguagePHP

展示静态资源管理系统设计思路的demo

环境依赖：

  1. fis
  2. php-cgi
  3. java

运行方法：

  1. 启动内置服务器
    • fis server start
  2. 进入项目目录
    • cd project
  3. 构建项目
    • 预览开发效果命令： fis release
    • 预览开发效果，并监听文件变化命令： fis release -w
    • 预览开发效果，并监听文件变化，同时自动刷新浏览器命令：fis release -wL
    • 预览文件压缩，加域名，资源合并，csssprite等效果，并监听文件变化，同时自动刷新浏览器命令：fis release -oDpwL
  4. 刷新页面（ http://127.0.0.1:8080/ ），查看效果

ps: 如果你本地没有cgi环境，请在执行fis release命令时增加额外的 -d path/to/apache/htdocs 把项目部署到支持php的服务器根目录下，也能看到效果。

目录说明：

  • js目录下放js文件
  • css目录下放css文件
  • img目录下放图片文件
  • page目录下放php页面文件
  • fis-conf.js 文件是项目配置
  • index.php 文件是入口php
  • Resource.class.php 是静态资源管理框架

php页面示例

代码

<html>
<head>
    <title>my page</title>
    <?php css();?> <!-- 在这里输出link标签 -->
    <?php import('css/demo.css');?> <!-- 收集资源 -->
    <?php import('css/demo2.css');?> <!-- 收集资源 -->
</head>
<body>
    <img src="img/baidu.png">
    <div class="test1"></div>
    <div class="test2"></div>
    <?php import('js/demo.js');?> <!-- 收集资源 -->
    <?php js();?> <!-- 在这里输出script标签 -->
</body>
</html>

api说明

  • import($id) : 引用一个资源文件，可以是js、css文件
  • css() : 在调用该函数的位置，将 import($id) 函数收集到的css资源，以<link href="xxx">标签的形式输出
  • js() : 在调用该函数的位置，将 import($id) 函数收集到的js资源，以<script src="xxx">标签的形式输出

配置说明

fis.config.merge({
    roadmap : {
        domain : {
            //所有css文件添加http://localhost:8080作为域名
            '**.css' : 'http://localhost:8080'
        },
        path : [
            {
                //所有的js文件
                reg : '**.js',
                //发布到/static/xxx目录下
                release : '/static/$&'
            },
            {
                //所有的css文件
                reg : '**.css',
                //发布到/static/xxx目录下
                release : '/static/$&'
            },
            {
                //readme.md文件不发布
                reg : /\/readme\.md$/i,
                release : false
            }
        ]
    },
    pack: {
        //所有js文件合并成一个main.js文件
        'pkg/main.js': '**.js',
        //所有css、less文件合并成一个main.css文件
        'pkg/main.css': [ '**.css', '**.less' ]
    }
});