Yeoman是什么？
Yeoman为何方神圣，说他有三头六臂一点都不夸张。
因为他由三部分组成：yo(脚手架工具)、grunt(等构建工具)、npm(等包管理器)。
官方文档中给他的定位为scaffolding tool，其实就是脚手架工具，可以帮助前端开发人员量身定制化自己的脚手架，省去copy环节。
使用 yeoman generator可以帮助我们构建项目结构、安装依赖等重复性操作，然而已有的generator有时并不能满足需求，所以可以使用yeoman的API来构建自己的生成器。
通过定制好自己的generator之后，只需要几个命令，就可以使用自己的脚手架，并且自动化生成项目文件结构、配置文件、依赖包等。
接下来开始敲黑板、划重点了！！！
配置开发环境
需要安装node.js
安装Yeoman的命令行工具和开发Yeoman生成器的工具 generator-generator
npm install -g yo
npm install -g generator-generator
初始化项目
yo generator
执行上述命令，执行前，不需要新建文件夹，yo generator会帮我们建好文件夹。Yeoman会在终端提出几个问题，这是一个交互式的配置过程。项目名自己设置，必须以generator-开头，协议选择MIT，协议完成后，Yeoman会自动安装项目依赖。当然可以终止掉自动安装，自己使用cnpm或者yarn进行安装，用了都说好。
yeoman.png
最后生成的项目目录：
generator-vue-test
├ generators
├ app
├ index.js
├ templates
├ dummyfile.txt
├ __tests__
├ app.js
├ LICENSE
├ README.md
├ package.json
配置
/generators/app/index.js 是Yeoman的配置文件，生成器入口文件，在这里进行我们自己脚手架的配置
generators/app/templates/是默认存放文件的目录，所有模板文件都放在这个目录下，最后生成的脚手架也只有这个文件夹下的内容。
prompting 接受用户输入阶段
module.exports = class extends Generator {
prompting() {
// Have Yeoman greet the user.
this.log(yosay(
'Welcome to the awe-inspiring ' + chalk.red('generator-downloads') + ' generator!'
));
const prompts = [{
type: 'confirm',
name: 'someAnswer',
message: 'Would you like to enable this option?',
default: true
}];
return this.prompt(prompts).then(props => {
// To access props later use this.props.someAnswer;
this.props = props;
});
}
};
封装了 inquirer，在终端提供一个交互式的配置过程。可以根据提供的API，进行适当的修改，实现通用的脚手架。
- this.appname: 获取当前文件夹名称
- this.user.git.name(): 获取全局git用户名
- this.user.git.email(): 获取全局git邮箱
- this.github.username(): 获取github用户名
const prompts = [{
type: 'confirm',
name: 'someAnswer',
message: 'Would you like to enable this option?',
default: true
},{
type: 'input',
name: 'name',
message: 'Your project name',
default: this.appname
},{
type: 'input',
name: 'description',
message: 'description',
},{
type: 'input',
name: 'author',
message: 'author',
default: this.user.git.name()
},{
type: 'input',
name: 'email',
message: 'email',
default: this.user.git.email()
}];
这里实现了让用户输入作者、项目名、email。
writing 生成项目目录结构阶段
通过this.fs，可以使用所有文件的方法，只用使用mem-fs editor 模块的接口
writing() {
this.fs.copy(
this.templatePath('build/'),
this.destinationPath('build/')
);
this.fs.copy(
this.templatePath('config/'),
this.destinationPath('config/')
);
this.fs.copy(
this.templatePath('src/'),
this.destinationPath('src/')
);
this.fs.copy(
this.templatePath('mock/'),
this.destinationPath('mock/')
);
this.fs.copy(
this.templatePath('static/.gitkeep'),
this.destinationPath('static/.gitkeep')
);
this.fs.copy(
this.templatePath('.babelrc'),
this.destinationPath('.babelrc')
);
this.fs.copy(
this.templatePath('.eslintrc.js'),
this.destinationPath('.eslintrc.js')
);
this.fs.copyTpl(
this.templatePath('package.json'),
this.destinationPath('package.json'), {
title: this.props.name,
description: this.props.description,
author: this.props.author,
email: this.props.email
}
);
this.fs.copy(
this.templatePath('README.md'),
this.destinationPath('README.md')
);
this.fs.copy(
this.templatePath('.gitignore'),
this.destinationPath('.gitignore')
);
this.fs.copyTpl(
this.templatePath('index.html'),
this.destinationPath('index.html'),
{ title: this.props.name }
);
}
copy() vs copyTpl()
他们的第一个参数都是模板文件路径，第二个参数是生成文件路径，不同之处在于copyTpl的第三个参数是一个对象，用于向模板中填充数据。copyTpl使用的是ejs模板引擎。
例如：./templates/index.html的文件内容是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
this.fs.copyTpl(
this.templatePath('index.html'),
this.destinationPath('index.html'),
{title: 'Templating with Yeoman'}
);
一但generator运行成功，index.html将会编译为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Templating with Yeoman</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
json也同样适用上面的语法，配置package.json文件可以适应不同的项目。
install 安装依赖
// 3. 安装依赖
install: function (){
this.npmInstall();
}
安装测试
如果你想观察自己配置的结果，可以使用npm link 命令，相当于全局安装了此脚手架，然后通过新建文件夹，且进入文件夹，运行yo，选择刚刚的脚手架，便可以测试。
例如：
mkdir vue-test && cd vue-test
发布generator
可以将你创建的生成器发布到npm社区，便于自己和其他开发者使用。
generator-test/package.json中的name要在https://www.npmjs.com/没被创建过，才可以发布。
如果没有npm的账号，可以通过npm adduser创建；
如果已有账号，通过 npm login 登陆。
登陆成功之后，在项目的根目录下，运行npm publish就可以发布了。如果更新后重新发布，需要修改package.json文件的版本号。
使用下述命令可以撤销发布，只有在发布包24小时内允许撤销发布的包。
npm unpublish 包名
参考资料
Yeoman官网：http://yeoman.io/
yeoman.jpg
网友评论