json 1

摘要


趁着 Web 2.0 和 HTML 5 的盛行,现在的 Web
应用所能提供的功力和交互能力比从前传统的 Web
应用要强硬很多。应用的成百上千兑现逻辑被撤换来了浏览器端来兑现。浏览器不再只提供单纯的数额接收和突显效用,而是提供更多的用户交互能力。浏览器端所富含的
HTML、CSS 和 JavaScript
代码也变得尤为复杂。对于日渐复杂的前端代码,须求有更好的流水线和工具来治本支出的各个方面,包含开始的代码结构、开发流程和自动化测试等。yeoman
是一个新生的工具。它构成了 Yo、Grunt 和 Bower
等工具,组成了一个完完全全的工具集合,提供各样 Web
应用开发中所需的实用效率。

正文


1. yeoman

Yeoman可以协助我们创立新的支付项目,为大家提供更好的工具来使我们的类型更种种化。

2. yeoman-generator

Generators是yeoman生态系统的积木,是经过yo命令运行而为终端用户生产文件的插件。

3. 创设创造和谐的generator

1. 创建 node module

在您须求成立generator的地方创设一个索引,目录要以generator-name命名(name替换成你要创设的generator名称)。命名规则很要紧,因为yeoman会通过文件系统来搜寻可以运用的generator。
在上头创建的目录下创制一个package.json文件,该文件是一个Node.js项目标的模块清单.相关介绍请看官网。你可以透过在命令行运行
npm init 来打造package.json文件,当然你也可以手动填写那几个文件:

  {
    "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来实现。

files特性必须是一个在你的generator里面用到的文书和目录的数组。

2.目录树

yeoman是深度看重你团队的文件目录文件系统,每一个子generator都有协调的文本夹。

generator默许把app作为默认的子generator,当您拔取yo name
调用的是app子generator。因而你的generator必须含有app/目录。你可以透过yo name:subcommand一声令下来调用子generator,他会调用与subcommand完全等同的文本夹即子generator。

上面是现身说法项目的文书夹结构

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

由此命令 yo nameyo name:router 可以呈现出来generator。

比方您不想把所有的文件都放在根目录下边,很幸运的是yeoman协理二种分裂的目录结构./
generators/ ,yeoman会从她们当中注册可用的generators。

所此前一个示范的结构也可用定义成如下:

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

如果您利用这种目录结构,请保管package.json 文件内的 files
属性定义了子generator在generators目录下:

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

3. 扩展generator

当到了这一步你就可用去落到实处generator的具体内容了

yeoman提供了一个基础的generator让我们伸张使用以落实团结的目的.基础的generator提供了半数以上的作用来缓解你的任务量。

上边是扩展基础generator的措施:

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

extend
允许你在基础的class上扩充新的要好想要的prototype规范.他的效益是通过Class-extend模块得来的。假使您用过backbone,你会觉得她很熟识。在生态系统中,我们指定增添的generator使用module.export来让其行之有效,就像在nodeJs使用export
module一样

4. 重写constructor方法

多少generator方法只有定义在构造方法内才能被调用到.这几个至极的办法可以做的有些最主要的操作等,而那么些操作可能在协会之外无法正常运行。

    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
      }
    });

5. 添加自定义方法

当generator被调用时,平常状态下里面定义的方法会依照顺序执行,不过大家将在下一节中看到的,一些分外的主意名称将触发特定的运作秩序。

下边的一段代码是创建八个自定义的不二法门

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

当运行generator 你会面到会用log打印出来。

6. 运行generator

当在地面目录内成功地方的始建后,generator还不可能被当作全局的npm module
,我们可以透过在generator-name/目录下运作 npm link
来完毕generator的全局化。

7.找到工程根目录

当使用yo命令来运作generator的生活,yeoman会把
.yo-rc.json文本所在的目录作为工程的根目录,之后Yeoman将近期文件目录跳转到根目录下运作请求的生成器。当大家运用this.config.save()的时候,storage模块会创设它。若是.yo-rc.json
不在当前的工作目录,请保管她也不在其余的系列目录里。

