手把手教你如何开发一个简单的脚手架

#!/usr/bin/env node
// 用于命令行交互
const inquirer = require('inquirer')
// 用户获取文件路径
const path = require('path')
// 用于读取写入文件
const fs = require('fs')
// 用于模板引擎渲染
const ejs = require('ejs')

inquirer.prompt([
  {
    type:'input',
    name:'name',
    message: 'Project name?'
  }
])
.then(answers => {
  console.log(answers)
  // 引入path模块，模板目录写绝对路径
  const tmplDir = path.join(__dirname, 'templates')
  // 目标目录:目标执行的目录，一般在cwd目录
  const destDir = process.cwd()
  
  // 引入fs模块，将模板下面文件全部转换到目标目录
  fs.readdir(tmplDir, (err, files) => {
    if(err) throw err
    files.forEach(file => {
      // 文件的相对路径
      console.log(file) // index.html    style.css
      
      // 引入ejs模块
      // 通过模板引擎渲染路径对应的文件
      // 第一个参数是文件的绝对路径
      // 第二个参数是模板引擎工作时候的数据上下文
      // 第三个参数是回调函数
      ejs.renderFile(path.join(tmplDir, file), answers, (err, result) => {
        if(err) throw err 
        // 成功的话就是已经渲染过的文件
        console.log(result)
        // 写入文件，目标目录绝对路径，第二个参数是文件内容
        fs.writeFileSync(path.join(destDir, file), result)
      })
    })
  })
})

创建另一个文件夹，使用命令行

node-cli
> ? Project name? myProject

可以看到在新的项目中，生成了两个文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>myProject</title>
</head>
<body>
  
</body>
</html>

style.css

body{
  margin: 0;
  background-color: bisque;
}

这样我们就完成了一个简单的自制脚手架。

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。