oipage 0.1.0-alpha.1 → 0.1.0-alpha.2

package/CHANGELOG

@@ -0,0 +1,38 @@
+v0.1.0:
+    date:
+    changes:
+      - 初始化版本
+        1、命令
+          * --help, -h 获得帮助
+          * --server, -s 启动服务器
+          * --version, -v 查看版本
+          * --config, -c 启动配置文件
+          * --delete 删除文件或文件夹
+          * --copy 复制文件或文件夹
+          * --pick 提取文件夹文件到指定位置
+          * --move 移动文件或文件夹
+          * --network 查看网络信息
+          * --get 发送get请求
+          * --post 发送post请求
+          * --cat 查看文本内容
+          * --run 多进程运行任务
+        2、corejs
+          * animation 动画
+          * throttle 节流函数
+        3、browserjs
+          * getStyle 获取节点样式
+          * onReady 解析完执行
+        4、nodejs
+          * server 服务器
+          * options 命令行参数解析
+          * file 文件相关操作
+          * console 控制台打印
+          * ajax 网络请求
+          * network 网络信息等
+          * data 资源数据
+          * image 图片相关操作
+          * loader 文件解析
+        5、stylecss
+          * 统一浏览器样式 normalize.css
+          * 十二栅格化 rasterize.css
+          * 架屏动画 skeleton.css

package/README.md

@@ -1,20 +1,119 @@
 # [OIPage](https://github.com/oi-contrib/OIPage)
-📰跨端前端框架，支持H5+各种小程序等，并支持扩展前端开发框架（比如使用Vue或React语法开发）
+OI页面快速开发辅助库
 
 <p>
     <a href="https://zxl20070701.github.io/toolbox/#/npm-download?packages=oipage&interval=7">
         <img src="https://img.shields.io/npm/dm/oipage.svg" alt="downloads">
     </a>
     <a href="https://www.npmjs.com/package/oipage">
-        <img src="https://img.shields.io/npm/v/oipage.svg" alt="Version">
+        <img src="https://img.shields.io/npm/v/oipage.svg" alt="npm">
     </a>
-    <a href="https://github.com/zxl20070701/OIPage" target='_blank'>
-        <img alt="GitHub repo stars" src="https://img.shields.io/github/stars/zxl20070701/OIPage?style=social">
+    <a href="https://github.com/oi-contrib/OIPage" target='_blank'>
+        <img alt="GitHub repo stars" src="https://img.shields.io/github/stars/oi-contrib/OIPage?style=social">
     </a>
 </p>
 
 <img src="https://nodei.co/npm/oipage.png?downloads=true&amp;downloadRank=true&amp;stars=true" alt="NPM">
 
