专栏首页睿哥杂货铺玩转编程语言:基于Node.js构建自定义代码生成器
原创

玩转编程语言:基于Node.js构建自定义代码生成器

在真实的软件开发过程中,无论使用何种编程开发语言,都不可避免的会遇到代码重复的问题。如何处理重复的问题,可以选择情怀(手动再敲一遍),也可以选择 Copy-to-Copy ,或者选择代码生成器。正如在之前的文章 我的写作工具链 中,我介绍过一种 Blog 生成器 hexo ,可以将 Markdown 格式的内容自动生成方便发布的 HTML 格式。本文将还原 hexo 的运行原理,为解决类似问题提供一些参考思路。

示例:通过 Markdown 文件声明模板(源代码),通过脚本生成 HTML 文件(目标代码),并预览代码生成效果。

Step 1: 准备环境 (dependencies)

开发语言 Node.js, 一个能够运行 JavaScript 的开放源代码、跨平台运行环境。

  • npm init — 初始化 root 目录
  • npm i -s live-server — 该模块支持本示例生成静态 HTML 站点,提供热部署能力
  • npm i -s nodemon — 该模块支持当文件变化自动执行重构任务
  • npm i -s concurrently — 该模块支持支持并发执行任务、脚本(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

Step 2: 准备元数据

例如:pages/index.md

# Home page

Hello world!

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

例如:pages_meta/index.json 用于存储一些需要的元数据(参数、固定内容等),JSON 文件格式方便后面调用。

{
  "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: 编写模板和构建脚本(template & build Script)

代码生成器中需要定制开发的部分包括 builder.jspages_template.js。build.js 相当于 main 函数,控制入口和流程,加载资源数据、调用 generator 任务,与 Makefile 和 Ant.xml 非常类似。pages_template.js 依赖的组件是 markdown-it ,负责将 Markdown 源文件转换输出成 HTML 文件。builder.js 将 pages_template.js 视为一个模块引用:pageTemplate.generatePage(pageContent, metaData)) 因此可以根据需要定制多个不同的 XXX_template.js 或者在每个 template.js 中定义其它函数。

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: 优化任务脚本

在 Step 1 步骤中,npm init 创建了一个文件:package.json,我们可以定义其中的 “scripts” , 执行 npm run start 将默认在 1080 端口开启 Web 服务。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SDN 技术指南(一):架构概览

    软件定义网络(Software-defined networking,SDN),一种新的网络架构。SDN 提出的控制与转发平面分离、网络状态集中控制、支持软件编...

    RiboseYim
  • Linux 性能诊断:负载评估

    从load avgerage等总括性的数据着手,参考CPU使用率和I/O等待时间等具体的数字,从而自顶向下快速排查各进程状态。

    RiboseYim
  • 操作系统原理:How Linux Works(三):Memory

    内存是计算机中与CPU进行沟通的桥梁,用于暂时存放CPU中的运算数据。Linux 内核的内存管理机制设计得非常精妙,对于 Linux 内核的性能有很大影响。在早...

    RiboseYim
  • 想在老牌病理期刊上发生信,你得学这篇!

    大家好,今天和大家分享的是去年10月份发表在Modern Pathology (IF:5.988)杂志上的一篇文章,“Genetic analysis of p...

    科研菌
  • WSAEventSelect模型 ---应用实例,重写TCP服务器实例

    // WSAEvent.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include <winsock2.h> #...

    用户1154259
  • python3安装locust说明

    前段时间有位朋友看完我之前的文章Locust + python + influxdb + grafana 展示性能压测QPS图表之后,咨询我如何安装Locust...

    Devops海洋的渔夫
  • 重置多说配置后的问题,这是不让我从良的节奏啊(附禁用谷歌在线字体的方法)!

    本想今天发文从良,金盆洗手,从此不再折腾博客,安心写文章的。结果,发现多说又不能同步服务器评论到本地了!特么真是怕什么来什么啊!想来这金盆暂时用不着了。。。 想...

    张戈
  • 开源性能压测工具 locust

    在定位系统瓶颈时,考虑被测系统 cpu,网络,磁盘,缓存和数据库情况,同时也要关注测试机器的情况。

    orientlu
  • 四川省网商协会参观指导薇信小伙伴,共同助力四川网络经济发展

    2018年6月6日下午,泸州市工商局副局长徐俭、广元市商务局副调研员吴春玉、南充市工商局副局长胡成健和四川省网商协会秘书长王丽娜一行参观腾讯成都分公司,并莅临薇...

    场景录小程序
  • 8个技巧,提高你的数据分析工作效率

    前言 我刚和一位老友恢复了联系。她一直对数据科学很感兴趣,但10个月前才涉足这一领域——作为一个数据科学家加入了一个组织。我明显感觉到她已经在新的岗位上学到了很...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券