基本目录
gulp
-gulpfile.js
-package.json
src
font
-template.scss
svg
-bank-ABC.svg
依赖的包
点击直接查看api
gulp-iconfont
gulp-iconfont-css
模板css
点击可预览和下载的对应格式的css模板
var iconfont = require('gulp-iconfont'),
iconfontCss = require('gulp-iconfont-css');
gulp.task('h5-svg-build', function () {
let svg ='../src/svg/*.svg';
let fontName = 'iconfont';
gulp.src(svg)
.pipe(iconfontCss({
fontName: fontName,
path: '../src/font/template.scss', //模板信息的路径
targetPath: 'font.scss', //生成的css样式的路径
fontPath: '../src/font/' //生成的iconfont的路径
}))
.pipe(iconfont({
fontName: fontName, // required
prependUnicode: true, // recommended option
formats: ['ttf', 'eot', 'woff', 'svg'], // default, 'woff2' and 'svg' are available
timestamp: new Date().getTime()
}))
.pipe(gulp.dest('../src/font'));
});
最终生成的目录
gulp
-gulpfile.js
-package.json
src
font
-font.scss
-iconfont.eot
-iconfont.svg
-iconfont.ttf
-iconfont.woff
-template.scss
svg
-bank-ABC.svg