摘要：上下文路徑為了方便文件流的輸入輸出，使用兩種位置環(huán)境。目標(biāo)上下文目標(biāo)上下文定義為當(dāng)前工作目錄或含文件最接近的父文件夾。這確保了用戶行為的一致。幫助用戶嚴(yán)重需要覆蓋的內(nèi)容。

隨著 Web 2.0 和 HTML 5 的流行，現(xiàn)在的 Web 應(yīng)用所能提供的功能和交互能力比之前傳統(tǒng)的 Web 應(yīng)用要強(qiáng)大很多。應(yīng)用的很多實現(xiàn)邏輯被轉(zhuǎn)移到了瀏覽器端來實現(xiàn)。瀏覽器不再只提供單一的數(shù)據(jù)接收和展現(xiàn)功能，而是提供更多的用戶交互能力。瀏覽器端所包含的 HTML、CSS 和 JavaScript 代碼也變得更加復(fù)雜。對于日益復(fù)雜的前端代碼，需要有更好的流程和工具來管理開發(fā)的各個方面，包括初始的代碼結(jié)構(gòu)、開發(fā)流程和自動化測試等。yeoman 是一個新興的工具。它結(jié)合了 Yo、Grunt 和 Bower 等工具，組成了一個完整的工具集合，提供各種 Web 應(yīng)用開發(fā)中所需的實用功能。

Yeoman可以幫助我們創(chuàng)建新的開發(fā)項目，為我們提供更好的工具來使我們的項目更多樣化。

Generators是yeoman生態(tài)系統(tǒng)的積木,是通過yo命令運行而為終端用戶生產(chǎn)文件的插件。

在你需要創(chuàng)建generator的地方創(chuàng)建一個目錄,目錄要以generator-name命名(name替換成你要創(chuàng)建的generator名稱)。命名規(guī)則很重要,因為yeoman會通過文件系統(tǒng)來查找可以使用的generator。
在上面創(chuàng)建的目錄下創(chuàng)建一個package.json文件,該文件是一個Node.js項目的的模塊清單.相關(guān)介紹請看官網(wǎng)。你可以通過在命令行運行 npm init 來構(gòu)建package.json文件,當(dāng)然你也可以手動填充這個文件:

  {
    "name": "generator-name",
    "version": "0.1.0",
    "description": "",
    "files": [
      "app",
      "router"
    ],
    "keywords": ["yeoman-generator"],
    "dependencies": {
      "yeoman-generator": "^0.20.2"
    }
  }

其中 name 屬性必須以generator-前綴。keywords 屬性必須包含"yeoman-generator" 并且repo必須有一個引用 generators page索引的描述。

你必須保證引用了最新版本的yeoman-generator 模塊作為依賴.可以通過 npm install --save yeoman-generator來實現(xiàn)。

files屬性必須是一個在你的generator里面用到的文件和目錄的數(shù)組。

yeoman是深度依賴你組織的文件目錄文件系統(tǒng),每一個子generator都有自己的文件夾。

generator默認(rèn)把a(bǔ)pp作為默認(rèn)的子generator,當(dāng)你使用yo name 調(diào)用的是app子generator。因此你的generator必須包含app/目錄。你可以通過yo name:subcommand命令來調(diào)用子generator,他會調(diào)用與subcommand完全一樣的文件夾即子generator。

下面是示例項目的文件夾結(jié)構(gòu)

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

通過命令 yo name 和 yo name:router 可以顯示出來generator。

如果你不想把所有的文件都放在根目錄下面,很幸運的是yeoman支持兩種不同的目錄結(jié)構(gòu) ./ 和 generators/ ,yeoman會從他們當(dāng)中注冊可用的generators。

所以前一個示例的結(jié)構(gòu)也可用定義成如下:

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

如果你使用這種目錄結(jié)構(gòu),請確保package.json 文件內(nèi)的 files 屬性定義了子generator在generators目錄下:

     {
       "files": [
         "generators/app",
         "generators/router"
       ]
     }

當(dāng)?shù)搅诉@一步你就可用去實現(xiàn)generator的具體內(nèi)容了

yeoman提供了一個基礎(chǔ)的generator讓我們擴(kuò)展使用以實現(xiàn)自己的目標(biāo).基礎(chǔ)的generator提供了大部分的功能來緩解你的任務(wù)量。

下面是擴(kuò)展基礎(chǔ)generator的方法:

    var generators = require("yeoman-generator");
    module.exports = generators.Base.extend();

extend 允許你在基礎(chǔ)的class上擴(kuò)展新的自己想要的prototype規(guī)范.他的功能是通過Class-extend模塊得來的。如果你用過backbone,你會覺得他很熟悉。在生態(tài)系統(tǒng)中,我們指定擴(kuò)展的generator使用module.export來讓其有效,就像在nodeJs使用export module一樣

