create-skeleton

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 ，并将骨架屏节点写入；

1. 方案二： 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);
  // }
};

参数说明

参数	说明	默认值	是否必填
url	待生成骨架屏页面地址	--	是
extraHTTPHeaders	请求头	--	否
device	设备类型	iPhone 6
output.filePath	生成的骨架屏节点写入的文件	--	否
output.injectSelector	骨架屏节点插入的位置	#app	否
header.height	主题 header 的高	--	否
header.background	主题 header 的背景色	--	否
background	骨架屏主题色	#ecf0f2	否
animation	css3 动画属性	--	否
rootNode	针对模块生成骨架屏	document.body	否
beforeDraw	开始生成之前的操作	--	否
includeNode(node, draw({width:numbenr,height:number,left:number, top:number, zIndex:number,background:'#ccc}))	定制某个节点如何生成	--	否
writeSkeleton(html)	回调的骨架屏节点	--	否
headless	headless mode 如果为 false, 将不关闭浏览器， 需手动点击生成骨架屏页面(按钮)右上角【骨架屏】按钮生成骨架屏	true	否