[Build] extract build iconfont (#1242)

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);
 
-    // 移除不需要的文件
-    if (whiteList.indexOf(file) !== -1) {
+    // reomve unnecessary files
+    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 tips = '// This file is auto gererated by build/bin/build-entry.js';
-const root = path.join(__dirname, '../../');
+const Components = require('./get-components')();
+const version = process.env.VERSION || require('../package.json').version;
+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);
 };