压缩字体 gulp-font-spider

拿UI给的字体直接用，字体太大，直接影响网站首次加载速度。利用 gulp-font-spider 提取用到的字体，去除没用到的字体，大大减少了加载字体文件的大小。
如果Vue项目要用压缩字体，用 fontmin 。

官网 http://font-spider.org

1. 按需压缩：从原字体中剔除没有用到的字符，可以将数 MB 大小的中文字体压缩成几十 KB
2. 简单可靠：完全基于 HTML 与 CSS 分析进行本地处理，无需 js 与服务端辅助
3. 自动转码：将字体转码成所有浏览器支持的格式，包括老旧的 IE6 与现代浏览器
4. 图标字体：除了常规的字体支持外，还支持图标字体（字蛛 v1.0.0 新特性）

Tips:

• 仅支持固定的文本与样式，不支持 javascript 动态插入的元素与样式
• .otf 字体需要转换成 .ttf 才能被压缩
• 仅支持 utf-8 编码的 HTML 与 CSS 文件
• CSS content 属性只支持普通文本，不支持属性、计数器等特性

先安装  npm install gulp-font-spider --save-dev

var gulp = require( 'gulp' );

var fontSpider = require( 'gulp-font-spider' );





gulp.task('fontspider',function () {

  gulp.src('./src/*.html')

  .pipe(fontSpider())

})



//将压缩完的字体移到dist目录下，使用定时器是因为压缩字体完没有回调，可能会打包完之前就copy了字体文件

gulp.task('copyFont',function() {

  setTimeout(function(){

    return gulp

    .src('./src/style/font/*.ttf')

    .pipe(gulp.dest(dirs.dist + '/font'))

  },2000)

})



gulp.task('defualt', ['fontspider']);

 

压缩完后会生产一个.font-spider的目录，会将原文件放到此目录，以后压缩的时候，会自动检测此目录提取此目录的文件压缩，不需要担心是否重新压缩的不是源文件。