yeoman - 搭建本身的腳手架 - 1

開頭

開始一個項目的時候，你能夠去clone一個seed項目，但你clone完以後仍是要配置一些東西，並且建立文件和更新文件依舊是人工處理，因此你須要yeoman來幫你搞定，已經有許多不錯的生成器了，但建立一個屬於本身的生成器就更好了。

事先要知道的東西

• npm
• node
• javascript
• yeoman
• gulp
• git

若是有同樣你不懂，最好仍是去先去看看。

準備

去github上建立一個項目，固然隨便一個git託管均可以。由於咱們在建立後是要發佈的，至於項目的名字必定是用generator-name這種格式，否則到時候yeoman找不到你的這個腳手架。

以防萬一，裝一下yo，npm install -g yo。

建立模塊

首先是npm init，建立一個package.json。

{
  "name": "generator-limi",
  "version": "0.0.1",
  "description": "My generator",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/limichange/generator-limi.git"
  },
  "keywords": [
    "yeoman-generator"
  ],
  "author": "limichange",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/limichange/generator-limi/issues"
  },
  "homepage": "https://github.com/limichange/generator-limi"
}

要注意下里面的關鍵字yeoman-generator。如今咱們要安裝一下依賴。

npm install --save yeoman-generator

而後咱們建立兩個文件夾app和router，以後再說有什麼用。而後咱們要把這兩個文件夾的信息添加到package.json裏，變成下面這樣。

{
  "name": "generator-limi",
  "version": "0.0.1",
  "description": "My generator",
  "files": [
    "app",
    "router"
  ],
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/limichange/generator-limi.git"
  },
  "keywords": [
    "yeoman-generator"
  ],
  "author": "limichange",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/limichange/generator-limi/issues"
  },
  "homepage": "https://github.com/limichange/generator-limi",
  "dependencies": {
    "yeoman-generator": "^0.18.10"
  }
}

組織文件

讓咱們建立兩個文件夾app和router。在執行yo name命令的時候，就會調用app文件夾裏的內容。而yo name:command就會調用router裏的內容。

再建立兩個文件，看起來就像這樣。

├─── package.json
├─── app/
│     └─── index.js
└───router/
      └─── index.js

其實yeoman也支持另一種結構，像是這樣。

├─── package.json
└─── generators/
        ├─── app/
        │     └───index.js
        └─── router/
              └───index.js

編寫動做

如今要給你的腳手架構造靈魂了，就是他的建立行爲。

// app/index.js
var generators = require('yeoman-generator');

module.exports = generators.Base.extend();

寫構造器

// app/index.js
var generators = require('yeoman-generator');

module.exports = generators.Base.extend({
  // 構造函數
  constructor: function () {

    // 調用父類構造函數
    generators.Base.apply(this, arguments);

    // 執行的時候接收 `--coffee` 參數
    this.option('coffee'); 
  }
});

增長本身的方法

這些方法會在執行腳手架的時候被調用一次。當你運行完腳手架以後就會看到這些在命令行裏被打印出來。

// app/index.js
var generators = require('yeoman-generator');

module.exports = generators.Base.extend({
  method1: function () {
    console.log('method 1 just ran');
  },
  method2: function () {
    console.log('method 2 just ran');
  }
});

合在一塊兒

把上面的代碼合在一塊兒變成這樣。

// app/index.js
var generators = require('yeoman-generator');

module.exports = generators.Base.extend({
  // 構造函數
  constructor: function () {

    // 調用父類構造函數
    generators.Base.apply(this, arguments);

    // 執行的時候接收 `--coffee` 參數
    this.option('coffee'); 
  },
  method1: function () {
    console.log('method 1 just ran');
  },
  method2: function () {
    console.log('method 2 just ran');
  }
});

運行腳手架

雖然加的東西不是不少，但你已經有了一個能夠執行的腳手架了，試着來運行一下。
首先將這個項目連接到本地。

npm link

找個地方運行yo，找到你建立的那個，而後執行。

shellmethod 1 just ran
method 2 just ran

看起來不錯，恭喜你寫出了一個hello world。

結語

勉強仍是把這個東西順出來了，畢竟是按着官方的文檔作的。官網一共有9個章程，應該會按官網的順序寫個系列，但最好仍是去看看原版的教程。歡迎提問和建議。