[Build] extract build iconfont (#1242)

.gitignore

@@ -9,4 +9,4 @@ node_modules
 docs/dist
 test/coverage
 packages/vant-css/build
-packages/vant-css/icons
+packages/icon/svg

build/build-changelog.sh

@@ -19,4 +19,4 @@ github_changelog_generator \
   --no-unreleased \
   --max-issues 200 \
   --since-tag v1.0.0 \
-  -o $basepath/../../docs/markdown/changelog.generated.md
+  -o $basepath/../docs/markdown/changelog.generated.md

build/build-components.js

@@ -3,17 +3,19 @@
  */
 const fs = require('fs-extra');
 const path = require('path');
-const compiler = require('vue-sfc-compiler');
-const esDir = path.join(__dirname, '../../es');
-const libDir = path.join(__dirname, '../../lib');
-const srcDir = path.join(__dirname, '../../packages');
 const babel = require('babel-core');
+const compiler = require('vue-sfc-compiler');
+
+const esDir = path.join(__dirname, '../es');
+const libDir = path.join(__dirname, '../lib');
+const srcDir = path.join(__dirname, '../packages');
 const compilerOption = {
   babel: {
-    extends: path.join(__dirname, '../../.babelrc')
+    extends: path.join(__dirname, '../.babelrc')
   }
 };
-const whiteList = ['vant-css', 'test', 'demo'];
+
+const whiteList = /(demo|vant-css|test|\.md)$/;
 
 // clear dir
 fs.emptyDirSync(esDir);
@@ -30,13 +32,13 @@ function compile(dir, jsOnly = false) {
   files.forEach(file => {
     const absolutePath = path.join(dir, file);
 
-    // 移除不需要的文件
+    // reomve unnecessary files
-    if (whiteList.indexOf(file) !== -1) {
+    if (whiteList.test(file)) {
       fs.removeSync(absolutePath);
-      // 遍历文件夹
+      // scan dir
     } else if (isDir(absolutePath)) {
       return compile(absolutePath);
-      // 编译 .vue 文件
+      // compile sfc
     } else if (/\.vue$/.test(file) && !jsOnly) {
       const source = fs.readFileSync(absolutePath, 'utf-8');
       fs.removeSync(absolutePath);
@@ -54,6 +56,7 @@ function compile(dir, jsOnly = false) {
 }
 
 process.env.BABEL_ENV = 'commonjs';
+
 fs.copySync(esDir, libDir);
 compile(libDir);
 

build/build-entry.js

@@ -1,11 +1,11 @@
-const Components = require('./get-components')();
 const fs = require('fs-extra');
 const glob = require('fast-glob');
 const path = require('path');
 const uppercamelize = require('uppercamelcase');
-const version = process.env.VERSION || require('../../package.json').version;
+const Components = require('./get-components')();
-const tips = '// This file is auto gererated by build/bin/build-entry.js';
+const version = process.env.VERSION || require('../package.json').version;
-const root = path.join(__dirname, '../../');
+const tips = '// This file is auto gererated by build/build-entry.js';
+const root = path.join(__dirname, '../');
 const join = dir => path.join(root, dir);
 
 function buildVantEntry() {
@@ -48,11 +48,11 @@ export default {
 };
 `;
 
-  fs.writeFileSync(path.join(__dirname, '../../packages/index.js'), content);
+  fs.writeFileSync(path.join(__dirname, '../packages/index.js'), content);
 }
 
 function buildDemoEntry() {
-  const dir = path.join(__dirname, '../../packages');
+  const dir = path.join(__dirname, '../packages');
   const demos = fs.readdirSync(dir)
     .filter(name => fs.existsSync(path.join(dir, `${name}/demo/index.vue`)))
     .map(name => `'${name}': () => wrapper(import('../../packages/${name}/demo'), '${name}')`);

build/build-iconfont.js

@@ -0,0 +1,79 @@
+/**
+ * build iconfont from sketch
+ */
+const fs = require('fs-extra');
+const gulp = require('gulp');
+const path = require('path');
+const glob = require('fast-glob');
+const shell = require('shelljs');
+const md5File = require('md5-file');
+const iconfont = require('gulp-iconfont');
+const iconfontCss = require('gulp-iconfont-css');
+const config = require('../packages/icon/config');
+const local = require('../packages/icon/config/template-local');
+
+const iconDir = path.join(__dirname, '../packages/icon');
+const cssDir = path.join(__dirname, '../packages/vant-css/src');
+const svgDir = path.join(iconDir, 'svg');
+const sketch = path.join(iconDir, 'assert/icons.sketch');
+const template = path.join(iconDir, 'config/template.css');
+
+// get md5 from sketch
+const md5 = md5File.sync(sketch).slice(0, 6);
+const ttf = `${config.name}-${md5}.ttf`;
+
+// extract svg from sketch
+// should install sketchtool first
+// install guide: https://developer.sketchapp.com/guides/sketchtool/
+shell.exec(
+  `sketchtool export slices --formats=svg --overwriting=YES --save-for-web=YES --output=${svgDir} ${sketch}`
+);
+
+// remove previous ttf
+const prevTTFs = glob.sync(path.join(iconDir, '*.ttf'));
+prevTTFs.forEach(ttf => fs.removeSync(ttf));
+
+// rename svg
+config.glyphs.forEach((icon, index) => {
+  const src = path.join(svgDir, icon.src);
+  if (fs.existsSync(src)) {
+    fs.renameSync(src, path.join(svgDir, icon.css + '.svg'));
+  }
+});
+
+// generate ttf from sketch && build icon.css
+gulp.task('ttf', () => {
+  return gulp
+    .src([`${svgDir}/*.svg`])
+    .pipe(
+      iconfontCss({
+        fontName: config.name,
+        path: template,
+        targetPath: '../vant-css/src/icon.css',
+        normalize: true,
+        firstGlyph: 0xf000,
+        cssClass: ttf // this is a trick to pass ttf to template
+      })
+    )
+    .pipe(
+      iconfont({
+        fontName: ttf.replace('.ttf', ''),
+        formats: ['ttf']
+      })
+    )
+    .pipe(gulp.dest(iconDir));
+});
+
+gulp.task('default', ['ttf'], () => {
+  // generate icon-local.css
+  fs.writeFileSync(
+    path.join(cssDir, 'icon-local.css'),
+    local(config.name, ttf)
+  );
+
+  // remove svg
+  fs.removeSync(svgDir);
+
+  // upload ttf to cdn
+  shell.exec(`superman cdn /vant ${path.join(iconDir, ttf)}`);
+});

build/build-lib.js

@@ -1,7 +1,7 @@
 /**
  * Build npm lib
  */
-require('shelljs/global');
+const shell = require('shelljs');
 const signale = require('signale');
 const tasks = [
   'lint',
@@ -14,6 +14,6 @@ const tasks = [
 
 tasks.forEach(task => {
   signale.pending(task);
-  exec(`npm run ${task} --silent`);
+  shell.exec(`npm run ${task} --silent`);
   signale.success(task);
 });

build/build-style-entry.js

@@ -9,7 +9,7 @@ const dependencyTree = require('dependency-tree');
 const SEP = path.sep;
 
 function build(folder, isESModule) {
-  const dir = path.resolve(__dirname, '../../', folder);
+  const dir = path.resolve(__dirname, '../', folder);
   components.forEach(componentName => {
     const content = analyzeDependencies(componentName, dir)
       .map(component => isESModule ? `import '../../vant-css/${component}.css';` : `require('../../vant-css/${component}.css');`);
@@ -39,7 +39,7 @@ function build(folder, isESModule) {
   }
 
   function checkComponentHasStyle(componentName) {
-    return fs.existsSync(path.join(__dirname, `../../${folder}/vant-css/`, `${componentName}.css`));
+    return fs.existsSync(path.join(__dirname, `../${folder}/vant-css/`, `${componentName}.css`));
   }
 }
 

build/get-components.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const path = require('path');
 
 module.exports = function() {
-  const dirs = fs.readdirSync(path.resolve(__dirname, '../../packages'));
+  const dirs = fs.readdirSync(path.resolve(__dirname, '../packages'));
   const excludes = ['index.js', 'vant-css', 'mixins', 'utils', '.DS_Store'];
   return dirs.filter(dirName => excludes.indexOf(dirName) === -1);
 };

docs/src/demo-entry.js

@@ -1,4 +1,4 @@
-// This file is auto gererated by build/bin/build-entry.js
+// This file is auto gererated by build/build-entry.js
 import { wrapper } from './demo-common';
 
 export default {

docs/src/docs-entry.js

@@ -1,4 +1,4 @@
-// This file is auto gererated by build/bin/build-entry.js
+// This file is auto gererated by build/build-entry.js
 export default {
   'changelog.en-US': () => import('../markdown/changelog.en-US.md'),
   'changelog.generated': () => import('../markdown/changelog.generated.md'),

docs/src/mobile.js

@@ -4,7 +4,6 @@ import App from './WapApp';
 import routes from './router';
 import progress from 'nprogress';
 import '../../packages/vant-css/src/index.css';
-import '../../packages/vant-css/src/icon-local.css';
 import 'vant-doc/src/helper/touch-simulator';
 import './components/nprogress.css';
 

package.json

@@ -15,15 +15,16 @@
   "scripts": {
     "bootstrap": "yarn || npm i && cd ./packages/vant-css/ && yarn || npm i && cd ../../",
     "dev": "npm run build:file && webpack-serve --config build/webpack.dev.js",
-    "build:file": "node build/bin/build-entry.js",
+    "lint": "./node_modules/.bin/eslint ./packages --ext .js,.vue",
-    "build:components": "node build/bin/build-components.js --color",
+    "build:file": "node build/build-entry.js",
+    "build:components": "node build/build-components.js --color",
     "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color",
     "build:vant": "cross-env NODE_ENV=production webpack --color --config build/webpack.build.js && cross-env NODE_ENV=production webpack -p --color --config build/webpack.build.js",
-    "build:style-entry": "node build/bin/build-style-entry.js",
+    "build:style-entry": "node build/build-style-entry.js",
-    "build:changelog": "sh build/bin/build-changelog.sh",
+    "build:changelog": "sh build/build-changelog.sh",
-    "deploy": "rimraf docs/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js && gh-pages -d docs/dist",
+    "build:iconfont": "gulp --gulpfile ./build/build-iconfont.js",
-    "dist": "npm run bootstrap && node build/bin/build-lib.js",
+    "build:lib": "npm run bootstrap && node build/build-lib.js",
-    "lint": "./node_modules/.bin/eslint ./packages --ext .js,.vue",
+    "build:site": "rimraf docs/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js && gh-pages -d docs/dist",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "open test/coverage/index.html",
@@ -74,11 +75,15 @@
     "fast-glob": "^2.2.2",
     "fast-vue-md-loader": "^1.0.3",
     "gh-pages": "^1.2.0",
+    "gulp": "^3.9.1",
+    "gulp-iconfont": "^9.2.0",
+    "gulp-iconfont-css": "^2.1.0",
     "html-webpack-plugin": "3.2.0",
     "husky": "^0.14.3",
     "jest": "^23.1.0",
     "jest-serializer-vue": "^2.0.2",
     "lint-staged": "^7.1.3",
+    "md5-file": "^4.0.0",
     "postcss": "^6.0.22",
     "postcss-calc": "^6.0.0",
     "postcss-easy-import": "^3.0.0",

packages/icon/config/template-local.js

@@ -1,8 +1,8 @@
-module.exports = (fontName, hash) => {
+module.exports = (fontName, ttf) => {
   return `@font-face {
   font-style: normal;
   font-weight: normal;
   font-family: '${fontName}';
-  src: url('./${fontName}-${hash}.ttf') format('truetype');
+  src: url('../icon/${ttf}') format('truetype');
 }`;
 };

packages/icon/config/template.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: normal;
   font-family: '<%= fontName %>';
-  src: url('https://img.yzcdn.cn/zanui/icon/<%= fontName %>.ttf') format('truetype');
+  src: url('https://img.yzcdn.cn/vant/<%= cssClass %>') format('truetype');
 }
 
 .van-icon {
@@ -36,7 +36,7 @@
   }
 }
 
-<% _.each(glyphs, function(glyph) { %>.van-<%= cssClass %>-<%= glyph.fileName %>:before {
+<% _.each(glyphs, function(glyph) { %>.van-icon-<%= glyph.fileName %>:before {
   content: "\<%= glyph.codePoint %>";
 }
 <% }); %>

packages/icon/demo/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-const icons = require('../../../packages/vant-css/scripts/icon-config');
+import icons from '../../../packages/icon/config';
 
 export default {
   i18n: {

packages/index.js

@@ -1,4 +1,4 @@
-// This file is auto gererated by build/bin/build-entry.js
+// This file is auto gererated by build/build-entry.js
 import Actionsheet from './actionsheet';
 import AddressEdit from './address-edit';
 import AddressList from './address-list';
@@ -68,7 +68,7 @@ import TreeSelect from './tree-select';
 import Uploader from './uploader';
 import Waterfall from './waterfall';
 
-const version = '1.1.6';
+const version = '1.1.7';
 const components = [
   Actionsheet,
   AddressEdit,

packages/vant-css/gulpfile.js

@@ -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']);

packages/vant-css/package.json

@@ -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": "gulp build"
-    "build:icons": "gulp icon-font"
   },
   "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"
   }

packages/vant-css/scripts/extract-icons.sh

@@ -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

packages/vant-css/src/icon-local.css

@@ -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');
 }

packages/vant-css/src/icon.css

@@ -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 {