首先附上Yeoman官網:yeoman.io/html
我製做的前端腳手架:generator-jake-front前端
以及我在前端同窗的分享會上的分享ppt:yeoman.keynode
若是想快速製做一個腳手架,而且不須要實現特別複雜的定製化,看完這篇文章足夠,若是想要實現複雜的功能,須要去查看官方文檔。git
須要安裝Nodejsgithub
全局安裝須要的工具npm
npm install -g yo
npm install -g generator-generator複製代碼
執行下面命令,執行以前並不須要本身新建文件夾,yo generator會幫助咱們建好文件夾json
yo generator複製代碼
項目名稱本身設置,必須是以generator-
開頭,協議選擇MIT
,在設置了一系列問題以後promise
自動生成以下目錄bash
generator-test
├── LICENSE
├── README.md
├── __tests__
│ └── app.js
├── generators
│ └── app
│ ├── index.js
│ └── templates
│ └── dummyfile.txt
└── package.json複製代碼
generators/app/templates/
是默認存放文件的目錄,把全部模版文件放在這個目錄下app
/generators/app/index.js
是Yeoman
的配置文件,定義如何生成咱們的腳手架
Prompts
是generator
與用戶交互的主要方式。prompt
模塊由 Inquirer.js提供,你能夠參考它的API,在可用的提示選項列表。
prompt
方法是異步的而且返回一個 promise。在你運行下一個任務前去完成它,你須要返回 promise。
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;
});
}
};複製代碼
作一些適當的修改,實現更通用的腳手架。能夠查閱API
this.appname
: 獲取當前文件夾名稱this.user.git.name()
: 獲取全局git
用戶名this.user.git.email()
: 獲取全局git
郵箱this.github.username()
: 獲取github
用戶名定義對象中的type
,管理交互方式。使用input
實現控制檯輸入。
type: 'input',
name: 'author',
message: 'author',
default: this.user.git.name()複製代碼
這樣便實現了讓用戶輸入做者名稱,默認爲git全局配置的用戶名。而後在其餘配置中使用this.props.author
實現獲取用戶輸入。
Generators
在this.fs
暴露了全部的文件的方法,這是一個實例,mem-fs editor - 確保爲全部可得到的方法選擇模塊文件。
值得注意的是,經過this.fs
暴露commit
,你不該該在你的generator
去調用它。Yeoman
在運行循環的衝突階段結束後,在內部調用它。
例如:./templates/index.html
的文件內容是:
<html>
<head>
<title><%= title %></title>
</head>
</html>複製代碼
而後,咱們將使用copyTpl方法去複製做爲模板的處理中的文件。copyTpl
使用的是ejs 模板引擎。
module.exports = class extends Generator {
writing() {
this.fs.copy(
this.templatePath('index.html'),
this.destinationPath('index.html'),
{ title: 'Templating with Yeoman' }
);
}
};複製代碼
一旦generator運行成功,index.html
將會包含:
<html>
<head>
<title>Templating with Yeoman</title>
</head>
</html>複製代碼
json
也一樣適用上面的語法,配置package.json
文件能夠適應不一樣的項目。
install
方法設置在文件copy完成以後執行的命令,例如
module.exports = class extends Generator {
install() {
this.installDependencies({
bower: true,
npm: true,
yarn: false,
callback: function () {
this.log('Everything is ready!');
}
});
}
};複製代碼
因爲咱們在本地開發,並不知道用起來怎麼樣,因此能夠使用npm link
命令,至關於在全局安裝了此腳手架,而後在新文件夾中執行yo
,選擇腳手架,即可以測試
generator-test/package.json
中的name
要在www.npmjs.com/沒被建立過,才能夠發佈。
發佈須要一個npm
的帳號,若是沒有使用npm adduser
建立;
若是已有帳號,運行npm login
登錄。
在項目根目錄下,運行npm publish
就能夠發佈了。若是更新後從新發布,注意修改根目錄下的package.json
文件中的版本號。
使用npm unpublish 包名
命令能夠撤銷發佈,只有在發包的24小時內才容許撤銷發佈的包。