Skip to content

gyxj/nodecli-gongye

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

脚手架工具其实就是node-cli的应用,创建脚手架工具就是创建一个node-cli应用。

1、创建项目文件夹,作为项目根目录【gongye-test】

2、进入项目根目录,npm init -y 初始化项目

3、打开 package.json 文件,增加"bin": "cli.js" , 作为应用入口文件

4、与 package.json 同级创建 cli.js 文件,而且应用入口文件必须要有文件头 #!/usr/bin/env node

5、与 package.json 同级创建 templates 文件夹,文件夹下添加脚手架在工作时需要生成文件的模板文件【 index.html 和 index.css】

6、使用 npm link 将当前 gongye-test link 到全局

7、在桌面创建 demo 文件夹,终端进入到文件夹下,运行 gongye-test,自动生成文件

核心代码如下:

// package.json:
{
  "name": "gongye-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": "cli.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.6",
    "inquirer": "^8.0.0"
  }
}

// cli.js
#!/usr/bin/env node
// Node cli 应用入口文件必须要有上面的文件头
// 如果是Linux 或者 macOS 系统下,还需要修改此文件的读写权限为 755
// 具体就是通过 chmod 755 cli.js 实现修改
// 脚手架的工作过程: 
// 1、通过命令行交互询问用户问题;
// 2、根据用户回答的结果生成文件。
const fs = require('fs')
const path = require('path')
// 需要下载 inquirer 模块
const inquirer = require('inquirer')
// 需要下载 ejs 模块
const ejs = require('ejs')
inquirer.prompt([
	{
		type: 'input',
		name: 'name',
		message: 'Product name?'
	}
])
.then(anwsers => {	// 根据用户的回答结果生成文件
	// 模板目录
	const tmpDir = path.join(__dirname, 'templates')
	// 目标目录
	const destDir = process.cwd()
	// 将模板下的文件全部转换到目标目录
	// 使用 fs.readdir 方法读取模板文件夹下的所有文件
	fs.readdir(tmpDir, (err, files) => {
		if (err) throw err
		files.forEach(file => {
			// 通过模板引擎渲染文件
			// renderFile 方法
			// 参数1:文件的绝对路径;
			// 参数2:模板引擎工作时的上下文;
			// 参数3:回调函数,渲染成功之后执行
			ejs.renderFile(path.join(tmpDir, file), anwsers, (err, result) => {
				if (err) throw err
				// fs.writeFileSync 接收两个参数,写入目录,写入内容
				fs.writeFileSync(path.join(destDir, file), result)
			})
		})
	})
})

// index.html:
<!DOCTYPE html>
<html>
<head>
	<title><%= name %></title>
</head>
<body>
	<h1><%= name %></h1>
</body>
</html>

// index.css:
body {
	margin: 0;
	background: #f0f0f0;
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published