+## 使用方式
+
+你可以作为一个命令行使用，那么你需要全局安装：
+
+```shell
+npm install -g oipage
+```
+
+也可以作为项目开发中的一个功能加强，在 package.json 中配置命令或nodejs文件中引入需要的模块使用，那么就在项目中执行安装命令：
+
+```shell
+npm install oipage --save
+```
+
+全局安装后，就可以直接作为命令行使用了。你可以打印帮助查看：
+
+```shell
+oipage-cli -h
+```
+
+比如会出现下列内容：
+
+```
+Usage: oipage-cli <command>
+
+    where <command> is one of:
+        --help, -h, --server, -s, --version, -v, --config, -c, --delete, --copy, --pick, --move, --network, --get, --post, --cat, --run
+    
+    oipage-cli --help|-h <term>       search for help on <term>
+    oipage-cli --help|-h              involved overview
+```
+
+比如--server或-s命令如何查看具体使用说明？只需要：
+
+```shell
+oipage-cli -h s
+```
+
+然后看见打印提示：
+
+```
+oipage-cli --server|-s [port|20000]         [2]render source server.
+```
+
+根据提示我们知道，这是一个快速启动一个本地资源服务器的命令，使用的时候可以设置服务器端口号，端口号缺省是20000。
+
+比如我们启动端口为8080的服务器：
+
+```shell
+oipage-cli -s 8080
+```
+
+对于更复杂的业务，我们推荐使用配置文件的方式。比如我们准备了配置文件 oipage.config.js ，那么就可以：
+
+```shell
+devby -c ./oipage.config.js
+```
+
+配置文件的内容如下：
+
+```js
+module.exports = {
+    devServer: {
+        // 可配置参数和“服务器”一致
+    }
+};
+```
+
+如果你需要在项目中更灵活的使用，我们也提供了一些有用的API，具体如下：
+
+### 核心包
+
+- [animation 动画](./docs/corejs/animation.md)
+- [throttle 节流函数](./docs/corejs/throttle.md)
+
+### Nodejs
+
+- [服务器](./docs/nodejs/server.md)
+- [命令行参数解析](./docs/nodejs/options.md)
+- [文件相关操作](./docs/nodejs/file.md)
+- [控制台打印](./docs/nodejs/console.md)
+- [网络请求（ajax）](./docs/nodejs/ajax.md)
+- [网络信息等](./docs/nodejs/network.md)
+- [资源数据](./docs/nodejs/data.md)
+- [图片相关操作](./docs/nodejs/image.md)
+- [文件解析Loader](./docs/nodejs/loader.md)
+
+### 浏览器
+
+- [getStyle 获取节点样式](./docs/browserjs/getStyle.md)
+- [onReady 解析完执行](./docs/browserjs/onReady.md)
+
+### 样式文件
+
+> 统一浏览器样式 `normalize.css` 直接： `import 'oipage/stylecss/normalize.css'` 即可！
+
+- [rasterize 十二栅格化](./docs/stylecss/rasterize.md)
+- [skeleton 骨架屏动画](./docs/stylecss/skeleton.md)
+
 ## 版权
 
 MIT License

package/bin/options.js

@@ -12,17 +12,51 @@ module.exports = {
       info: '[1]Display this help text.',
       demo: 'oipage-cli --help|-h <term>'
     },