有些generator方法只有定義在構(gòu)造方法內(nèi)才能被調(diào)用到.這些特殊的方法可以做的一些重要的操作等，而這些操作可能在構(gòu)造之外無法正常運行。

    module.exports = generators.Base.extend({
      // The name `constructor` is important here
      constructor: function () {
        // Calling the super constructor is important so our generator is correctly set up
        generators.Base.apply(this, arguments);

        // Next, add your custom code
        this.option("coffee"); // This method adds support for a `--coffee` flag
      }
    });

當(dāng)generator被調(diào)用時,通常情況下里面定義的方法會按照順序執(zhí)行,但是我們將在下一節(jié)中看到的，一些特殊的方法名稱將觸發(fā)特定的運行秩序。

下面的一段代碼是創(chuàng)建兩個自定義的方法

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

當(dāng)運行g(shù)enerator 你會看到會用log打印出來。

當(dāng)在本地目錄內(nèi)完成上面的創(chuàng)建后,generator還不能被當(dāng)做全局的npm module ,我們可以通過在 generator-name/目錄下運行 npm link 來實現(xiàn)generator的全局化。

當(dāng)使用yo命令來運行g(shù)enerator的生活,yeoman會把 .yo-rc.json 文件所在的目錄作為工程的根目錄，之后Yeoman將當(dāng)前文件目錄跳轉(zhuǎn)到根目錄下運行請求的生成器。當(dāng)我們使用this.config.save()的時候,storage模塊會創(chuàng)建它。如果.yo-rc.json 不在當(dāng)前的工作目錄,請確保他也不在其他的項目目錄里。

我們推薦在prompting 方法內(nèi)來定義prompt與用戶交互,定義方法如下:

   module.exports = generators.Base.extend({
     prompting: function () {
       return this.prompt([{
         type    : "input",
         name    : "name",
         message : "Your project name",
         default : this.appname // Default to current folder name
       }, {
         type    : "confirm",
         name    : "cool",
         message : "Would you like to enable the Cool feature?"
       }]).then(function (answers) {
         this.log("app name", answers.name);
         this.log("cool feature", answers.cool);
       }.bind(this));
     }
   })

在generator內(nèi),所有的靜態(tài)方法都會被作為action而自定執(zhí)行,當(dāng)然generator也提供了可以聲明不自動執(zhí)行的輔助函數(shù),generator提供了三種可以創(chuàng)建輔助函數(shù)的方法.

1 通過下劃線開頭定義函數(shù),如:CopyFiles

