使用Gulp将svg图标批量生成iconfont字体文件邢毅彪15 Minutes2018年8月26日

前言

在很多公司， 尤其设计师独立部门的公司， 想让设计师帮忙维护iconfont不但有很大的沟通成本，而且对于前端和设计来讲使用起来都不是很顺手。刚好周末抽空，借助gulp写了一个自动生成iconfont的工具， 分享给大家。

实现

gulp中要想实现svg转换成iconfont，有很成熟的库来做这件事， 我们需要做的就只是引用，做好配置。
如果想直接拿轮子来用， github地址，大家可以参考。下面是具体实现和简单思路：

1. 首先先写build task

const fontName = 'icon'

gulp.task('build', () => {
  return gulp.src('./svg/*.svg')
    .pipe(iconfontCss({
      fontName: fontName,
      path: './templates/iconfont.css',
      targetPath: '../css/iconfont.css',
      fontPath: '../fonts/'
    }))
    .pipe(iconfont({
      fontName: fontName,
      formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
      normalize: true,
      options: {
        fixedWidth: false,
        normalize: false,
        fontHeight: 512,
        descent: -32,
        normalize: true
      }
    }))
    .on('glyphs', function (glyphs, options) {
      // CSS templating, e.g.           
      //console.log(glyphs, options);
    })
    .pipe(gulp.dest('./icon/fonts/'));
})

其中fontName为将来生成的class前缀， 我这里写的是icon,即生成的类名全部已icon-开始。path路径为读取的模板路径，targetPath, 和fontPath为最终生成的css和字体文件的路径，而最后一步的dest，熟悉gulp的同学应该都知道，只是用来配置最终字体文件生成目录的。

2. 因为我们每次有新的图标增加时都要重新构建， 为了消除bug，我们需要先clean一下工作目录。clean task比较简单

gulp.task('clean', () => {
  return gulp.src('./icon', { read: false })
    .pipe(clean())
})

3. 建立默认任务，依次执行clean -> build任务

gulp.task('default', gulpSequence('clean', 'build', () => {
  console.log('end!')
}))

4. css模板文件用于生成css文件的模板，如下:

@font-face {
	font-family: "<%= fontName %>";
	src: url('<%= fontPath %><%= fontName %>.eot');
	src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
		url('<%= fontPath %><%= fontName %>.woff') format('woff'),
		url('<%= fontPath %><%= fontName %>.ttf') format('truetype');
}

[class^="icon-"] {
	font-family: "<%= fontName %>" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

<% _.each(glyphs, function(glyph) { %>
.icon-<%= glyph.fileName %>:before {
	content: "\<%= glyph.codePoint %>";
}
<% }); %>

完整代码如下：

const gulp = require('gulp');
const iconfont = require('gulp-iconfont');
const iconfontCss = require('gulp-iconfont-css');
const clean = require("gulp-clean");
const gulpSequence = require('gulp-sequence')

const fontName = 'icon'

// 构建任务
gulp.task('build', () => {
  return gulp.src('./svg/*.svg')
    .pipe(iconfontCss({
      fontName: fontName,
      path: './templates/iconfont.css',
      targetPath: '../css/iconfont.css',
      fontPath: '../fonts/'
    }))
    .pipe(iconfont({
      fontName: fontName,
      formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
      normalize: true,
      options: {
        fixedWidth: false,
        normalize: false,
        fontHeight: 512,
        descent: -32,
        normalize: true
      }
    }))
    .on('glyphs', function (glyphs, options) {
      // CSS templating, e.g.           
      //console.log(glyphs, options);
    })
    .pipe(gulp.dest('./icon/fonts/'));
})

// 清除构建
gulp.task('clean', () => {
  return gulp.src('./icon', { read: false })
    .pipe(clean())
})

gulp.task('default', gulpSequence('clean', 'build', () => {
  console.log('end!')
}))