npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fis-endgame

v0.0.4

Published

fis-endgame ====

Downloads

17

Readme

fis-endgame

基于FIS的EndGame解决方案

目录

安装

  • 安装 nodejs&npm

  • 安装 endgame

     npm install fis-endgame -g
     eg -v

快速上手

  1. 使用eg构建EndGame项目

    cd endgame #进入EndGame项目
    eg release

    查看更多使用方法

    eg release -h
  2. 本地预览EndGame项目

    eg server start

    eg server提供PHP服务器与Node.js服务器。PHP服务器性能更好,但是需要安装JAVA与PHP-CGI,不愿意安装的同学可以强制使用Node.js服务器

    eg server start --type node

    浏览调试服务器中发布的内容

    eg server open

    清空eg构建内容

    eg server clean

    使用完毕后,可以关闭调试服务器

    eg server stop

    查看更多使用方法

    eg server -h
  3. 增量构建

    由于EndGame项目必须先进行构建才可以浏览,但是每次执行eg release会比较麻烦,因此eg提供文件监听与自动刷新功能

    文件监听功能使文件修改后自动进行增量编译并发布至调试服务器

    eg server release -w #开启监听

    自动刷新功能使增量编译后,浏览器页面可以自动刷新

    eg server release -wL #开启自动刷新

性能优化

资源压缩

eg release -o

MD5戳

eg release -m

打包合并

eg release -p

组合使用

eg的优化参数都是可以任意组合的,比如希望以上三种优化同时执行,可以使用

eg release -omp #顺序无关

注意事项

使用FIS后,要求所有项目静态资源的引用路径 必须 使用相对路径或相对于项目根目录的绝对路径,不可使用线上路径 (外部资源除外)

举例来说

script标签与link标签

<!--wrong-->
<link rel="stylesheet" href="http://end.baidu.com/css/style.css">
<script src="http://end.baidu.com/js/eg.js" charset="UTF-8"></script>

<!--right-->
<link rel="stylesheet" href="./css/style.css">
<script src="./js/eg.js" charset="UTF-8"></script>

css引用图片

/** wrong **/
#browserBanner {
    display:none;
    position:fixed;
    z-index:20;
    left:0;
    bottom:0;
    width:100%;
    height:50px;
    background:url(http://end.baidu.com/assets/browser.jpg) no-repeat;
    background-size:cover;
}

/** right **/
#browserBanner {
    display:none;
    position:fixed;
    z-index:20;
    left:0;
    bottom:0;
    width:100%;
    height:50px;
    background:url(./assets/browser.jpg) no-repeat;
    background-size:cover;
}

IMG标签引用图片

<!--wrong-->
<img src="http://end.baidu.com/assets/banner.jpg" style="width:100%">

<!--right-->
<img src="./assets/banner.jpg" style="width:100%">

避免内联样式中引用静态资源

<!--wrong-->
<div style="background:url(./assets/browser.jpg) no-repeat"></div>

<!--right-->
#browserBanner {
    background:url(./assets/browser.jpg) no-repeat;
}

<div id="browserBanner"></div>

Javascript中引用资源

必须使用__uri包裹资源路径

//wrong
var objects = [
    {
        'icon'  :   "/games/tiger/logo.png",
        'src'   :   "/games/tiger/index.html?from=list",
    }
]

//right
var objects = [
    {
        'icon'  :   __uri("../games/tiger/logo.png"),  //__uri包裹后可以不考虑脚本执行路径,按照源码文件的相对路径编写
        'src'   :   __uri("/games/tiger/index.html?from=list"),
    }
]

以上针对路径的处理,将本项目的路径统一使用相对路径或绝对路径管理起来,只有使用能够找到实体文件的路径,FIS才能管理资源路径,为资源添加MD5戳以及添加Domain等操作

发布参数

发布时,可以开启FIS的所有优化

eg release -Dompcd /path/to/publish

注意

由于添加了-D参数,FIS将会为所有静态资源路径添加domain信息,如 /games/tiger/logo.png 将会调整为 http://end.baidu.com/games/tiger/logo.png,因此使用-D参数构建后,本地如果需要预览则需要调整调试服务器端口并设置相应的HOST。

具体各个参数的含义可以参考 fis release -h

游戏开发

eg拥有一个默认的游戏配置,以boxgame/buyu为例

var GAME_ID = 'buyu';

fis.config.set('roadmap.domain', 'PLACE_HOLDER/endgame/box/' + GAME_ID);

fis.config.get('roadmap.path').unshift(
    {
        reg: '**.html',
        useDomain: true
    },
    {
        reg: '**',
        query: "?t=${timestamp}"
    }
);

// fis.config.set('settings.postpackager.simple.autoCombine', true);

fis.config.set('deploy', {
    "publish" : {
        bcs: {
            host: 'bcs.duapp.com',
            ak: 'ak',
            sk: 'sk',
            bucket: 'endgame'
        },
        to: '/box/' + GAME_ID,
        replace : {
            from : 'PLACE_HOLDER/endgame/box/',
            to : '/endgame/box/'
        }
    },
    "test" : {
        bcs: {
            host: 'bcs.duapp.com',
            ak: 'ak',
            sk: 'sk',
            bucket: 'endgamedev'
        },
        to: '/box/' + GAME_ID,
        replace : {
            from : 'PLACE_HOLDER/endgame/box/',
            to : '/endgamedev/box/'
        }
    }
});

这个配置中需要关注的是GAME_ID,每个游戏都应该拥有一个独立的GAME_ID

其次是deploy配置中的ak与sk,需要设置为正式环境和测试环境的BCS授权密钥

在完成以上配置后,只需要一条命令就可以完成EndGame的构建、优化与发布

eg release -Dopd test #发布至预上线环境
eg release -Dopd publish #发布至正式环境

在执行完成后,可以直接访问BCS发布路径

http://bcs.pubbcsapp.com/endgamedev/box/buyu/index.html
http://bcs.pubbcsapp.com/endgame/box/buyu/index.html

同时你还可以通过watch与live功能实现本地修改实时上传至BCS环境,上传完成后还可以触发页面的自动刷新,加快开发效率

eg release -Dopd publish -wL

更多资料

fis配置 roadmap详解 FAQ