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个章程，应该会按官网的顺序写个系列，但最好仍是去看看原版的教程。欢迎提问和建议。