使用Node.js脚本自动下载并集成阿里iconfont图标库到Flutter项目/n/n本文提供一个Node.js脚本,用于自动下载阿里iconfont图标库的压缩包到本地,并解压缩文件,将ttf字体文件放置到指定的文件夹,生成对应的dart文件,并追加tff资源文件路径到pubspec.yaml文件。/n/n### 脚本功能/n/n1. 将指定目录下的download.zip文件的云图标库的文件解压出来。/n2. 将解压出来的ttf文件放到指定的文件夹下。/n3. 根据解压文件中的html文件生成对应的dart文件。/n4. 将上面的关键变量提出来,可以在调用js的时候通过命令行的方式传入上面的变量。/n5. 追加tff资源文件路径到pubspec.yaml文件下内容:/n/n### 脚本代码/n/njavascript/nconst fs = require('fs');/nconst path = require('path');/nconst unzipper = require('unzipper');/n/n// 获取命令行传入的关键变量/nconst downloadUrl = process.argv[2]; // 下载链接/nconst outputDir = process.argv[3]; // 输出目录/nconst fontDir = process.argv[4]; // ttf字体文件输出目录/nconst dartFile = process.argv[5]; // 生成的dart文件名称/n/n// 下载zip文件并解压缩/nconst downloadAndUnzip = async (url, dir) => {/n const response = await fetch(url);/n const buffer = await response.buffer();/n const zipFile = path.join(dir, 'download.zip');/n fs.writeFileSync(zipFile, buffer);/n fs.createReadStream(zipFile)/n .pipe(unzipper.Extract({ path: dir }))/n .on('close', () => {/n // 解压完成后删除zip文件/n fs.unlinkSync(zipFile);/n console.log('Unzip completed!');/n // 生成dart文件/n generateDartFile(path.join(dir, 'iconfont.css'), dartFile);/n // 拷贝ttf字体文件/n copyFontFiles(path.join(dir, 'iconfont.ttf'), fontDir);/n console.log('Copy font files completed!');/n // 追加tff资源文件路径到pubspec.yaml文件/n appendToPubspecYaml(fontDir);/n console.log('Append path to pubspec.yaml completed!');/n });/n};/n/n// 生成dart文件/nconst generateDartFile = (cssFile, dartFile) => {/n const cssContent = fs.readFileSync(cssFile, 'utf-8');/n const regex = /.(icon-/w+):before/s*{/s*content:/s*['']//(/w+)['']/g;/n const icons = {};/n let match;/n while ((match = regex.exec(cssContent))) {/n const name = match[1].replace('-', '_');/n const code = match[2];/n icons[name] = '//u' + code;/n }/n const dartContent = `class Icons {${Object.entries(icons) .map(([name, code]) => ` static const IconData ${name} = IconData(0x${code}, fontFamily: 'IconFont');`) .join('/n')}}`;/n fs.writeFileSync(dartFile, dartContent);/n};/n/n// 拷贝ttf字体文件/nconst copyFontFiles = (srcFile, dstDir) => {/n const dstFile = path.join(dstDir, 'iconfont.ttf');/n fs.copyFileSync(srcFile, dstFile);/n};/n/n// 追加tff资源文件路径到pubspec.yaml文件/nconst appendToPubspecYaml = (fontDir) => {/n const yamlFile = path.join(process.cwd(), 'pubspec.yaml');/n const content = fs.readFileSync(yamlFile, 'utf-8');/n const pattern = /fonts:/s*(/n/s{2}-/s{2}family: 'IconFont',/s{2}fonts:/s*)?/; // 匹配pubspec.yaml中fonts部分/n const match = pattern.exec(content);/n if (match) {/n const indent = match[1] ? ' ' : ' ';/n const fontPath = path.relative(path.dirname(yamlFile), fontDir).replace(////g, '/');/n const fonts = `- family: 'IconFont'${indent}fonts:${indent} - asset: ${fontPath}/iconfont.ttf`;/n const yamlContent = content.replace(pattern, `fonts:/n${fonts}`);/n fs.writeFileSync(yamlFile, yamlContent);/n }/n};/n/ndownloadAndUnzip(downloadUrl, outputDir);/n/n/n### 使用方法/n/n1. 保存以上代码为download-iconfont.js文件。/n2. 在命令行中执行以下命令:/n/n/nnode download-iconfont.js <downloadUrl> <outputDir> <fontDir> <dartFile>/n/n/n其中,<downloadUrl>是iconfont的下载链接,<outputDir>是解压缩后的文件输出目录,<fontDir>是ttf字体文件输出目录,<dartFile>是生成的dart文件名称。/n/n例如:/n/n/nnode download-iconfont.js https://at.alicdn.com/t/font_1234567_abcd.zip ./icons ./fonts lib/icons.dart/n/n/n执行完成后,./icons目录下会有解压缩后的文件,./fonts目录下会有拷贝出来的ttf字体文件,lib/icons.dart文件会生成对应的dart文件,并且tff资源文件路径会被追加到pubspec.yaml文件下。/n/n### 注意事项/n/n* 确保您的系统安装了Node.js和unzipper库:npm install unzipper/n* 使用前请先将阿里iconfont图标库下载到本地,并获取到下载链接。/n* 脚本会将解压后的文件放在outputDir目录下,请确保该目录存在。/n* 脚本会将ttf字体文件放置到fontDir目录下,请确保该目录存在。/n* 脚本会将生成的dart文件放置到dartFile路径下。/n* 脚本会将tff资源文件路径追加到pubspec.yaml文件下,请确保pubspec.yaml文件位于项目根目录下。/n/n### 总结/n/n本文提供了一个Node.js脚本,可以自动下载、解压缩阿里iconfont图标库并集成到Flutter项目中,方便开发人员快速使用阿里iconfont图标库。

Node.js脚本:自动下载、解压缩阿里iconfont图标库并集成到Flutter项目

原文地址: https://www.cveoy.top/t/topic/ly6F 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录