feat(build): convert md to html

zhouhongxuan · zhouhongxuan · commit aecf176aa655 · 2018-12-17T12:17:11.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+build
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "frontend-tech-list",
+  "version": "1.0.0",
+  "description": "学习文章的知识往往是碎片化的。而前端涉及到的面很广，这些知识如果不进行有效梳理，则无法相互串联、形成体系。因此，我结合工作体会将抽象出了一些前端基础能力，并将看过、写过的一些不错的文章进行整理，形成了一份（纯）前端技术清单。",
+  "main": "index.js",
+  "scripts": {
+    "build": "node script/md2html.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alienzhou/frontend-tech-list.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/alienzhou/frontend-tech-list/issues"
+  },
+  "homepage": "https://github.com/alienzhou/frontend-tech-list#readme",
+  "devDependencies": {
+    "picnic": "^6.5.0",
+    "showdown": "^1.9.0"
+  }
+}
diff --git a/script/md2html.js b/script/md2html.js
@@ -0,0 +1,29 @@
+const showdown = require('showdown');
+const path = require('path');
+const fs = require('fs');
+
+function convertMd2Html() {
+    const md = fs.readFileSync(path.resolve(__dirname, '../README.md'), 'utf-8');
+    showdown.setFlavor('github');
+    const converter = new showdown.Converter();
+    const mdHtml = converter.makeHtml(md);
+    const buildDir = path.resolve(__dirname, '../build');
+    if (!fs.existsSync(buildDir)) {
+        fs.mkdirSync(buildDir)
+    }
+    require.resolve('picnic');
+
+    // const style = fs.readFileSync(path.resolve(__dirname, '../script/style.css'), 'utf-8');
+    const style = fs.readFileSync(require.resolve('picnic'), 'utf-8');
+    const tpl = fs.readFileSync(path.resolve(__dirname, '../script/tpl.html'), 'utf-8');
+
+    html = tpl
+        .replace(/\{\{style\}\}/, `<style>${style}</style>`)
+        .replace(/\{\{md\}\}/, mdHtml);
+
+    fs.writeFileSync(path.resolve(buildDir, 'index.html'), html, 'utf-8');
+    console.log('convert md to html success!');
+}
+
+module.exports = convertMd2Html;
+process.argv[1] === __filename && convertMd2Html();
diff --git a/script/tpl.html b/script/tpl.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    {{style}}
+    <title>Frontend Tech List: an overall frontend-tech list for developers</title>
+</head>
+<body>
+    <main style="margin: 50px auto; max-width: 800px;">
+        {{md}}
+    </main>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+node_modules`
	`2`	`+package-lock.json`
	`3`	`+build`