feat: add cli command

kaola-fed · Sep 19, 2019 · bc24c6b · bc24c6b
1 parent 49bd434
commit bc24c6b
Show file tree

Hide file tree

Showing 5 changed files with 830 additions and 93 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ node_modules
 dist
 build
 .DS_Store
+skeleton-output
 demo/**/*.txt
 demo/**/*.html
 demo/**/*.png

diff --git a/README.md b/README.md
@@ -11,53 +11,68 @@
 ## 安装方法
 
 ```bash
-$ npm i awesome-skeleton -S
+$ npm i awesome-skeleton -g
 ```
 
 ## 使用方法
 
-```js
-const getSkeleton = require('awesome-skeleton');
-
-getSkeleton({
-  pageUrl: 'https://www.baidu.com', // 必填
-  pageName: 'baidu',  // 可选
-  device: 'iPhone X', // 可选，为空则为桌面端
-  cookies: [{         // 可选，页面需要登录态时使用，通过 Chrome 插件 editthiscookie 复制得到。
-    "domain": ".baidu.com",
-    "expirationDate": 3708990421.619608,
-    "hostOnly": false,
-    "httpOnly": false,
-    "name": "BAIDUID",
-    "path": "/",
-    "sameSite": "unspecified",
-    "secure": false,
-    "session": false,
-    "storeId": "0",
-    "value": "7626E9A086D13BD919789E744B1C48A2:FG=1",
-    "id": 1
-  }, {
-    "domain": ".baidu.com",
-    "expirationDate": 1568267131.555328,
-    "hostOnly": false,
-    "httpOnly": false,
-    "name": "BDORZ",
-    "path": "/",
-    "sameSite": "unspecified",
-    "secure": false,
-    "session": false,
-    "storeId": "0",
-    "value": "B490B5EBF6F3CD402E515D22BCDA1598",
-    "id": 2
-  }],
-  minGrayBlockWidth: 80, // 可选，最小灰块宽度
-  minGrayPseudoWidth: 10, // 可选，最小伪类灰块宽度
-}).then(skeletonHTML => {
-  console.log('skeleton HTML: ', skeletonHTML)
-});
+### 添加配置文件
+
+skeleton.config.json:
+
+```json
+{
+  "pageName": "baidu",
+  "pageUrl": "https://www.baidu.com",
+  "openRepeatList": false,
+  "device": "iPhone X",
+  "minGrayBlockWidth": 80,
+  "minGrayPseudoWidth": 10,
+  "debug": true,
+  "delayTime": 0,
+  "debugTime": 3000,
+  "cookies": [
+    {
+      "domain": ".baidu.com",
+      "expirationDate": 1568267131.555328,
+      "hostOnly": false,
+      "httpOnly": false,
+      "name": "BDORZ",
+      "path": "/",
+      "sameSite": "unspecified",
+      "secure": false,
+      "session": false,
+      "storeId": "0",
+      "value": "yyyyyyyyy",
+      "id": 2
+    }
+  ]
+}
+```
+
+### 生成骨架屏
+```bash
+$ skeleton -c ./skeleton.config.json
+```
+
+页面 DomReady 之后，会在页面顶部出现红色按钮：开始生成骨架屏。
+
+生成完成后，会在运行目录生成 skeleton-output 文件件，里面包括骨架屏 png 图片、base64 文本、html 文件。
+
+其中 html 文件可以直接拿来用，复制下面位置：
+
+```html
+<html>
+  <head>
+    <!--- 骨架屏代码 -->
+  </head>
+</html>
 ```
 
-## 骨架图效果示例
+
+### 登录态解决
+
+如果页面需要登录，则需要下载 Chrome 插件 EditThisCookie，将 Cookie 复制到配置参数中。
 
 ## 参数
 

diff --git a/bin/skeleton.js b/bin/skeleton.js
@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+
+const {
+  EOL,
+} = require('os');
+const path = require('path');
+const program = require('commander');
+const _ = require('xutil');
+const updateNotifier = require('update-notifier');
+
+const { chalk } = _;
+const getSkeleton = require('../src');
+const pkg = require('../package.json');
+
+updateNotifier({
+  pkg,
+  updateCheckInterval: 5000, // 5s
+}).notify();
+
+
+program
+  .option('--verbose', 'show more debugging information')
+  .option('-c, --config <s>', 'set configuration file')
+  .parse(process.argv);
+
+let options = {};
+
+if (program.config) {
+  const configFile = path.resolve(program.config);
+
+  if (_.isExistedFile(configFile)) {
+    console.log(`${EOL}configuration file: ${chalk.cyan(configFile)}`);
+    options = Object.assign(options, require(configFile));
+  }
+}
+
+(async () => {
+  try {
+    await getSkeleton(options);
+
+    const resultDir = path.join(process.cwd(), 'skeleton-output');
+    console.log('result files save in: ', chalk.cyan(resultDir));
+  } catch (error) {
+    console.log(chalk.red(`${EOL}awesome-skeleton start unsuccessfully: ${error}${EOL}`));
+    return;
+  }
+})();
+