【iconfont 阿里图标库】在项目中下载图标库的自动化脚本

本文将介绍如何通过执行脚本一步完成 iconfont 图标库下载解压移动到目标目录等步骤。

  • 仅执行一个 JS 脚本即可;
  • 脚本兼容 windows、MacOS、Linux等系统;
  • 可配置多个图标库下载;
  • 利用 cookie 从 iconfont.cn 下载用户的图标库,目前 iconfont.cn cookie 过期时间为一年,所以不需要经常去更新 cookie。

依赖包介绍

  • fs-extra: 是系统 fs 模块的扩展,提供了更多便利的 API,并继承了 fs 模块的 API;
  • shelljs是 Unix Shell 在 NodeJS API 层的轻量级实现,兼顾 windows;
  • axios一个基于 Promise 的 HTTP 库,可以用在浏览器和 NodeJS 中;
  • extract-zip:用于解压 ZIP 压缩包;
  • chalk:终端颜色输出插件。

编写自动化脚本

新建 js 脚本文件 build/iconfont.js,内容如下:

const path = require('path')
const fse = require('fs-extra')
const shelljs = require('shelljs')
const axios = require('axios')
const extract = require('extract-zip')
const chalk = require('chalk')

// 项目版本号,用于生成带版本号的 iconfont 图标库
const version = '1.2.3'

// 假设你有一个本地配置文件(不加入 git 版本控制中,因为敏感信息只保存到开发机)
const localConfig = {
	iconfont: {
		cookie: '...'  // 登录 iconfont.cn 后的 cookie
	}
}

// 一个或多个图标库
let objects = [
	// name: 目录名称标识, url: 图标库下载地址。类似于:https://www.iconfont.cn/api/project/download.zip?pid=...&ctoken=...
	{name: 'iconfont', url: '...'}
]

let progress = 0  // 多个图标库时记录进度

main()

async function main() {
	for(let i = 0; i < objects.length; i++) {
		await processor(objects[i])
	}
}

// 图标库处理程序
function processor(object) {
	return new Promise(resolve => {
		// 确保存在目标输出目录
		fse.ensureDirSync(path.resolve(process.cwd(), 'output'))

		let downloadFilename = `${object.name}.zip`
		let zipFilepath = path.resolve(process.cwd(), 'output', downloadFilename)
		let targetDir = path.resolve(process.cwd(), `output/${object.name}-${version}`)

		axios.get(object.url + `&_t=${Date.now()}`, {
			responseType: 'stream',
			headers: {
				cookie: localConfig.iconfont.cookie
			}
		}).then(res => {
			if(/^2/.test(res.status)) {
				res.data.pipe(fse.createWriteStream(zipFilepath))

				res.data.on('end', async () => {
					if(fse.existsSync(zipFilepath)) {
						shelljs.rm('-rf', path.resolve(process.cwd(), `output/${object.name}-*`))

						try {
							await extract(zipFilepath, {dir: process.cwd()})
							shelljs.mv(`${process.cwd()}/font_**`, targetDir)
							shelljs.rm('-f', zipFilepath)
							progress++
							console.log(chalk.green(`${object.name} 图标库已下载,当前进度: ${progress}/${objects.length}`))

							resolve()
						} catch (err) {
							throw err
						}
					} else {
						console.log(chalk.yellow(`找不到下载文件: \`${zipFilepath}\`.`))
					}
				})
			} else {
				console.log(chalk.yellow(`iconfont 资源包下载失败.`))
			}
		}).catch(err => {
			throw err
		})
	})
}

在项目中使用自动化脚本

package.jsonscripts中增加如下内容:

"scripts": {
	"iconfont": "node build/iconfont.js"
}

登录 iconfont.cn 后,从 iconfont.cn 复制 cookie,在本地配置文件中将 cookie 添加进去:(安全警告⚠️,不要将 cookie 分享给任何人)

命令行 cd到项目根目录,执行 npm run iconfont即可完成图标库自动下载解压到目标目录中:

0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!