从零搭建脚手架详细记录(一) - 修改模板文件

上篇文章主要记录了从 GitHub 上下载模板文件，这次主要记录用 Metalsmith 和 Handlebars 修改模板文件。

参考

基于node.js平台的脚手架开发经历

模板文件

之前的模板文件是静态的，下载下来后直接就使用了。现在我想根据用户输入，将 package.json 的 name 改了。很简单，使用 handlebar 的语法，将package.json 的 name 改成如下：

……
"name": "{{projectName}}",
……

这样子，Handlebars 在编译时就会使用 metadata 里的 projectName 的值了。其他的一样的道理，这里只以 name 为例。

Metalsmith 和 Handlebars

首先安装：

npm install metalsmith handlebars

首先在 lib 下创建一个 generator.js 文件，在 go 函数中调用即可。修改模板的的功能在 generator.js 中实现。修改模板分为以下几步：

• 下载模板文件（已实现）
• 将文件内容提取出来，转换为字符串
• 使用 handlebar 将模板内容字符串替换成用户输入的值
• Metalsmith build 成最终文件
• 删除下载下来的模板文件

//generator.js
const Metalsmith = require('metalsmith')
const Handlebars = require('handlebars')
const rm = require('rimraf').sync
const chalk = require('chalk')
const _ = require('lodash')

module.exports = function(metadata = {}, source, destination = '.') {
 if (!source) {
  return Promise.reject(new Error(`无效的source：${source}`))
 }
 
 return new Promise((resolve, reject) => {
  Metalsmith(process.cwd())
   .metadata(metadata) //metadata 为用户输入的内容
   .clean(false)
   .source(source) //模板文件 path
   .destination(destination) //最终编译好的文件存放位置
   .use((files, metalsmith, done) => {
    Object.keys(files).forEach(fileName => { //遍历替换模板
     if (!_.startsWith(fileName, 'src/font')) { //判断是否为字体文件，字体文件不用替换
      const fileContentsString = files[fileName].contents.toString() //Handlebar compile 前需要转换为字符创
      files[fileName].contents = new Buffer(Handlebars.compile(fileContentsString)(metalsmith.metadata()))
     }
    })
    done()
   }).build(err => { // build
    rm('source')  //删除下载下来的模板文件，‘source’是路径
    if (err) {
     console.log(chalk.red(`Metalsmith build error: ${err}`))
     return reject(err)
    } else {
     return resolve()
    }
   })
 })
}

需要注意的是，字体文件、图片等不能用 handlebar 替换。需要判断一下。

到这里，模板文件应该就替换成功了。