iconfont.cn 下载至本地操作过于频繁的解决办法“之一”

利用node下载资源到项目中，正常引用即可。

步骤：

1. 下载主文件内容
2. 获取主文件中兼容资源的路径并下载存储
3. 编辑@font-face {…}后存储主文件

预先准备

我的路径是这样:

|-src
  |-assets
	|-iconfont
  |-lib
	|-js
	  |-downloadIcon.js
|-package.json

说明：
iconfont：存储下载的文件
downloadIcon.js： 执行操作的文件，由于写过一次就不动了，所以放在库里
package.json： script加一个操作，单独执行下载

正式开始

先看下iconfont上要获取的link

更新图标后需要刷新下这个地址：

然后看下这个主文件需要编辑的部分：

Step 1. 接着就开始编写操作文件downloadIcon.js

const path = require('path')
const request = require('request')
const fs = require('fs')

// get my project online link on iconfont.cn
const copyUrl = process.env.npm_package_scripts_icon.split('URL=')[1]
const iconfont = 'https:' + copyUrl
/**
 * [request iconfont]
 * @param  {[type]} iconfont [online link]
 * @param  {[type]} (error,  response,  body [string]
 */
request(iconfont, (error, response, body) => {
  if (!error && response.statusCode === 200) {
    /**
     * [get fontface useage url]
     */
    let form = to = 0
    let urlList = []

    while (form !== -1 && to !== -1){
      form = to + 1
      form = body.indexOf("url(", form)
      to = body.indexOf(")", form + 1)

      if(form !== -1 && to !== -1){
        urlList.push(body.substr(form + 5, to - form - 6))
      }
    }

    // duplicate removal
    urlList = [...new Set( urlList.map(_url => _url.split("#")[0]) )]

    /**
     * [edit @font-face {...} str]
     * 1. delete base64
     * 2. delete 'ie6-ie8' row in fontface
     * 3. delete '#iconfont'
     * 4. replace file path to local relative path
     * 5. save edited fontface + classes
     */
    // 1. delete base64
    urlList.splice(1, 1)

    // 2. delete ie6-ie8 row in fontface
    let fontface = body.split('.iconfont')[0]
    let ie9Index = fontface.indexOf('/* IE9 */')
    let base64Index = fontface.indexOf("url('data:application")
    fontface = fontface.replace(fontface.slice(ie9Index, base64Index), '\n  src: ')

    // 3. delete #iconfont
    fontface = fontface.replace('#iconfont', '')

    // 4. replace file path to local relative path
    let replaceStr = urlList[0].split('.').slice(0, 3).join('.')
    fontface = fontface.replace(new RegExp(replaceStr, 'g'), './iconfont')

    // 5. save edited fontface + classes
    saveFile('iconfont.css', fontface + '.iconfont' + body.split('.iconfont')[1])

    /**
     * [download every file]
     */
    urlList.forEach((i, j) => {
      // get every file's format to build up filename
      let filename = 'iconfont.' + i.split('.')[3].split('?')[0]
      downOther('https:' + i, filename)
    })
  }
})

function downOther (url, filename) {
  request(url, (error, response, body) => {
    saveFile(filename, body)
  })
}

function saveFile (filename, data) {
  let relativePath = '../../assets/iconfont/'
  // __dirname is get this file's path
  fs.writeFileSync(path.join(__dirname, relativePath + filename), data)
}

Step 2. package.json 增加script单独执行下载

script: {
	"icon":  "node src/lib/js/downloadIcon.js URL=xxx"
}

Step 3. 最后

npm run icon

结束后就会看到assets/iconfont下有了主文件confront.css和其他兼容文件，打开主文件可以发现兼容文件路径也更换了。

以后icon更新步骤：

1. iconfont刷新主文件路径，复制到package.json下icon的URL值
2. npm run icon, 更新内容会直接覆盖

结束

本文地址：https://blog.csdn.net/weixin_44283478/article/details/107372714