[Build] extract build iconfont (#1242)
This commit is contained in:
neverland
Binary file not shown.
Binary file not shown.
@@ -1,16 +1,7 @@
|
||||
const gulp = require('gulp');
|
||||
const postcss = require('gulp-postcss');
|
||||
const cssmin = require('gulp-clean-css');
|
||||
const iconfont = require('gulp-iconfont');
|
||||
const iconfontCss = require('gulp-iconfont-css');
|
||||
const fs = require('fs-extra');
|
||||
const config = require('./scripts/icon-config');
|
||||
const path = require('path');
|
||||
const shelljs = require('shelljs');
|
||||
const md5File = require('md5-file');
|
||||
const glob = require('glob');
|
||||
const iconLocalTemplate = require('./scripts/icon-local-template');
|
||||
const resolve = relativePath => path.resolve(__dirname, relativePath);
|
||||
|
||||
// compile component css
|
||||
gulp.task('compile', () => {
|
||||
@@ -24,81 +15,8 @@ gulp.task('compile', () => {
|
||||
|
||||
// copy lib files
|
||||
gulp.task('lib', ['compile'], () => {
|
||||
const ttf = glob.sync(resolve('./src/*.ttf'));
|
||||
ttf.forEach(ttf => fs.copySync(ttf, './lib/' + path.parse(ttf).base));
|
||||
fs.copySync('./lib', '../../lib/vant-css');
|
||||
fs.copySync('./lib', '../../es/vant-css');
|
||||
});
|
||||
|
||||
// extract svg from sketch
|
||||
function extractSvg() {
|
||||
shelljs.exec('./scripts/extract-icons.sh');
|
||||
fs.mkdirsSync(path.join(__dirname, './icons'));
|
||||
config.glyphs.forEach(icon => {
|
||||
const src = path.join(__dirname, './icons/', icon.src);
|
||||
if (fs.existsSync(src)) {
|
||||
fs.renameSync(src, path.join(__dirname, './icons', icon.css + '.svg'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// get icon unicode
|
||||
function getCodePoints() {
|
||||
const codePoints = {};
|
||||
config.glyphs.forEach((icon, index) => {
|
||||
const svgPath = path.join(__dirname, './icons/', icon.css + '.svg');
|
||||
if (fs.existsSync(svgPath)) {
|
||||
codePoints[icon.css] = 0xf000 + index;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// generate ttf from sketch && build icon.css
|
||||
gulp.task('icon-font-ttf', () => {
|
||||
extractSvg();
|
||||
return gulp
|
||||
.src(['icons/*.svg'])
|
||||
.pipe(
|
||||
iconfontCss({
|
||||
fontName: config.name,
|
||||
path: 'scripts/icon-template.css',
|
||||
targetPath: './icon.css',
|
||||
normalize: true,
|
||||
firstGlyph: 0xf000,
|
||||
fixedCodepoints: getCodePoints()
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
iconfont({
|
||||
fontName: config.name,
|
||||
formats: ['ttf']
|
||||
})
|
||||
)
|
||||
.on('glyphs', (glyphs, options) => {})
|
||||
.pipe(gulp.dest('icons'));
|
||||
});
|
||||
|
||||
gulp.task('icon-font', ['icon-font-ttf'], () => {
|
||||
// remove previous ttf
|
||||
const prevTTFs = glob.sync(resolve('./src/*.ttf'));
|
||||
prevTTFs.forEach(ttf => fs.removeSync(ttf));
|
||||
|
||||
// generate ttf hash
|
||||
const fontPath = resolve('./icons/vant-icon.ttf');
|
||||
const hash = md5File.sync(fontPath).slice(0, 6);
|
||||
fs.renameSync(fontPath, resolve(`./src/vant-icon-${hash}.ttf`));
|
||||
|
||||
// copy icon.css to src
|
||||
let source = fs.readFileSync(resolve('./icons/icon.css'), 'utf-8');
|
||||
source = source.replace('vant-icon.ttf', `vant-icon-${hash}.ttf`);
|
||||
fs.writeFileSync(resolve('./src/icon.css'), source);
|
||||
|
||||
// generate icon-local.css
|
||||
const localIconSource = iconLocalTemplate(config.name, hash);
|
||||
fs.writeFileSync(resolve('./src/icon-local.css'), localIconSource);
|
||||
|
||||
// upload ttf to cdn
|
||||
shelljs.exec(`superman cdn /zanui/icon ./src/vant-icon-${hash}.ttf`);
|
||||
});
|
||||
|
||||
gulp.task('build', ['lib']);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "vant-css",
|
||||
"version": "1.1.7",
|
||||
"description": "vant css.",
|
||||
"description": "vant css",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
"files": [
|
||||
@@ -9,18 +9,14 @@
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "gulp build",
|
||||
"build:icons": "gulp icon-font"
|
||||
"build": "gulp build"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^8.3.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-clean-css": "^3.9.0",
|
||||
"gulp-iconfont": "^9.0.2",
|
||||
"gulp-iconfont-css": "^2.1.0",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
"md5-file": "^4.0.0",
|
||||
"postcss-easy-import": "^3.0.0",
|
||||
"precss": "^2.0.0"
|
||||
}
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
basepath=$(dirname $0)
|
||||
|
||||
rm -rf $basepath/../icons
|
||||
sketchtool export slices --formats=svg --overwriting=YES --save-for-web=YES --output=$basepath/../icons $basepath/../assets/icons.sketch
|
||||
@@ -1,385 +0,0 @@
|
||||
module.exports = {
|
||||
name: 'vant-icon',
|
||||
glyphs: [
|
||||
{
|
||||
src: '关闭.svg',
|
||||
css: 'close'
|
||||
},
|
||||
{
|
||||
src: '升级地址.svg',
|
||||
css: 'upgrade'
|
||||
},
|
||||
{
|
||||
src: '加购.svg',
|
||||
css: 'add-o'
|
||||
},
|
||||
{
|
||||
src: '认证通过.svg',
|
||||
css: 'passed'
|
||||
},
|
||||
{
|
||||
src: '客服.svg',
|
||||
css: 'chat'
|
||||
},
|
||||
{
|
||||
src: '答疑.svg',
|
||||
css: 'question'
|
||||
},
|
||||
{
|
||||
src: '时钟.svg',
|
||||
css: 'clock'
|
||||
},
|
||||
{
|
||||
src: '金币.svg',
|
||||
css: 'gold-coin'
|
||||
},
|
||||
{
|
||||
src: '播放.svg',
|
||||
css: 'play'
|
||||
},
|
||||
{
|
||||
src: '暂停.svg',
|
||||
css: 'pause'
|
||||
},
|
||||
{
|
||||
src: '停止.svg',
|
||||
css: 'stop'
|
||||
},
|
||||
{
|
||||
src: 'more-o.svg',
|
||||
css: 'more-o'
|
||||
},
|
||||
{
|
||||
src: 'info-o.svg',
|
||||
css: 'info-o'
|
||||
},
|
||||
{
|
||||
src: 'share.svg',
|
||||
css: 'share'
|
||||
},
|
||||
{
|
||||
src: '喜欢.svg',
|
||||
css: 'like-o'
|
||||
},
|
||||
{
|
||||
src: '物流.svg',
|
||||
css: 'logistics'
|
||||
},
|
||||
{
|
||||
src: '编辑地址.svg',
|
||||
css: 'edit'
|
||||
},
|
||||
{
|
||||
src: '兑换.svg',
|
||||
css: 'exchange'
|
||||
},
|
||||
{
|
||||
src: '其他分店.svg',
|
||||
css: 'location'
|
||||
},
|
||||
{
|
||||
src: '购物车2.svg',
|
||||
css: 'cart'
|
||||
},
|
||||
{
|
||||
src: '店铺.svg',
|
||||
css: 'shop'
|
||||
},
|
||||
{
|
||||
src: '送礼.svg',
|
||||
css: 'gift'
|
||||
},
|
||||
{
|
||||
src: '联系人.svg',
|
||||
css: 'contact'
|
||||
},
|
||||
{
|
||||
src: 'wap首页.svg',
|
||||
css: 'wap-home'
|
||||
},
|
||||
{
|
||||
src: '积分.svg',
|
||||
css: 'points'
|
||||
},
|
||||
{
|
||||
src: '折扣.svg',
|
||||
css: 'discount'
|
||||
},
|
||||
{
|
||||
src: '积分礼包.svg',
|
||||
css: 'point-gift'
|
||||
},
|
||||
{
|
||||
src: '售后.svg',
|
||||
css: 'after-sale'
|
||||
},
|
||||
{
|
||||
src: '编辑资料.svg',
|
||||
css: 'edit-data'
|
||||
},
|
||||
{
|
||||
src: '删除.svg',
|
||||
css: 'delete'
|
||||
},
|
||||
{
|
||||
src: '记录.svg',
|
||||
css: 'records'
|
||||
},
|
||||
{
|
||||
src: '已完成.svg',
|
||||
css: 'completed'
|
||||
},
|
||||
{
|
||||
src: '认证.svg',
|
||||
css: 'certificate'
|
||||
},
|
||||
{
|
||||
src: '待发货2.svg',
|
||||
css: 'tosend'
|
||||
},
|
||||
{
|
||||
src: '已完成2.svg',
|
||||
css: 'sign'
|
||||
},
|
||||
{
|
||||
src: '首页.svg',
|
||||
css: 'home'
|
||||
},
|
||||
{
|
||||
src: '包邮.svg',
|
||||
css: 'free-postage'
|
||||
},
|
||||
{
|
||||
src: '生日特权.svg',
|
||||
css: 'birthday-privilege'
|
||||
},
|
||||
{
|
||||
src: '会员日特权.svg',
|
||||
css: 'member-day-privilege'
|
||||
},
|
||||
{
|
||||
src: '余额明细.svg',
|
||||
css: 'balance-details'
|
||||
},
|
||||
{
|
||||
src: '返现记录.svg',
|
||||
css: 'cash-back-record'
|
||||
},
|
||||
{
|
||||
src: '积分商城.svg',
|
||||
css: 'points-mall'
|
||||
},
|
||||
{
|
||||
src: '兑换记录.svg',
|
||||
css: 'exchange-record'
|
||||
},
|
||||
{
|
||||
src: '待付款.svg',
|
||||
css: 'pending-payment'
|
||||
},
|
||||
{
|
||||
src: '待接单.svg',
|
||||
css: 'pending-orders'
|
||||
},
|
||||
{
|
||||
src: '待发货.svg',
|
||||
css: 'pending-deliver'
|
||||
},
|
||||
{
|
||||
src: '待评价.svg',
|
||||
css: 'pending-evaluate'
|
||||
},
|
||||
{
|
||||
src: '密码可见.svg',
|
||||
css: 'password-view'
|
||||
},
|
||||
{
|
||||
src: '密码不见.svg',
|
||||
css: 'password-not-view'
|
||||
},
|
||||
{
|
||||
src: '单选.svg',
|
||||
css: 'check'
|
||||
},
|
||||
{
|
||||
src: '进入箭头.svg',
|
||||
css: 'arrow'
|
||||
},
|
||||
{
|
||||
src: 'arrow-left.svg',
|
||||
css: 'arrow-left'
|
||||
},
|
||||
{
|
||||
src: '搜索.svg',
|
||||
css: 'search'
|
||||
},
|
||||
{
|
||||
src: '成功.svg',
|
||||
css: 'success'
|
||||
},
|
||||
{
|
||||
src: '失败.svg',
|
||||
css: 'fail'
|
||||
},
|
||||
{
|
||||
src: '新增地址.svg',
|
||||
css: 'add'
|
||||
},
|
||||
{
|
||||
src: 'checked.svg',
|
||||
css: 'checked'
|
||||
},
|
||||
{
|
||||
src: 'warn.svg',
|
||||
css: 'warn'
|
||||
},
|
||||
{
|
||||
src: '清除搜索.svg',
|
||||
css: 'clear'
|
||||
},
|
||||
{
|
||||
src: 'underway.svg',
|
||||
css: 'underway'
|
||||
},
|
||||
{
|
||||
src: 'more.svg',
|
||||
css: 'more'
|
||||
},
|
||||
{
|
||||
src: '喜欢2.svg',
|
||||
css: 'like'
|
||||
},
|
||||
{
|
||||
src: '拍照.svg',
|
||||
css: 'photograph'
|
||||
},
|
||||
{
|
||||
src: '二维码失效.svg',
|
||||
css: 'qr-invalid'
|
||||
},
|
||||
{
|
||||
src: '二维码.svg',
|
||||
css: 'qr'
|
||||
},
|
||||
{
|
||||
src: '添加.svg',
|
||||
css: 'add2'
|
||||
},
|
||||
{
|
||||
src: '照片.svg',
|
||||
css: 'photo'
|
||||
},
|
||||
{
|
||||
src: '微信支付.svg',
|
||||
css: 'wechat'
|
||||
},
|
||||
{
|
||||
src: '支付宝支付.svg',
|
||||
css: 'alipay'
|
||||
},
|
||||
{
|
||||
src: 'wap导航.svg',
|
||||
css: 'wap-nav'
|
||||
},
|
||||
{
|
||||
src: '有赞E卡.svg',
|
||||
css: 'ecard-pay'
|
||||
},
|
||||
{
|
||||
src: '余额支付.svg',
|
||||
css: 'balance-pay'
|
||||
},
|
||||
{
|
||||
src: '找人代付.svg',
|
||||
css: 'peer-pay'
|
||||
},
|
||||
{
|
||||
src: '信用卡支付.svg',
|
||||
css: 'credit-pay'
|
||||
},
|
||||
{
|
||||
src: '借记卡支付.svg',
|
||||
css: 'debit-pay'
|
||||
},
|
||||
{
|
||||
src: '其他支付方式.svg',
|
||||
css: 'other-pay'
|
||||
},
|
||||
{
|
||||
src: '购物车1.svg',
|
||||
css: 'shopping-cart'
|
||||
},
|
||||
{
|
||||
src: '浏览记录.svg',
|
||||
css: 'browsing-history'
|
||||
},
|
||||
{
|
||||
src: '商品收藏.svg',
|
||||
css: 'goods-collect'
|
||||
},
|
||||
{
|
||||
src: '店铺收藏.svg',
|
||||
css: 'shop-collect'
|
||||
},
|
||||
{
|
||||
src: '收礼物.svg',
|
||||
css: 'receive-gift'
|
||||
},
|
||||
{
|
||||
src: '送出赠品.svg',
|
||||
css: 'send-gift'
|
||||
},
|
||||
{
|
||||
src: '设置.svg',
|
||||
css: 'setting'
|
||||
},
|
||||
{
|
||||
src: '优惠券.svg',
|
||||
css: 'coupon'
|
||||
},
|
||||
{
|
||||
src: '礼品卡支付.svg',
|
||||
css: 'gift-card-pay'
|
||||
},
|
||||
{
|
||||
src: '货到付款.svg',
|
||||
css: 'cash-on-deliver'
|
||||
},
|
||||
{
|
||||
src: '电话.svg',
|
||||
css: 'phone'
|
||||
},
|
||||
{
|
||||
src: '描述.svg',
|
||||
css: 'description'
|
||||
},
|
||||
{
|
||||
src: '卡.svg',
|
||||
css: 'card'
|
||||
},
|
||||
{
|
||||
src: '会员余额.svg',
|
||||
css: 'value-card'
|
||||
},
|
||||
{
|
||||
src: '礼卡.svg',
|
||||
css: 'gift-card'
|
||||
},
|
||||
{
|
||||
src: 'HOT.svg',
|
||||
css: 'hot'
|
||||
},
|
||||
{
|
||||
src: 'NEW.svg',
|
||||
css: 'new'
|
||||
},
|
||||
{
|
||||
src: '新品.svg',
|
||||
css: 'new-arrival'
|
||||
},
|
||||
{
|
||||
src: '热卖.svg',
|
||||
css: 'hot-sale'
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
module.exports = (fontName, hash) => {
|
||||
return `@font-face {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-family: '${fontName}';
|
||||
src: url('./${fontName}-${hash}.ttf') format('truetype');
|
||||
}`;
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@font-face {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-family: '<%= fontName %>';
|
||||
src: url('https://img.yzcdn.cn/zanui/icon/<%= fontName %>.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 "<%= fontName %>";
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
|
||||
&__info {
|
||||
color: #fff;
|
||||
left: 100%;
|
||||
top: -.5em;
|
||||
font-size: .5em;
|
||||
padding: 0 .3em;
|
||||
text-align: center;
|
||||
min-width: 1.2em;
|
||||
line-height: 1.2;
|
||||
position: absolute;
|
||||
border-radius: .6em;
|
||||
box-sizing: border-box;
|
||||
background-color: $red;
|
||||
transform: translateX(-50%);
|
||||
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
<% _.each(glyphs, function(glyph) { %>.van-<%= cssClass %>-<%= glyph.fileName %>:before {
|
||||
content: "\<%= glyph.codePoint %>";
|
||||
}
|
||||
<% }); %>
|
||||
@@ -2,5 +2,5 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-family: 'vant-icon';
|
||||
src: url('./vant-icon-243435.ttf') format('truetype');
|
||||
src: url('../icon/vant-icon-9b71af.ttf') format('truetype');
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-family: 'vant-icon';
|
||||
src: url('https://img.yzcdn.cn/zanui/icon/vant-icon-243435.ttf') format('truetype');
|
||||
src: url('https://img.yzcdn.cn/vant/vant-icon-9b71af.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
|
||||
+27
-1095
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user