-    root: {
-      info: '[2]Set project root directory.',
-      demo: 'oipage-cli --root  ./'
+    server: {
+      short: 's',
+      info: '[2]Render source server.',
+      demo: 'oipage-cli --server|-s [port|20000] [basePath|./]'
     },
-    dev: {
-      info: '[3]Development mode running project.',
-      demo: 'oipage-cli --dev h5|mp-weixin'
+    config: {
+      short: 'c',
+      info: '[3]Specify a configuration file.',
+      demo: 'oipage-cli --config|-c ./OIPage.config.js'
     },
-    build: {
-      info: '[4]Package the current project.',
-      demo: 'oipage-cli --build  h5|mp-weixin'
+    delete: {
+      info: '[4]Delete file or folder.',
+      demo: 'oipage-cli --delete targetPath'
+    },
+    copy: {
+      info: '[5]Copy file or folder.',
+      demo: 'oipage-cli --copy sourcePath targetPath'
+    },
+    pick: {
+      info: '[6]Copy all files in the folder to the specified location.',
+      demo: 'oipage-cli --pick sourcePath targetPath'
+    },
+    move: {
+      info: '[7]Move file or folder.',
+      demo: 'oipage-cli --move sourcePath targetPath'
+    },
+    network: {
+      info: '[8]Display network information.',
+      demo: 'oipage-cli --network'
+    },
+    get: {
+      info: '[9]HTTP GET.',
+      demo: 'oipage-cli --get url'
+    },
+    post: {
+      info: '[10]HTTP POST.',
+      demo: 'oipage-cli --post url'
+    },
+    cat: {
+      info: '[11]Show file.',
+      demo: 'oipage-cli --cat path'
+    },
+    run: {
+      info: '[12]Run multiple commands.',
+      demo: 'oipage-cli --run \"commands1\" \"commands2\" \"commands3\"'
     }
   },
 
@@ -31,10 +65,10 @@ module.exports = {
   Usage: oipage-cli <command>
   
   Where <command> is one of:
-    --help, -h, --version, -v, --root, --dev, --build
+    --help, -h, --server, -s, --version, -v, --config, -c, --delete, --copy, --pick, --move, --network, --get, --post, --cat
   
   oipage-cli --help|-h <term>       search for help on <term>
   oipage-cli --help|-h              involved overview
-  `
+    `
 
 };

package/bin/run

@@ -2,14 +2,19 @@
 
 'use strict';
 
-process.title = 'oipage-cli';
+process.title = 'OIPage';
 
-const devby = require("devby");
+const server = require('../nodejs/core/server');
 const { options, help } = require('./options');
-const pkg = require("../package.json");
-const runDev = require("../script/command/dev");
-const runBuild = require("../script/command/build");
-const alignment = require("../script/config/alignment");
+const path = require('path');
+const { log, error } = require('../nodejs/core/log');
+const { deleteSync, copySync, moveSync, listFileSync, fullPathSync } = require("../nodejs/core/file");
+const network = require("../nodejs/core/network");
+const { get, post } = require("../nodejs/core/remote");
+const fs = require("fs");
+const { exec } = require('child_process');
+
+const jsonfile = require("../package.json");
 
 // 组装好缩写和全写的映射
 let shortHands = {};
@@ -18,16 +23,17 @@ for (let key in options) {
 }
 
 // 命令行传递的参数
-const parsed = devby.options(shortHands, process.argv);
+const parsed = require("../nodejs/core/options")(shortHands, process.argv);
 
 (() => {
     // 打印版本
     if (Array.isArray(parsed.version)) {
-        devby.log("\nOIPage@v" + pkg.version + "\n");
+        log("\nOIPage@v" + jsonfile.version + "\n");
     }
 
     // 判断是否需要帮助
     else if (Array.isArray(parsed.help)) {
+
         // 打印具体的配置提示
         if (parsed.help.length > 0) {
             let help0 = parsed.help[0];
@@ -43,9 +49,9 @@ const parsed = devby.options(shortHands, process.argv);
                 // 根据需要帮助的命令获取对应的信息
                 const help0Option = options[help0];
                 if (help0Option) {
-                    devby.log(`
-` + help0Option.demo + `         ` + help0Option.info + `
-                  `);
+                    log(`
+  ` + help0Option.demo + `         ` + help0Option.info + `
+                      `);
 
                     return;
                 }
@@ -53,21 +59,160 @@ const parsed = devby.options(shortHands, process.argv);
             }
         }
 
-        devby.log(help);
+        log(help);
     }
 
-    // 开发
-    else if (Array.isArray(parsed.dev)) {
-        runDev(alignment.command(parsed));
+    // 基于配置文件运行
+    else if (Array.isArray(parsed.config)) {
+        if (parsed.config.length < 1) parsed.config[0] = './oipage.config.js';
+
+        // 读取配置
+        let configFile = require(path.join(process.cwd(), parsed.config[0]));
+
+        // 如果配置了服务器
+        if ("devServer" in configFile) {
+            server(configFile.devServer);
+        }
     }
 
-    // 打包
-    else if (Array.isArray(parsed.build)) {
-        runBuild(alignment.command(parsed));
+    // 删除
+    else if (Array.isArray(parsed.delete)) {
+
+        // 获取绝对路径
+        let targetPath = fullPathSync(parsed.delete[0]);
+
+        deleteSync(targetPath);
+        log(`> delete ${targetPath.replace(process.cwd(), '.')}`);
+    }
+
+    // 复制
+    else if (Array.isArray(parsed.copy)) {
+
+        // 获取绝对路径
+        let sourcePath = fullPathSync(parsed.copy[0]);
+        let targetPath = fullPathSync(parsed.copy[1]);
+
+        // 如果存在
+        copySync(sourcePath, targetPath);
+        log(`> copy ${sourcePath.replace(process.cwd(), '.')} ➔ ${targetPath.replace(process.cwd(), '.')}`);
     }
 
-    // 默认
+    // 复制文件（一级展开）
+    else if (Array.isArray(parsed.pick)) {
+
+        // 如果目标文件夹不存在，创建
+        if (!fs.existsSync(parsed.pick[1])) {
+            fs.mkdirSync(parsed.pick[1], { recursive: true });
+        }
+
+        listFileSync(parsed.pick[0], fileInfo => {
+
+            // 获取路径
+            let sourcePath = fullPathSync(fileInfo.path);
+            let targetPath = fullPathSync(path.join(parsed.pick[1], fileInfo.name));
+
+            let index = 1;
+            while (fs.existsSync(targetPath)) {
+                targetPath = fullPathSync(path.join(parsed.pick[1], "【" + index + "】" + fileInfo.name));
+                index += 1;
+            }
+
+            log(`> copy ${sourcePath.replace(process.cwd(), '.')} ➔ ${targetPath.replace(process.cwd(), '.')}`);
+            copySync(sourcePath, targetPath);
+        });
+    }
+
+    // 移动
+    else if (Array.isArray(parsed.move)) {
+
+        // 获取绝对路径
+        let sourcePath = fullPathSync(parsed.move[0]);
+        let targetPath = fullPathSync(parsed.move[1]);
+
+        // 如果存在
+        moveSync(sourcePath, targetPath);
+        log(`> move ${sourcePath.replace(process.cwd(), '.')} ➔ ${targetPath.replace(process.cwd(), '.')}`);
+    }
+
+    // 网络信息
+    else if (Array.isArray(parsed.network)) {
+        log(JSON.stringify(network(), null, 4));
+    }
+
+    // GET请求
+    else if (Array.isArray(parsed.get)) {
+        get(parsed.get[0]).then(data => {
+            log(data);
+        }).catch(e => {
+            error(e);
+        });
+    }
+
+    // PSOT请求
+    else if (Array.isArray(parsed.post)) {
+        post(parsed.post[0]).then(data => {
+            log(data);
+        }).catch(e => {
+            error(e);
+        });
+    }
+
+    // 查看文件
+    else if (Array.isArray(parsed.cat)) {
+        try {
+            let filepath = fullPathSync(parsed.cat[0])
+
+            log(fs.readFileSync(filepath, {
+                encoding: "utf8"
+            }));
+        } catch (e) {
+            error(e);
+        }
+    }
+
+    // 运行多命令
+    else if (Array.isArray(parsed.run)) {
+        for (let index = 0; index < parsed.run.length; index++) {
+            const child = exec(parsed.run[index]);
+
+            // 监听子线程的stdout
+            child.stdout.on('data', (data) => {
+                console.log(`[${index + 1}] log:${data}`);
+            });
+
+            // 监听子线程的stderr
+            child.stderr.on('data', (data) => {
+                console.error(`[${index + 1}] error:${data}`);
+            });
+
+            // 子线程结束处理
+            child.on('close', (code) => {
+                console.log(`[${index + 1}] 子线程结束，退出码 ${code}`);
+            });
+
+            // 子线程出错处理
+            child.on('error', (error) => {
+                console.error(`[${index + 1}] 子线程错误: ${error.message}`);
+            });
+        }
+    }
+
+    // 否则就是启动服务器
     else {
-        devby.log(help);
+
+        let port, basePath;
+
+        if (Array.isArray(parsed.server)) {
+            port = parsed.server[0];
+            basePath = parsed.server[1];
+        } else {
+            port = parsed.__terminal__[0];
+            basePath = parsed.__terminal__[1];
+        }
+
+        server({
+            port,
+            basePath
+        });
     }
 })();

package/browserjs/getStyle/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 获取节点样式
+ */
+export interface getStyleType {
+    (el: HTMLElement, name: string): string
+    (el: HTMLElement): {
+        [key: string]: string
+    }
+}
+
+export let getStyle: getStyleType

package/browserjs/getStyle/index.js

@@ -0,0 +1,13 @@
+export function getStyle(el, name) {
+
+    // 获取结点的全部样式
+    var allStyle = document.defaultView && document.defaultView.getComputedStyle ?
+        document.defaultView.getComputedStyle(el, null) :
+        el.currentStyle;
+
+    // 如果没有指定属性名称，返回全部样式
+    return typeof name === 'string' ?
+        allStyle.getPropertyValue(name) :
+        allStyle;
+
+};

package/browserjs/index.d.ts

@@ -0,0 +1,10 @@
+import { getStyleType } from "./getStyle"
+import { onReadyType } from "./onReady"
+
+export default class Corejs {
+    static getStyle: getStyleType
+    static onReady: onReadyType
+}
+
+export let getStyle: getStyleType
+export let onReady: onReadyType

package/browserjs/index.js

@@ -0,0 +1,7 @@
+import { getStyle } from "./getStyle/index.js";
+import { onReady } from "./onReady/index.js";
+
+export default {
+    getStyle: getStyle,
+    onReady: onReady
+};

package/browserjs/onReady/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 等待DOM加载完毕执行
+ */
+export interface onReadyType {
+    (callback: Function): void
+}
+
+export let onReady: onReadyType

package/browserjs/onReady/index.js

@@ -0,0 +1,8 @@
+export function onReady(callback) {
+    var readyState = document.readyState;
+    if (readyState === 'interactive' || readyState === 'complete') {
+        callback();
+    } else {
+        window.addEventListener("DOMContentLoaded", callback);
+    }
+};

package/corejs/animation/index.d.ts

@@ -0,0 +1,12 @@
+interface animationFun {
+    (deep: number): void
+}
+
+/**
+ * 轮询动画，返回一个函数，调用该函数，可以提前结束动画
+ */
+export interface animationType {
+    (doback: animationFun, duration?: number, callback?: animationFun): Function
+}
+
+export let animation: animationType

package/corejs/animation/index.js

@@ -0,0 +1,102 @@
+//当前正在运动的动画的tick函数堆栈
+var $timers = [];
+//唯一定时器的定时间隔
+var $interval = 13;
+//定时器ID
+var $timerId;
+
+/**
+ * 动画轮播
+ * @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
+ * @param {number} duration 动画时长，可选
+ * @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
+ *
+ * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
+ */
+export function animation(doback, duration, callback) {
+    if (arguments.length < 2) duration = 400;
+    if (arguments.length < 3) callback = function () { };
+
+    var clock = {
+        //把tick函数推入堆栈
+        "timer": function (tick, duration, callback) {
+            if (!tick) {
+                throw new Error('Tick is required!');
+            }
+            var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
+            $timers.push({
+                "id": id,
+                "createTime": new Date(),
+                "tick": tick,
+                "duration": duration,
+                "callback": callback
+            });
+            clock.start();
+            return id;
+        },
+
+        //开启唯一的定时器timerId
+        "start": function () {
+            if (!$timerId) {
+                $timerId = setInterval(clock.tick, $interval);
+            }
+        },
+
+        //被定时器调用，遍历timers堆栈
+        "tick": function () {
+            var createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
+
+            $timers = [];
+            $timers.length = 0;
+
+            for (flag = 0; flag < timers.length; flag++) {
+                //初始化数据
+                timer = timers[flag];
+                createTime = timer.createTime;
+                tick = timer.tick;
+                duration = timer.duration;
+                callback = timer.callback;
+
+                //执行
+                passTime = (+new Date().valueOf() - createTime.valueOf()) / duration;
+                passTime = passTime > 1 ? 1 : passTime;
+                tick(passTime);
+                if (passTime < 1 && timer.id) {
+                    //动画没有结束再添加
+                    $timers.push(timer);
+                } else {
+                    callback(passTime);
+                }
+            }
+            if ($timers.length <= 0) {
+                clock.stop();
+            }
+        },
+
+        //停止定时器，重置timerId=null
+        "stop": function () {
+            if ($timerId) {
+                clearInterval($timerId);
+                $timerId = null;
+            }
+        }
+    };
+
+    var id = clock.timer(function (deep) {
+        //其中deep为0-1，表示改变的程度
+        doback(deep);
+    }, duration, callback);
+
+    // 返回一个函数
+    // 用于在动画结束前结束动画
+    return function () {
+        var i;
+        for (i in $timers) {
+            if ($timers[i].id == id) {
+                $timers[i].id = void 0;
+                return;
+            }
+        }
+    };
+
+};

package/corejs/index.d.ts

@@ -0,0 +1,10 @@
+import { animationType } from "./animation"
+import { throttleType } from "./throttle"
+
+export default class Corejs {
+    static animation: animationType
+    static throttle: throttleType
+}
+
+export let animation: animationType
+export let throttle: throttleType

package/corejs/index.js

@@ -0,0 +1,7 @@
+import { animation } from "./animation/index.js";
+import { throttle } from "./throttle/index.js";
+
+export default {
+    animation: animation,
+    throttle: throttle
+};