玩轉(zhuǎn)編程語言:構(gòu)建自定義代碼生成器

在真實(shí)的軟件開發(fā)過程中，無論使用何種編程開發(fā)語言，都不可避免的會(huì)遇到代碼重復(fù)的問題。如何處理重復(fù)的問題，可以選擇情懷（手動(dòng)再敲一遍），也可以選擇 Copy-to-Copy ，或者選擇代碼生成器。正如在之前的文章 我的寫作工具鏈 中，我介紹過一種 Blog 生成器 hexo ，可以將 Markdown 格式的內(nèi)容自動(dòng)生成方便發(fā)布的 HTML 格式。本文將還原 hexo 的運(yùn)行原理，為解決類似問題提供一些參考思路。

示例：通過 Markdown 文件聲明模板（源代碼），通過腳本生成 HTML 文件（目標(biāo)代碼），并預(yù)覽代碼生成效果。

Step 1: 準(zhǔn)備環(huán)境 (dependencies)

開發(fā)語言 Node.js, 一個(gè)能夠運(yùn)行 JavaScript 的開放源代碼、跨平臺(tái)運(yùn)行環(huán)境。

  • npm init?—?初始化 root 目錄
  • npm i -s live-server?—?該模塊支持本示例生成靜態(tài) HTML 站點(diǎn)，提供熱部署能力
  • npm i -s nodemon?—?該模塊支持當(dāng)文件變化自動(dòng)執(zhí)行重構(gòu)任務(wù)
  • npm i -s concurrently?—?該模塊支持支持并發(fā)執(zhí)行任務(wù)、腳本(scripts/tasks)
  • npm i -s markdown-it?—?該模塊提供 Markdown 文件解析器
mkdir project-generator
mkdir project-generator/pages
mkdir project-generator/pages_meta
mkdir project-generator/js
mkdir project-generator/css
mkdir project-generator/images
mkdir project-generator/build_scripts
mkdir project-generator/build

cd project-generator
npm init?
npm i -s concurrently
npm i -s fs
npm i -s fs-extra
npm i -s markdown-it
npm i -s live-server?
npm i -s nodemon

[圖片上傳失敗...(image-7d14f7-1514002237128)]

Step 2: 準(zhǔn)備元數(shù)據(jù)

例如：pages/index.md

# Home page

Hello world!

[Link to another page](./other.html)

例如：pages_meta/index.json 用于存儲(chǔ)一些需要的元數(shù)據(jù)（參數(shù)、固定內(nèi)容等），JSON 文件格式方便后面調(diào)用。

{
  "lang": "en",
  "title": "Index",
  "stylesheets": ["./css/style.css"],
  "scripts": ["./js/main.js"],
  "charset": "utf-8",
  "description": "This is a page",
  "keywords": "page, sample",
  "author": "None",
  "favicon": "./images/favicon.png",
  "viewport": "width=device-width, initial-scale=1",
  "extra": []
}

Step 3: 編寫模板和構(gòu)建腳本（template & build Script）

代碼生成器中需要定制開發(fā)的部分包括 builder.js 和 pages_template.js。build.js 相當(dāng)于 main 函數(shù)，控制入口和流程，加載資源數(shù)據(jù)、調(diào)用 generator 任務(wù)，與 Makefile 和 Ant.xml 非常類似。pages_template.js 依賴的組件是 markdown-it ，負(fù)責(zé)將 Markdown 源文件轉(zhuǎn)換輸出成 HTML 文件。builder.js 將 pages_template.js 視為一個(gè)模塊引用：pageTemplate.generatePage(pageContent, metaData)) 因此可以根據(jù)需要定制多個(gè)不同的 XXX_template.js 或者在每個(gè) template.js 中定義其它函數(shù)。

builder.js

var pageTemplate = require('./page_template');

// All paths are relative to package.json.
var pagesPath = './pages';
var pagesMetaPath = './pages_meta';
var copyFolders = ['./images', './css', './js'];
var outputPath = './build';

// Clean
console.log('Cleaning previous build...');
for (var file of fs.readdirSync(outputPath)){
    fs.removeSync(path.join(outputPath, file));
}

//Loading
console.log('Loading pages metadata...');
  for(var pageMeta of fs.readdirSync(pagesMetaPath)){
    pagesMeta[pageMeta] = fs.readFileSync(path.join(pagesMetaPath,pageMeta),'utf8');
  }
}

