自定义 gulp 插件公司项目优化字体文件9M 感觉很消耗性能，查了下文档把要用到的字抽取出来从9M 到240K

公司项目优化字体文件9M 感觉很消耗性能，查了下文档把要用到的字抽取出来从9M 到240K

安装gulp

yarn add gulp -g

新建gulpfile 文件

gulp 是任务类型的工具新建个默认的任务

var { src, dest } = require('gulp');
var gulp = require('gulp')
var concat = require('gulp-concat');
gulp.task('default', function(done) {
  // 将你的默认的任务代码放在这
  src('home/**/*.tsx')
	.pipe(concat('all.txt'))
    .pipe(getText())
    .pipe(dest('output/'))
	done()
	
});

这里的home 是整个组件的文件夹 concat 是将所有的文件都合并成一个 getText()是自定义的功能，用来将中文都筛出来

var { Transform } = require('stream');
function getText(options){
    let t = new Transform({
        objectMode:true,
        transform(file,encoding,callback){
            let text = file.contents.toString()
            let lines = text.split(/\r?\n/)
            let arr = []
            lines.forEach(line=>{
                if(line.match(/[\u4e00-\u9fa5]+.*/g)){
                    let item = line.replace(/[^\u4e00-\u9fa5]+/g,'')
                    arr.push(item)
                }
            })

            text = Array.from(new Set(arr)).join()
            // console.log(text,typeof text)
            text = Buffer.from(text)
            file.contents = text
            return callback(null,file)
        }
    })
    return t
}

通过 Transform 处理文件流，pipe管道处理过的后面的都是文件流的方式传递，这里就需要先将file 转成字符串，然后通过正则切割将每一行都切成一个字符，遍历整个数组然后通过正则校验将中文存起来，去重，然后再转Buff 调用callback 传递给下一个管道

然后再CMD 里面运行 gulp 最终得到 all.txt文件里面就是我们要的中文

然后通过 font-spider 将字体抽离出来

安装 font-spider

    yarn add font-spider  -g

新建一个index.html文件将处理得到的中文复制进去

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: 'convert-font';
      src: url('./Hanyi-Ya-Cool-Black-W.ttf');
      font-weight: normal;
      font-style: normal;
    }

    .convert-font {
      font-family: 'convert-font';
    }
  </style>
</head>

<body>
  <div>
    0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
  </div>
  </br>
  <div class="convert-font">
   0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

  </div>
</body>

</html>

在当前文件夹运行CMD 运行

    font-spider  index.html

就得到我们要的字体文件从9M 压缩到了240K 完美