4. 完善generator

1.创设用户交互

俺们推荐在prompting 方法内来定义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));
     }
   })

2. 运作上下文

在generator内,所有的静态方法都会被作为action而自定执行,当然generator也提供了可以声明不自动执行的辅助函数,generator提供了三种可以创建辅助函数的方法.

1 通过下划线伊始定义函数,如:CopyFiles
2 使用实例函数声明:

    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();
        }
      });

3.运作顺序

运行顺序

Yeoman是鲁人持竿优先级依次依次执行所定义的法门。当您定义的函数名字是Yeoman定义的先行级函数名时,会自动将该函数列入到大街小巷优先级队列中,否则就会列入到
default 优先层级队列中。

大多执行的逐一如下:
initializing

prompting

configuring

default

writing

conflicts

install

end

4.generator Arguments

Arguments是在指令行中直接传送的。 如:yo webapp
my-project,接受键值对的规范。

desc:描述argument

required:定义是还是不是必须

optional:是或不是可选用的

type:参数类型,支持的花色有String Number Array Object

defaults: argument默认值

banner:字符串呈现的利用验证(那是默许提供)

瞩目:参数必须的概念在construct函数内,否则当你选择generator调用命令(如:yo webapp --help)的时候,不可见出口相关的赞助音讯。

示例:

    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);
      }
    });

5. Options

option和argument很相似,可是option是当做命令行标识应用的,如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");
   }
 });

6. 出口音信

出口音讯是经过generator.log模块来拍卖落成的。不提议选用console.log输出命令。

示例:

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

7. 拍卖依赖关系

诚如当您运行你的generator的时候,你日常须要通过
npm
Bower来设置一些generator用到的依赖模块。而那些义务是卓殊繁琐的,为了便于,yeoman将那有的任务抽离了出去。

npm

您只必要调用generator.npmInstall()
命令就足以进行npm安装命令,yeoman确保了npm install只进行了一遍,即便他被八个generator调用。

譬如说你想安装lodash作为dev dependency:

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

上边代码等同于调用了npm install lodash –save-dev命令。

Bower

你只须求调用generator.bowerInstall()即可启动安装命令。yeoman确保了bower install只举办了一次,纵然她被八个generator调用。

npm && Bower

调用enerator.installDependencies()即可同时运转npm 和 bower。

其他tools

yeoman抽离了spawn命令,这么些抽离保障了大家可以在Linux ,mac
以及windows系统上得以很好的周转。

借使你是一个PHP狂热爱好者,你想运行composer一声令下,你可以那样做:

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

请确保面spawn命令在install队列里。因为您的用户不甘于等待在当场直到安装命令达成。

8. 上下文路径

为了有利于文件流的输入输出,Yeoman使用三种职位环境。

1. 对象上下文

json,目标上下文定义为当前工作目录或含.yo-rc.json文件最接近的父文件夹。该.yo-rc.json文件定义了一个generator项目的根目录。该文件允许用户在子目录中运作命令,并让他俩在品种中可以运作。那确保了用户作为的一律。

你能够由此generator.destinationRoot()一声令下获取目的路径,也可以经过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'
      }
    });

2. 模板上下文

模板上下文是你保存模板文件的目录,他一般是你要读取和复制的目录。模板上下文一般是默许是概念在./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'
      }
});

3. “内存”文件系统

当提到到覆盖用户的文件的时候,yeoman分外的当心,基本上,每一个write动作都是一个为曾经存在的公文解决争论的长河。辅助用户严重必要覆盖的情节。

4. 文件工具

generator的this.fs暴光出所有的文书格局,通过mem-fs
editor
.

其他有关介绍请看官网

9.全体示例

    '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('\nWelcome to webApp\n') + chalk.underline('webApp.github.io\n');
            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("执行了自定义方法");
        },

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

    });

小编音信

初稿链接:http://yeoman.io/authoring/
翻译自力谱宿云 LeapCloud 团队_UX成员:Jerry Zhang
中文翻译头阵地址:https://blog.maxleap.cn/archives/951

相关文章

网站地图xml地图