famanoder / dps Goto Github PK

View Code? Open in Web Editor NEW

938.0 12.0 103.0 5.5 MB

:tangerine: a way to make skeleton screen, 一种自动生成网页骨架屏的方式

JavaScript 100.00%

skeleton-screen dps puppeteer

dps's People

Contributors

Stargazers

Watchers

Forkers

z1769057083 websky219 hanjingboo lazcy buleice zhang1432574133 lentoo littlepoolshark zjlindd paperscz wangxin223 yezi12138 hongithub zhangtong1993 limingziqiang angle-li msdgwzhy6 jiliangmason hh1977 libin1991 uchaopin x3hong tonycc123 bigrats zhenhappy torns lningcode zhouweihua hupo256 seazeg mawei1191546352 liasica sunwanxin213 lisiyizu wenlibest liupcoder viridianfairy tosenbill whitepsh qiguoqiang spencer17x yorick304 hepuxuan hui-fly yaowenbin jiangbo0216 yxjz jinchao1992 haihai211 lanbosm chen8ih jarvis2018 18037128621 yyyuan-javascript wxxcarl shaolinwang sqq5682 shuaichangzhe aiqiaodaima panhbuild gaaoge yang4515 yukixieyuya821 li-li-jun qq648073553 baobao12356 duxuyang sixtreehall newpolymerization ninegang sdtm1016 a7270102 azure99 ldt2016 tian0o0 wodemax junqing258 lwg2001s yuccie qwe104 peirm doudouma cherishmine robert-ro itbotboy keyzf lulucut leedebug vampireknight boswellgao mieyiyv heliang0915 zrbjava tony-liuduan tiny-nx lhj767382286 kinginkingdom baikaifa hearallparties liyantaogithub

dps's Issues

Error: Cannot find module 'puppeteer'

puppeteer已经全局安装了，一直给我报这个错。。。

dps start启动失败

(node:3076) UnhandledPromiseRejectionWarning: Error: Could not find browser revision 782078. Run "PUPPETEER_PRODUCT=fi
refox npm install" or "PUPPETEER_PRODUCT=firefox yarn install" to download a supported Firefox browser binary.
at ChromeLauncher.launch (D:\vueProject\nodejs\node_global\node_modules\puppeteer\lib\cjs\puppeteer\node\Launcher.js
:86:23)
at async pp (D:\vueProject\nodejs\node_global\node_modules\draw-page-structure\src\pp.js:11:19)
at async DrawPageStructure.start (D:\vueProject\nodejs\node_global\node_modules\draw-page-structure\src\index.js:121
:16)
(node:3076) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing insi
de of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To termina
te the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs
.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3076) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections
that are not handled will terminate the Node.js process with a non-zero exit code.
| 启动浏览器...

Cannot find module 'puppeteer'

安装插件后使用 dps init 就报这个错误

多次生成骨架屏，生成后的股价平代码都不一样

如题，是哪里出了问题？

另：能否启动 poppeteer 后，打开一个可视化的页面？起码能看到打开的样子是否正确，要不调试无从下手

Cannot find module 'puppeteer'

dps init后一直报Cannot find module 'puppeteer'，安装了puppeteer也没用

const dpsConfig = {
url: 'https://baidu.com', // 待生成骨架屏页面的地址，用百度（https://baidu.com）试试也可以
output: {
filepath: '/Users/luoxue/Desktop/cli/index.html', // 生成骨架屏的存放页面，一般为项目的入口页面
injectSelector: '#wrapper' // 生成的骨架屏插入页面的节点
},
background: '#eee',
animation: 'opacity 1s linear infinite;',
includeElement: function(node, draw) {
// 定制某个节点画出来的样子，带上return false
// if(node.id == 'ui-alert') {
// 跳过该节点及其子节点
// return false;
// }
// if(node.tagName.toLowerCase() === 'img') {
// 对该图片生成宽100%，高8%，颜色为红色的色块
// draw({
// width: 100,
// height: 8,
// left: 0,
// top: 0,
// zIndex: 99999999,
// background: 'red'
// });
// return false;
// }
},
writePageStructure: function(html) {
// 自己处理生成的骨架屏
// fs.writeFileSync(filepath, html);
// console.log(html)
},
init: function() {
// 生成骨架屏之前的操作，比如删除干扰节点
}
}

