From c97df5d3b504a52908aac6230a6fc366934a8cbd Mon Sep 17 00:00:00 2001 From: Luoooo Date: Wed, 31 May 2023 18:52:09 +0800 Subject: [PATCH] refactor cli --- Dockerfile | 7 +++ bin/spritezero | 120 +++++++++++++++++--------------------------- bin/spritezero_bak | 104 ++++++++++++++++++++++++++++++++++++++ package.json | 17 +++---- prettier.config.cjs | 44 ++++++++++++++++ 5 files changed, 207 insertions(+), 85 deletions(-) create mode 100644 Dockerfile create mode 100755 bin/spritezero_bak create mode 100644 prettier.config.cjs diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..9aa1d62 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,7 @@ +FROM node:18-slim +# RUN echo "registry=https://registry.npmmirror.com/"> ~/.npmrc +RUN npm install -g @mapbox/spritezero glob minimist +COPY bin/spritezero /usr/local/lib +RUN ln -s /usr/local/lib/spritezero /usr/local/bin/ + +ENTRYPOINT [ "spritezero" ] \ No newline at end of file diff --git a/bin/spritezero b/bin/spritezero index 3766992..ad66ed9 100755 --- a/bin/spritezero +++ b/bin/spritezero @@ -2,103 +2,75 @@ var spritezero = require('@mapbox/spritezero'); var fs = require('fs'); -var queue = require('queue-async'); -var multiline = require('multiline'); var path = require('path'); -var stringify = require('json-stable-stringify'); +var glob = require('glob'); var argv = require('minimist')(process.argv.slice(2), { - boolean: ['retina', 'unique', 'h', 'help'] + default: { _: ['.', '.'] }, + boolean: ['retina', 'unique', 'h', 'help'] }); - -function filepaths (dir) { - return fs.readdirSync(dir) - .filter(function (d) { - return !d.match(/^\./); - }) - .map(function (d) { - return path.join(dir, d); - }); -} - -function showHelp () { - console.log(multiline(function () { - /* - spritezero - - Generate sprite sheets for maps and the web using SVG files as input - - Usage - - - Example - spritezero maki maki/ - */ })); + +function showHelp() { + console.log(` + spritezero + Generate sprite sheets for maps and the web using SVG files as input + Usage + + + + Example + spritezero maki maki + `); } if (argv.help || argv._.length < 2) { - showHelp(); - /* istanbul ignore next */ - process.exit(1); + showHelp(); + /* istanbul ignore next */ + process.exit(1); } var ratio = 1; var unique = false; if (argv.retina) { - ratio = 2; + ratio = 2; } else if (argv.ratio) { - ratio = parseFloat(argv.ratio); + ratio = parseFloat(argv.ratio); } if (argv.unique) { - unique = true; + unique = true; } var outfile = argv._[0]; var input = argv._[1]; -function loadFile (file, callback) { - fs.readFile(file, function (err, res) { - return callback(err, { - svg: res, - id: path.basename(file).replace('.svg', '') - }); - }); +function sortById(a, b) { + return b.id < a.id; } -function sortById (a, b) { - return b.id < a.id; +const buffers = glob + .sync(input + '/*.svg') + .map((f) => ({ + svg: fs.readFileSync(f), + id: path.basename(f).replace('.svg', '') + })) + .sort(sortById); + +var genLayout = unique ? spritezero.generateLayoutUnique : spritezero.generateLayout; +genLayout({ imgs: buffers, pixelRatio: ratio, format: true }, saveLayout); +genLayout({ imgs: buffers, pixelRatio: ratio, format: false }, saveImage); + +function saveLayout(err, formattedLayout) { + if (err) throw err; + fs.writeFileSync(outfile + '.json', JSON.stringify(formattedLayout, undefined, ' ')); } -var q = queue(16); - -filepaths(input).forEach(function (file) { - q.defer(loadFile, file); -}); - -q.awaitAll(function (err, buffers) { +function saveImage(err, layout) { + if (err) throw err; + spritezero.generateImage(layout, function (err, image) { if (err) throw err; - - buffers.sort(sortById); - - function saveLayout (err, formattedLayout) { - if (err) throw err; - fs.writeFile(outfile + '.json', stringify(formattedLayout, {space: ' '}), 'utf8', function (err) { - if (err) throw err; - }); - } - - function saveImage (err, layout) { - if (err) throw err; - spritezero.generateImage(layout, function (err, image) { - if (err) throw err; - fs.writeFile(outfile + '.png', image, function (err) { - if (err) throw err; - }); - }); - } - - var genLayout = unique ? spritezero.generateLayoutUnique : spritezero.generateLayout; - genLayout({ imgs: buffers, pixelRatio: ratio, format: true }, saveLayout); - genLayout({ imgs: buffers, pixelRatio: ratio, format: false }, saveImage); -}); + fs.writeFileSync(outfile + '.png', image, function (err) { + if (err) throw err; + }); + }); +} diff --git a/bin/spritezero_bak b/bin/spritezero_bak new file mode 100755 index 0000000..3766992 --- /dev/null +++ b/bin/spritezero_bak @@ -0,0 +1,104 @@ +#!/usr/bin/env node + +var spritezero = require('@mapbox/spritezero'); +var fs = require('fs'); +var queue = require('queue-async'); +var multiline = require('multiline'); +var path = require('path'); +var stringify = require('json-stable-stringify'); +var argv = require('minimist')(process.argv.slice(2), { + boolean: ['retina', 'unique', 'h', 'help'] +}); + +function filepaths (dir) { + return fs.readdirSync(dir) + .filter(function (d) { + return !d.match(/^\./); + }) + .map(function (d) { + return path.join(dir, d); + }); +} + +function showHelp () { + console.log(multiline(function () { + /* + spritezero + + Generate sprite sheets for maps and the web using SVG files as input + + Usage + + + Example + spritezero maki maki/ + */ })); +} + +if (argv.help || argv._.length < 2) { + showHelp(); + /* istanbul ignore next */ + process.exit(1); +} + +var ratio = 1; +var unique = false; + +if (argv.retina) { + ratio = 2; +} else if (argv.ratio) { + ratio = parseFloat(argv.ratio); +} + +if (argv.unique) { + unique = true; +} + +var outfile = argv._[0]; +var input = argv._[1]; + +function loadFile (file, callback) { + fs.readFile(file, function (err, res) { + return callback(err, { + svg: res, + id: path.basename(file).replace('.svg', '') + }); + }); +} + +function sortById (a, b) { + return b.id < a.id; +} + +var q = queue(16); + +filepaths(input).forEach(function (file) { + q.defer(loadFile, file); +}); + +q.awaitAll(function (err, buffers) { + if (err) throw err; + + buffers.sort(sortById); + + function saveLayout (err, formattedLayout) { + if (err) throw err; + fs.writeFile(outfile + '.json', stringify(formattedLayout, {space: ' '}), 'utf8', function (err) { + if (err) throw err; + }); + } + + function saveImage (err, layout) { + if (err) throw err; + spritezero.generateImage(layout, function (err, image) { + if (err) throw err; + fs.writeFile(outfile + '.png', image, function (err) { + if (err) throw err; + }); + }); + } + + var genLayout = unique ? spritezero.generateLayoutUnique : spritezero.generateLayout; + genLayout({ imgs: buffers, pixelRatio: ratio, format: true }, saveLayout); + genLayout({ imgs: buffers, pixelRatio: ratio, format: false }, saveImage); +}); diff --git a/package.json b/package.json index 31991f4..5d72518 100644 --- a/package.json +++ b/package.json @@ -17,21 +17,16 @@ "vector" ], "dependencies": { - "minimist": "^1.2.0", - "multiline": "^1.0.2", - "queue-async": "^1.2.1", - "json-stable-stringify": "^1.0.1", - "@mapbox/spritezero": "~5.0.0" + "@mapbox/spritezero": "^8.0.3", + "glob": "^10.2.6", + "minimist": "^1.2.8" }, "devDependencies": { - "eslint": "^4.0.0", - "tap": "^10.1.0" - }, - "engines": { - "node": ">=4.0.0" + "eslint": "^4.19.1", + "tap": "^10.7.3" }, "scripts": { "lint": "eslint bin/spritezero test/", "test": "npm run lint && tap test/test.js" } -} +} \ No newline at end of file diff --git a/prettier.config.cjs b/prettier.config.cjs new file mode 100644 index 0000000..0dfc5ea --- /dev/null +++ b/prettier.config.cjs @@ -0,0 +1,44 @@ +module.exports = { + // 一行最多 200 字符.. + printWidth: 200, + // 行尾需要有分号 + semi: true, + // 使用单引号 + singleQuote: true, + // 末尾需要有逗号 + trailingComma: 'none', + // 大括号内的首尾需要空格 + bracketSpacing: true, + // jsx 不使用单引号，而使用双引号 + jsxSingleQuote: false, + // jsx 标签的反尖括号需要换行 + jsxBracketSameLine: true, + // 箭头函数，只有一个参数的时候，也需要括号 + arrowParens: 'always', + // arrowParens: 'avoid', + + // 使用 2 个空格缩进 + tabWidth: 2, + + // 不使用缩进符，而使用空格 + useTabs: false, + + // 对象的 key 仅在必要时用引号 + quoteProps: 'as-needed', + // 每个文件格式化的范围是文件的全部内容 + rangeStart: 0, + rangeEnd: Infinity, + + // 不需要写文件开头的 @prettier + requirePragma: false, + // 不需要自动在文件开头插入 @prettier + insertPragma: false, + // 使用默认的折行标准 + proseWrap: 'preserve', + // 根据显示样式决定 html 要不要折行 + htmlWhitespaceSensitivity: 'css', + // vue 文件中的 script 和 style 内不用缩进 + vueIndentScriptAndStyle: false, + // 换行符使用 lf + endOfLine: 'lf' +};