2 使用實例函數(shù)聲明:

    generators.Base.extend({
        constructor: function () {
          this.helperMethod = function () {
            console.log("won"t be called automatically");
          };
        }
      });

3 繼承一個父級generator:

      var MyBase = generators.Base.extend({
        helper: function () {
          console.log("methods on the parent generator won"t be called automatically");
        }
      });

      module.exports = MyBase.extend({
        exec: function () {
          this.helper();
        }
      });

運行順序

Yeoman是按照優(yōu)先級順序依次執(zhí)行所定義的方法。當(dāng)你定義的函數(shù)名字是Yeoman定義的優(yōu)先級函數(shù)名時，會自動將該函數(shù)列入到所在優(yōu)先級隊列中，否則就會列入到 default 優(yōu)先層級隊列中。

基本上執(zhí)行的順序如下:

initializing

prompting

configuring

default

writing

conflicts

install

end

Arguments是在命令行中直接傳遞的。 如:yo webapp my-project,接受鍵值對的條件。

desc：描述argument

required：定義是否必須

optional：是否可選擇的

type：參數(shù)類型,支持的類型有String Number Array Object

defaults： argument默認(rèn)值

banner：字符串顯示的使用說明（這是默認(rèn)提供）

注意:參數(shù)必須的定義在construct函數(shù)內(nèi),否則當(dāng)你使用generator調(diào)用命令(如:yo webapp --help)的時候,不能夠輸出相關(guān)的幫助信息。

示例:

    var _ = require("lodash");

    module.exports = generators.Base.extend({
      // note: arguments and options should be defined in the constructor.
      constructor: function () {
        generators.Base.apply(this, arguments);

        // This makes `appname` a required argument.
        this.argument("appname", { type: String, required: true });
        // And you can then access it later on this way; e.g. CamelCased
        this.appname = _.camelCase(this.appname);
      }
    });

option和argument很相似,但是option是作為命令行標(biāo)識使用的,如yo webapp --coffee。

我們可可以通過generator.option()添加option。

示例:

 module.exports = generators.Base.extend({
   // note: arguments and options should be defined in the constructor.
   constructor: function () {
     generators.Base.apply(this, arguments);

     // This method adds support for a `--coffee` flag
     this.option("coffee");
     // And you can then access it later on this way; e.g.
     this.scriptSuffix = (this.options.coffee ? ".coffee": ".js");
   }
 });

輸出消息是通過generator.log模塊來處理實現(xiàn)的。不建議使用console.log輸出命令。

示例:

    module.exports = generators.Base.extend({
      myAction: function () {
        this.log("Something has gone wrong!");
      }
    });

一般當(dāng)你運行你的generator的時候,你經(jīng)常需要通過 npm 和 Bower來安裝一些generator用到的依賴模塊。而這些任務(wù)是非常繁瑣的,為了方便,yeoman將這部分任務(wù)抽離了出來。

你只需要調(diào)用generator.npmInstall() 命令就可以執(zhí)行npm安裝命令,yeoman確保了npm install只執(zhí)行了一次,即使他被多個generator調(diào)用。

例如你想安裝lodash作為dev dependency:

   generators.Base.extend({
     installingLodash: function() {
       this.npmInstall(["lodash"], { "saveDev": true });
     }
   });

上面代碼等同于調(diào)用了npm install lodash --save-dev命令。

你只需要調(diào)用generator.bowerInstall()即可啟動安裝命令。yeoman確保了bower install只執(zhí)行了一次,即使他被多個generator調(diào)用。

調(diào)用enerator.installDependencies()即可同時運行npm 和 bower。

yeoman抽離了spawn命令,這個抽離保證了我們可以在Linux ,mac 以及windows系統(tǒng)上可以很好的運行。

假如你是一個PHP狂熱愛好者,你想運行composer命令,你可以這樣做:

    generators.Base.extend({
      install: function () {
        this.spawnCommand("composer", ["install"]);
      }
    });

請確保面spawn命令在install隊列里。因為您的用戶不愿意等待在那兒直到安裝命令完成。

為了方便文件流的輸入輸出，Yeoman使用兩種位置環(huán)境。

目標(biāo)上下文定義為當(dāng)前工作目錄或含.yo-rc.json文件最接近的父文件夾。該.yo-rc.json文件定義了一個generator項目的根目錄。該文件允許用戶在子目錄中運行命令，并讓他們在項目中可以運行。這確保了用戶行為的一致。

你可以通過generator.destinationRoot()命令獲取目標(biāo)路徑,也可以通過generator.destinationPath("sub/path")來拼一個路徑:

    // Given destination root is ~/projects
    generators.Base.extend({
      paths: function () {
        this.destinationRoot();
        // returns "~/projects"

        this.destinationPath("index.js");
        // returns "~/projects/index.js"
      }
    });

模板上下文是你保存模板文件的目錄,他一般是你要讀取和復(fù)制的目錄。模板上下文一般是默認(rèn)是定義在 ./templates/目錄的.你可以通過generator.sourceRoot("new/template/path")命令來重寫。你可以通過generator.sourceRoot()或者generator.templatePath("app/index.js").來獲取路徑。

    generators.Base.extend({
      paths: function () {
        this.sourceRoot();
        // returns "./templates"

        this.templatePath("index.js");
        // returns "./templates/index.js"
      }
});

當(dāng)涉及到覆蓋用戶的文件的時候,yeoman非常的謹(jǐn)慎,基本上，每一個write動作都是一個為已經(jīng)存在的文件解決沖突的過程。幫助用戶嚴(yán)重需要覆蓋的內(nèi)容。

generator的this.fs暴露出所有的文件方法,通過mem-fs editor .

其他相關(guān)介紹請看官網(wǎng)

    "use strict";

    var generators = require("yeoman-generator");
    var mkdirp = require("mkdirp");
    var yosay = require("yosay");
    var chalk = require("chalk");
    module.exports = generators.Base.extend({

        constructor: function() {
            generators.Base.apply(this, arguments);
            this.option("coffee");
            this.scriptSuffix = (this.options.coffee ? ".coffee": ".js");
        },

        initializing: function() {
            var message = chalk.bgBlack.bold("
Welcome to webApp
") + chalk.underline("webApp.github.io
");
            this.log(yosay(message));
        },

        prompting: function() {
             var prompts = [{
                type:"input",
                name: "appName",
                message: "input app name .",
                default: "webApp"
            }];
            this.prompt(prompts, function (answers) {
                this.log(answers);
            }.bind(this));
        },

        configuring: function() {
            this.config.save();
        },

        selfFunction: function () {
            this.log("執(zhí)行了自定義方法");
        },

        writing: function() {
           this.fs.copyTpl(
             this.templatePath("index.html"),
             this.destinationPath("public/index.html"),
             { title: "Templating with Yeoman" }
           );
        },

    });

原文鏈接：http://yeoman.io/authoring/
翻譯自力譜宿云 LeapCloud 團(tuán)隊_UX成員：Jerry Zhang
力譜宿云 LeapCloud 團(tuán)隊首發(fā)：https://blog.maxleap.cn/archi...

歡迎關(guān)注微信訂閱號：從移動到云端
歡迎加入我們的力譜宿云 LeapCloud 活動QQ群：555973817，我們將不定期做技術(shù)分享活動。
若有轉(zhuǎn)載需要，請轉(zhuǎn)發(fā)時注意自帶作者信息一欄并本自媒體公號：力譜宿云，尊重原創(chuàng)作者及譯者的勞動成果~ 謝謝配合~