// Generate
console.log('Generating pages...');
for(var page of Object.entries(pages)) {
    var pageName = page[0].slice(0, page[0].lastIndexOf('.'));
    var metaData = pagesMeta.hasOwnProperty(pageName+'.json')
      ? JSON.parse(pagesMeta[pageName+'.json'])
      : {};
    metaData.title = metaData.title || pageName;
    var pageContent = page[1];
    fs.writeFileSync(
      path.join(outputPath,pageName+'.html'),
      pageTemplate.generatePage(pageContent, metaData));
  }
}

// Copy
console.log('Copying folders...');
  for(var copyFolder of copyFolders){
    fs.copySync(copyFolder, path.join(outputPath,copyFolder));
  }

pages_template.js

var md = require('markdown-it')();

module.exports = {
  generatePage: function(pageContent,pageMeta){
    return`<!DOCTYPE html>
<html lang="${pageMeta.lang || this.defaultMeta.lang}">
  <head>
    <title>${pageMeta.title || this.defaultMeta.title}</title>
    <meta charset="${pageMeta.charset || this.defaultMeta.charset}">
    <meta name="description" content="${pageMeta.description || this.defaultMeta.description}">
    <meta name="keywords" content="${pageMeta.keywords || this.defaultMeta.keywords}">
    <meta name="author" content="${pageMeta.author || this.defaultMeta.author}">
</head>
<body>
  ${md.render(pageContent)}
</body>
</html>
    `;
  }
}

Step 4: 優(yōu)化任務(wù)腳本

在 Step 1 步驟中，npm init 創(chuàng)建了一個(gè)文件：package.json，我們可以定義其中的 “scripts” , 執(zhí)行 npm run start 將默認(rèn)在 1080 端口開啟 Web 服務(wù)。

[圖片上傳失敗...(image-6b1322-1514002237128)]

{
  "name": "coffee",
  "version": "1.0.0",
  "description": "beyond my coffee",
  "main": "index.js",
  "scripts": {  
    "build-pages": "node ./build_scripts/builder.js",
    "start": "concurrently --kill-others \"nodemon -e js,json,css,md -i build -x \\\"npm run build-pages\\\"\" \"live-server ./build\""
  },
  "author": "@RiboseYim"
}

$ npm run build-pages

> coffee@1.0.0 build-pages /generator-code
> node ./build_scripts/builder.js

Cleaning previous build...
Loading pages...
Loading pages metadata...
Generating pages...
Copying folders...
Done!

$ npm run start

> coffee@1.0.0 start /Users/yanrui/project/generator-code
> concurrently --kill-others "nodemon -e js,json,css,md -i build -x \"npm run build-pages\"" "live-server ./build"

[0] [nodemon] 1.14.1
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching: *.*
[0] [nodemon] starting `npm run build-pages`
[1] Serving "./build" at http://127.0.0.1:8080
[1] Ready for changes
[1] GET /js/main.js 404 42.133 ms - 23
[1] GET /js/main.js 404 12.204 ms - 23
[0]
[0] > coffee@1.0.0 build-pages /Users/yanrui/project/generator-code
[0] > node ./build_scripts/builder.js
[0]
[0] Cleaning previous build...
[0] Loading pages...
[0] Loading pages metadata...
[0] Generating pages...
[0] Copying folders...
[0] Done!
[0] [nodemon] clean exit - waiting for changes before restart
[1] Change detected build/index.html
[1] Change detected build/images
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,138評論 25贊 708
  • 什么是 NPM npm之于Node，就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey閱讀 6,367評論 2贊 36
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺，特此分享以備自己日后查看，也希望更多的人看到...
    小小字符閱讀 8,373評論 7贊 35
  • 高中兩年的陪伴，你的細(xì)心呵護(hù)，讓我產(chǎn)生了一種錯(cuò)覺，我以為，你是愛我的。 高中二年級的時(shí)候，你跟隨大家出去...
    安雨薇閱讀 430評論 0贊 0
  • 周六，我和彭澤在公司值班。百無聊賴之際，他開啟打印機(jī)，A4紙緩緩出來的沙沙聲打破了辦公室的寧靜。我問他在打印什么？...
    余想閱讀 442評論 3贊 3

友情鏈接更多精彩內(nèi)容