Yeoman是什么？
Yeoman為何方神圣，說他有三頭六臂一點(diǎn)都不夸張。
因為他由三部分組成：yo(腳手架工具)、grunt(等構(gòu)建工具)、npm(等包管理器)。
官方文檔中給他的定位為scaffolding tool，其實就是腳手架工具，可以幫助前端開發(fā)人員量身定制化自己的腳手架，省去copy環(huán)節(jié)。
使用 yeoman generator可以幫助我們構(gòu)建項目結(jié)構(gòu)、安裝依賴等重復(fù)性操作，然而已有的generator有時并不能滿足需求，所以可以使用yeoman的API來構(gòu)建自己的生成器。
通過定制好自己的generator之后，只需要幾個命令，就可以使用自己的腳手架，并且自動化生成項目文件結(jié)構(gòu)、配置文件、依賴包等。
接下來開始敲黑板、劃重點(diǎn)了！！！
配置開發(fā)環(huán)境
需要安裝node.js
安裝Yeoman的命令行工具和開發(fā)Yeoman生成器的工具 generator-generator
npm install -g yo
npm install -g generator-generator
初始化項目
yo generator
執(zhí)行上述命令，執(zhí)行前，不需要新建文件夾，yo generator會幫我們建好文件夾。Yeoman會在終端提出幾個問題，這是一個交互式的配置過程。項目名自己設(shè)置，必須以generator-開頭，協(xié)議選擇MIT，協(xié)議完成后，Yeoman會自動安裝項目依賴。當(dāng)然可以終止掉自動安裝，自己使用cnpm或者yarn進(jìn)行安裝，用了都說好。
最后生成的項目目錄：
generator-vue-test
├ generators
├ app
├ index.js
├ templates
├ dummyfile.txt
├ __tests__
├ app.js
├ LICENSE
├ README.md
├ package.json
配置
/generators/app/index.js 是Yeoman的配置文件，生成器入口文件，在這里進(jìn)行我們自己腳手架的配置
generators/app/templates/是默認(rèn)存放文件的目錄，所有模板文件都放在這個目錄下，最后生成的腳手架也只有這個文件夾下的內(nèi)容。
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，在終端提供一個交互式的配置過程。可以根據(jù)提供的API，進(jìn)行適當(dāng)?shù)男薷模瑢崿F(xiàn)通用的腳手架。
- this.appname: 獲取當(dāng)前文件夾名稱
- 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()
}];
這里實現(xiàn)了讓用戶輸入作者、項目名、email。
writing 生成項目目錄結(jié)構(gòu)階段
通過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()
他們的第一個參數(shù)都是模板文件路徑，第二個參數(shù)是生成文件路徑，不同之處在于copyTpl的第三個參數(shù)是一個對象，用于向模板中填充數(shù)據(jù)。copyTpl使用的是ejs模板引擎。
例如：./templates/index.html的文件內(nèi)容是：
<!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運(yùn)行成功，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文件可以適應(yīng)不同的項目。
install 安裝依賴
// 3. 安裝依賴
install: function (){
this.npmInstall();
}
安裝測試
如果你想觀察自己配置的結(jié)果，可以使用npm link 命令，相當(dāng)于全局安裝了此腳手架，然后通過新建文件夾，且進(jìn)入文件夾，運(yùn)行yo，選擇剛剛的腳手架，便可以測試。
例如：
mkdir vue-test && cd vue-test
發(fā)布generator
可以將你創(chuàng)建的生成器發(fā)布到npm社區(qū)，便于自己和其他開發(fā)者使用。
generator-test/package.json中的name要在https://www.npmjs.com/沒被創(chuàng)建過，才可以發(fā)布。
如果沒有npm的賬號，可以通過npm adduser創(chuàng)建；
如果已有賬號，通過 npm login 登陸。
登陸成功之后，在項目的根目錄下，運(yùn)行npm publish就可以發(fā)布了。如果更新后重新發(fā)布，需要修改package.json文件的版本號。
使用下述命令可以撤銷發(fā)布，只有在發(fā)布包24小時內(nèi)允許撤銷發(fā)布的包。
npm unpublish 包名
參考資料
Yeoman官網(wǎng)：http://yeoman.io/
