Git Product home page Git Product logo

fontmin-spider's Introduction

fontmin-spider

Analyze which fonts are used on the page and eliminate the ones that are not used to get a smaller font file

Install

npm install fontmin-spider

Usage

const { spider, parse } = require('fontmin-spider')

;(async () => {
  const basePath = '/home/site/'
  // Recursively read all html files in the /home/site/ directory
  // default: **/*.html
  await spider({ basePath })

  /* 
    // css
    p {
      font-family: 'fontName';
    }

    // html
    <p>Analyze which fonts are used on the page and eliminate the ones that are not used to get a smaller font file</p>
  */
  const files = ['/home/site/index.html', '/home/site/post/index.html', '/home/site/page/index.html']
  // It only parses, it does not compress
  const fontMaps = parse(basePath, files)
  console.log(fontMaps)
  /*
    {
      fontName: {
        selector: [ 'p' ],
        path: '/home/site/font/font-file.ttf',
        chars: 'Analyzewhicfotsrudpgm'
      }
      ....
    }
  */
})()

This is an example: compress only specified characters, e.g. only CJK (CJK Unified Ideographs) characters

const { spider } = require('fontmin-spider')
function getCJK(str: string) {
  const reg =
    /[\u4e00-\u9fa5\u3040-\u30ff\u31f0-\u31ff\uff00-\uff9f\u3000-\u303f\uff01-\uff0f\uff1a-\uff20\uff3b-\uff40\uff5b-\uff60\uffe0-\uffe6]/g
  const cjkChars = str.match(reg)
  return cjkChars ? cjkChars.join('') : ''
}
;(async () => {
  const basePath = '/home/site/'
  // Recursively read all html files in the /home/site/ directory
  // default: **/*.html
  await spider({
    basePath,
    /**
     * Execute the filter function after parsing is complete
     * @param { { selector: string[]; path: string; chars: string } } declaredFamilyMap Font parameters
     */
    afterFilter(declaredFamilyMap) {
      for (const [, value] of Object.entries(declaredFamilyMap)) {
        value.chars = getCJK(value.chars)
      }
    }
  })
})()

API

spider(options)

Crawl the fonts referenced by the specified .html file for compression. matching the text used according to the css selector, compressing on demand

options.basePath

Type: string

Required: true

You can think of it as the root of the website

options.source

Type: string | string[]

See fast-glob for details

options.backup

Type: boolean

Default: true

backup font (font.backup.ttf)

options.reserveText

Type: string | object

Reserved text. For example, when using JavaScript to add text dynamically. the fontmin-spider will not be able to parse the text and you will need to add the reserved text manually

const { spider, parse } = require('fontmin-spider')

;async () => {
  const basePath = '/home/site/'
  // Even if 'ABCDEFG' is not used, 'fontmin-spider' does not eliminate it and remains in the font file
  await spider({ basePath, reserveText: 'ABCDEFG' })

  // Settings for specific fonts only
  /* p {
      font-family: 'fontName';
    } 
  */
  await spider({ basePath, reserveText: { fontName: 'ABCDEFG', fontName2: '1234567890' } })
}

options.ignore

Type: string[]

See fast-glob for details

parse(basePath, files)

basePath

Type: string

Required: true

You can think of it as the root of the website

files

Type: string[]

Required: true

Array type html file (absolute path)

filter

Type: Function

Required: false

Execute when all the used fonts are parsed (the strings are not parsed, you can use the afterFilter method if you need to process the strings)

afterFilter

Type: Function

Required: false

After parsing is complete, execute

fontmin-spider's People

Contributors

lete114 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.