From ae6806d98b80a296be5d5d1032609564c0c76e2d Mon Sep 17 00:00:00 2001 From: zivyangll Date: Fri, 6 Sep 2019 17:17:52 +0800 Subject: [PATCH] feat: optimize default value --- README.md | 7 ++----- demo/index.js | 4 +--- src/index.js | 19 +++++++++++-------- src/insertSkeleton.js | 7 +++++-- 4 files changed, 19 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 323b5c8..3e33f20 100644 --- a/README.md +++ b/README.md @@ -17,17 +17,14 @@ npm i --save-dev awesome-skeleton ## 使用方法 ```js -const path = require('path'); const getSkeleton = require('awesome-skeleton'); getSkeleton({ pageName: 'baidu', pageUrl: 'https://www.baidu.com', - outputPath: path.join(__dirname, 'output'), device: 'iPhone X', minGrayBlockWidth: 80, minGrayPseudoWidth: 10, - debug: false, }).then(skeletonHTML => { console.log('skeleton HTML: ', skeletonHTML) }); @@ -39,9 +36,9 @@ getSkeleton({ | 参数名称 | 必填 | 默认值 | 说明 | | --- | --- | --- | --- | -| pageName | 是 | - | 页面名称(仅限英文) | | pageUrl | 是 | - | 页面地址(此地址必须可访问) | -| outputPath | 是 | - | 骨架图文件输出文件夹路径 | +| pageName | 否 | output | 页面名称(仅限英文) | +| outputPath | 否 | skeleton-output | 骨架图文件输出文件夹路径,默认到项目 skeleton-output 中 | | openRepeatList | 否 | true | 默认会将每个列表的第一项进行复制 | | device | 否 | 空为PC | 参考 puppeteer/DeviceDescriptors.js,可以设置为 'iPhone 6 Plus' | | debug | 否 | false | 是否开启调试开关 | diff --git a/demo/index.js b/demo/index.js index 65efec5..5be65f6 100644 --- a/demo/index.js +++ b/demo/index.js @@ -1,10 +1,8 @@ -const path = require('path'); const getSkeleton = require('../src/index'); getSkeleton({ pageName: 'baidu', pageUrl: 'https://www.baidu.com', - outputPath: path.join(__dirname, 'output'), openRepeatList: false, device: 'iPhone X', // 为空则使用默认 PC 页面打开 minGrayBlockWidth: 80, @@ -13,6 +11,6 @@ getSkeleton({ delayTime: 0, debugTime: 1000, }).then(result => { - console.log(result) + console.log(result.html) }) diff --git a/src/index.js b/src/index.js index 3c5187f..1edf95e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,5 @@ - - const fs = require('fs'); +const path = require('path'); const { saveScreenShot, @@ -13,7 +12,7 @@ const insertSkeleton = require('./insertSkeleton'); * @param {Object} options 配置 * @param {String} options.pageName 页面名称(仅限英文) * @param {String} options.pageUrl 页面地址(此地址必须可访问) - * @param {String} options.outputPath 骨架图文件输出文件夹路径 + * @param {String} options.outputPath 骨架图文件输出文件夹路径,不填则输出到默认项目 * @param {Boolean} options.openRepeatList 默认会将每个列表的第一项进行复制,默认值 true * @param {Object} options.device 参考 puppeteer/DeviceDescriptors.js * @param {Number} options.minGrayBlockWidth 最小处理灰色块的宽度 @@ -24,13 +23,17 @@ const insertSkeleton = require('./insertSkeleton'); */ const getSkeleton = async function(options) { // 参数校验 - if (!options.pageName || !options.pageUrl || !options.outputPath) { - console.warning('参数不能为空!'); + if (!options.pageUrl) { + console.warn('页面地址不能为空!'); return false; } + // 设置默认参数 + options.pageName = options.pageName ? options.pageName : 'output'; + options.outputPath = options.outputPath ? options.outputPath : path.join('skeleton-output'); + // 若不存在 output 目录,创建目录 - if (options.outputPath && !fs.existsSync(options.outputPath)) { + if (!fs.existsSync(options.outputPath)) { fs.mkdirSync(options.outputPath); } @@ -46,12 +49,12 @@ const getSkeleton = async function(options) { const skeletonImageBase64 = await saveScreenShot(page, options); // 将骨架图注入要页面 - const skeletonHTML = insertSkeleton(skeletonImageBase64, options); + const result = insertSkeleton(skeletonImageBase64, options); // 关闭浏览器 await browser.close(); - return skeletonHTML; + return result; }; module.exports = getSkeleton; diff --git a/src/insertSkeleton.js b/src/insertSkeleton.js index 659b685..c8e7eed 100644 --- a/src/insertSkeleton.js +++ b/src/insertSkeleton.js @@ -7,7 +7,7 @@ const insertSkeleton = (skeletonImageBase64, options) => { const skeletonHTMLPath = path.join(options.outputPath, `skeleton-${options.pageName}.html`); if (!skeletonImageBase64) { - console.warning('骨架图还没未生成'); + console.warn('骨架图还没未生成'); return false; } @@ -82,7 +82,10 @@ const insertSkeleton = (skeletonImageBase64, options) => { if (err) return console.error(err); }); - return minifyContent; + return { + html: minifyContent, + img: skeletonImageBase64, + }; }; module.exports = insertSkeleton;