module.exports = dpsConfig;

spa 网页无法爬到

生成骨架屏是空白

配置

const dpsConfig = {
  url: 'https://baidu.com', // 待生成骨架屏页面的地址，用百度（https://baidu.com）试试也可以
  output: {
    filepath: '/Users/w/work/example/index1.html', // 生成骨架屏的存放页面，一般为项目的入口页面
    injectSelector: '#app' // 生成的骨架屏插入页面的节点
  },
  background: '#eee',
  animation: 'opacity 1s linear infinite;'
}

module.exports = dpsConfig;

dps -v 1.0.8

dps start
skeleton screen has created and output to /Users/w/work/example/index1.html

/Users/w/work/example/index1.html 内容

<html><head></head><body></body></html>

单页生成

单页能不能生成加载数据后的骨架屏？

关于dps的几点优化建议

1.evalDOM,js文件中deepFindNode方法中关于绘制元素的条件判断：t < win_h - 100这个判断项会导致屏幕底部的导航栏无法正常绘制，就需要开发者在includeElement写一大段代码自行绘制，建议把这项判断改为 (t < win_h - 100 || (getArgtype($this.includeElement) === 'function' && $this.includeElement(node, drawBlock) == true))，这样就能通过在includeElement中为指定节点返回true来进行绘制了；
2.代码调试相关：在源代码中打印信息控制台不显示，建议在pp.js文件中监听无头浏览器的console事件并打印出来。
3.建议为无头浏览器追加sessionStorage,localStorage等选项。

点赞，加油！

我想在node 中运行这个项目，要怎么调用api

请问我配置好了生成了html文件那页面怎么插入到网页中

生产的index.html文件模板在哪里改？就是原本我的index有添加了东西，生成骨架文件就替换了

不能根据不同的手机屏幕进行自适应

生成的页面骨架图只能再 iPhone6/7/8中正常使用，其它手机不可以噢，需要怎么配置？

克隆项目后，dps start 运行不起来

全局安装 draw-page-structure 后，以 baidu.com 为例，运行 dps start，卡在“启动浏览器...”处就不动了

你好, 请问多个页面应该怎么配置呢?

windows系统报路径错误

我在windows系统下用不了，配置如下：

const dpsConfig = {
url: 'https://baidu.com', // 待生成骨架屏页面的地址，用百度（https://baidu.com）试试也可以
output: {
filepath: 'E:\code\_test\dps-test\index.html', // 生成骨架屏的存放页面，一般为项目的入口页面
injectSelector: '#app' // 生成的骨架屏插入页面的节点
},
background: '#eee',
animation: 'opacity 1s linear infinite;',
}

module.exports = dpsConfig;

报错如下：
[dps]: [output.filepath] should be a file !

似乎是识别不了windows路径，怎么办？

dps init 提示找不到dps命令

环境: ubuntu 16.04 lst
npm : 6.9.0
node: v12.4.0

npm i draw-page-structure -g 后, dps init 报上面的错

麻烦作者大大,帮忙看下,或者给个具体实例demo,感激不尽~

维护者到底自己跑过没有

启动失败

详情如下：
[root@izul Node]# dps start
∙∙∙ (node:12558) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/nvm/versions/node/v12.18.0/lib/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

at onClose (/nvm/versions/node/v12.18.0/lib/node_modules/puppeteer/lib/launcher/BrowserRunner.js:159:20)
at Interface.<anonymous> (/nvm/versions/node/v12.18.0/lib/node_modules/puppeteer/lib/launcher/BrowserRunner.js:149:65)
at Interface.emit (events.js:327:22)
at Interface.close (readline.js:416:8)
at Socket.onend (readline.js:194:10)
at Socket.emit (events.js:327:22)
at endReadableNT (_stream_readable.js:1221:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)

(node:12558) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:12558) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
●∙∙ 启动浏览器...
∙∙● 启动浏览器...
∙●∙ 启动浏览器...^C