使用Yeoman定製前端腳手架

首先附上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.jsYeoman的配置文件,定義如何生成咱們的腳手架

prompting

Promptsgenerator與用戶交互的主要方式。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實現獲取用戶輸入。

writing

Generatorsthis.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

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小時內才容許撤銷發佈的包。

相關文章
相關標籤/搜索