欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-07 20:40:55
iconfont.cn 下载至本地操作过于频繁的解决办法“之一”利用node下载资源到项目中,正常引用即可。步骤:下载主文件内容获取主文件中兼容资源的路径并下载存储编辑@font-face {…}后存储主文件预先准备我的路径是这样:|-src |-assets|-iconfont |-lib|-js |-downloadIcon.js|-package.json说明:iconfont:存储下载的文件downloadIcon.js: 执行操作的文件,由于...

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

步骤:

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

预先准备

我的路径是这样:

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

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

正式开始

先看下iconfont上要获取的link
iconfont.cn 下载至本地操作过于频繁的解决办法“之一”
更新图标后需要刷新下这个地址:
iconfont.cn 下载至本地操作过于频繁的解决办法“之一”

然后看下这个主文件需要编辑的部分:
iconfont.cn 下载至本地操作过于频繁的解决办法“之一”
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

相关标签: nodejs