create-skeleton v1.3.2

create-skeleton

轻松提供 CLI 自动生成骨屏, 提供 includeNode, 或者 beforeDraw 等方法定制化骨架屏, headless 为 false 支持打开待生成骨架屏页面，手动生成骨架屏

Install

npm i create-skeleton -D

Usage

1. 方案一： 提供 create-skeleton.config.js , 执行npx create-skeleton

• 配置 output.filePath，如果配置的是目录，会写入到该目录里的 create-skeleton.html (没有的话我们会创建)文件里；
• 自定义写入的方式 writeSkeleton: (outputHtml: string) => void;；
• 如果前面两种方式您都没有提供，那么将会在您当前目录下创建 create-skeleton.html ，并将骨架屏节点写入；

2. 方案二： npx create-skeleton <create-skeleton-url> 生成骨架屏

Examples

// create-skeleton.config.js
const fs = require("fs");

module.exports = {
  url: "https://baidu.com",
  output: {
    filePath: "",
    injectSelector: "#app"
  },
  background:
    "linear-gradient(90deg,rgba(190,190,190,.2) 25%,rgba(129,129,129,.24) 37%,rgba(190,190,190,.2) 63%);background-size: 400% 100%;",
  animation: "ant-skeleton-loading 1s linear infinite;",
  header: {
    // height: 44,
    // background: "#eee"
  },
  beforeDraw: function() {
    //生成骨架屏之前的操作，比如删除干扰节点
    const conWrap = document.querySelector(".con-wrap");
    if (conWrap) {
      conWrap.style.cssText = "visibility: hidden";
    }
  },
  includeNode: function(node, draw) {
    // 删除干扰节点
    if (node.id === "skipNode") {
      return false;
    }
  }
  // writeSkeleton: function(html) {
  //   //自己处理生成的骨架屏
  //   fs.writeFileSync(__dirname, html);
  // }
};

参数说明