一个自动更新iconfont的工具:iconfont-manager

·  阅读 400

前言

iconfont图标库是比较受欢迎的,但每一次的更新都非常麻烦,大概需要以下6个步骤:

  1. 打开iconfont登录页,输入账号密码,登录
  2. 找到需要下载的图标库详情页
  3. 点击下载按钮,等待下载完成
  4. 将下载好的压缩包解压并重命名为iconfont文件夹
  5. 删除项目目录中的iconfont文件夹
  6. 将解压重命名后的iconfont文件夹拖到项目目录

为减少这种无意义的重复操作,我们可以使用iconfont-manager这个工具来解决。iconfont-manger是一个可以管理所有iconfont图标库更新的工具。

安装

npm install iconfont-manager -g
复制代码

功能

1. 初始化项目

使用场景:第一次安装iconfont-manager

操作步骤:

  1. 输入iconfont官网的手机号和密码(目前不支持GitHub账号授权登录,毕竟不科学上网的话,GitHub时不时会抽风。若之前是GitHub账号,绑定手机号即可)。
  2. 自动执行爬虫脚本,将账号的所有iconfont图标库信息爬取并存储在用户目录.iconfontrc文件(不同平台的用户目录不同,注意查看命令执行之后的提示,如下图所示),目前这个配置文件的位置不能随意更改。
  3. 修改.iconfontrc文件的filePath属性,设置各个图标库对应的保存地址(请使用绝对路径),也可通过功能5图形化界面管理进行设置。
iconfont-manager init <phoneNumber> <password>
复制代码

.iconfontrc格式如下:

{
  "projects": [
    {
      "id": "2936807",
      "name": "仓库系统",
      "user": "18812345678",
      "password": "abc123",
      "filePath": "初始化后,这个字段是空的,需要手动设置图标保存的绝对路径"
    },
    {
      "id": "2291089",
      "name": "门户网站",
      "user": "18812345678",
      "password": "abc123",
      "filePath": "/Users/wupeng/project/warehouse/src/assets"
    }
  ]
}
复制代码

2. 查看所有图标库

使用场景:查看保存的所有图标库,可以快速复制图标库id,执行更新图标库任务

基本原理:读取用户目录下的.iconfontrc文件,将所有的图标库信息通过列表的形式展现。

iconfont-manager ls
复制代码

3. 更新单个图标库

使用场景:更新图标库,只需输入一个图标库id(可以使用功能2先打印出来,复制你需要的id)

iconfont-manager update <projectId>
复制代码

4. 更新多个图标库

使用场景:同时更新多个图标库,多个id空格隔开

iconfont-manager update <projectId...>
复制代码

5. 图形化界面管理

使用场景:浏览器打开一个图形化管理界面,可在这个界面修改图标库信息,执行更新等操作;其实功能1初始化之后也可以通过这个命令打开一个图形化界面,在这个界面补充好filePath保存路径,记得点击“全部保存”按钮。

iconfont-manager ui
复制代码

6. 更新临时项目

使用场景:如果.iconfontrc文件中没有这个图标库,可以使用这个命令临时下载一个图标库,信息将不会保存到.iconfontrc

iconfont-manager updateOne <id> <name> <user> <password> <filePath>
复制代码

7. 新增项目

使用场景:来了一个新项目,把要图标库下载到项目目录中。项目信息会写入.iconfontrc文件中,同时最后一个参数可以选择是否立即更新图标库,该参数默认是false,如果是true,信息保存进配置文件同时,也会自动更新图标库。

iconfont-manager add <id> <name> <user> <password> <filePath> [immediately]
复制代码

补充说明

支持多用户,可以修改.iconfontrc文件配置即可,如下图例子两个用户手机号不同。比如,如果你有两个手机号,两个用户的数据可以存储在同一个配置文件中。

{
  "projects": [
    {
      "id": "2936807",
      "name": "仓库系统",
      "user": "18812345678",
      "password": "abc123",
      "filePath": "/Users/wupeng/project/warehouse/src/assets"
    },
    {
      "id": "2291089",
      "name": "另一个用户",
      "user": "18866668888",
      "password": "abc456",
      "filePath": "/Users/wupeng/project/official-website/src/assets"
    }
  ]
}
复制代码

项目地址

GitHub:github.com/gaoxiaosi/i…

NPM:www.npmjs.com/package/ico…

如果您觉得项目有趣或对您有所帮助,请到GitHub给个Star,谢谢!

技术核心是将图标库的信息保存在本地配置文件,通过node.js读取本地配置文件,执行不同的指令,再通过puppeteer去爬取iconfont官网并下载图标库,再将下载好的文件解压保存在指定目录。下一篇文章我会讲整个的功能设计和详细的代码实现!

分类:
前端
标签:
分类:
前端
标签: