展示静态资源管理系统设计思路的demo
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css first commit Jan 11, 2014
img
js first commit Jan 11, 2014
page update readme Jan 11, 2014
README.md
Resource.class.php
fis-conf.js
index.php

README.md

展示静态资源管理系统设计思路的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' ]
    }
});