Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Classes.md
Mixins.md
Module.md
README.md

README.md

yeoman-generator ハンズオン

  • 目次
    1. generator-generator
      • 雛形を作る
      • yo コマンドに認識させる(パスを通す)。
    2. yo my generator
      • ファイルのコピーをする
      • 選択肢を作ってみる
      • 選択肢の結果でモジュールをインストールする
        • bower
        • npm
      • 設定を保存してみる
    3. yo my subgenerator
      • subgeneratorを作ってみる
      • 設定を引き継いでsubgeneratorを動かしてみる。

generator-generator

まず、node, yeoman シリーズが入っていることが前提条件です。

まず、以下のコマンドでgenerator-generatorをインストールします。

npm i -g generator-generator

雛形を作る

まずは、generatorフォルダを作ります。

mkdir generator-sample

sampleの部分は好きな名前で構いません、ジェネレータの名前になります。

以下のコマンドでgeneratorの雛形が作成されます。

yo generator

最初に作成者名を聞かれるので適当に答えます。

2番目にジェネレータの名前を聞かれます。

デフォルトではgenerator-samplesample部分が名前になります。

すると、以下のようなフォルダが作成されます。

./generator-sample
├── README.md
├── app
│   ├── index.js
│   └── templates
│       ├── _bower.json
│       ├── _package.json
│       ├── editorconfig
│       └── jshintrc
├── node_modules
├── package.json
└── test
    ├── test-creation.js
    └── test-load.js

yo コマンドに認識させる。

yoコマンドは以下のステップでgeneratorを認識しています。

  1. パスが通っているフォルダを総なめする。
  2. node_modules内のgenerator-で開始されるフォルダを探す
  3. generator-フォルダ内のapp/index.jsを実行する。

そのため、パスが通っている場所に、先程作成したgenerator-sampleのパスを通せば認識されます。

Mac,Linuxの場合はシンボリックリンク ln -s [generator-sampleフォルダ絶対パス] generator-samplenode_modulesへシンボリックリンクを作成します。

Windowsの場合はgenerator-sampleフォルダにパスを通すか、パスが通っているフォルダにgenerator-をコピーして下さい。

Windowsのnode_modulesのパスはC:\Users\ユーザー名\AppData\Roaming\npm\node_modulesです。

yo my generator

generatorの実行

では早速generatorを実行してみましょう

新たにフォルダを作成し、そのフォルダの中で以下のコマンドを実行して下さい。

yo sample

パスが通って入れば、問題なくジェネレータが起動します。

適当に質問に答え、実行が完了すると以下のような新規プロジェクトが作成されます。

.
├── app
│   └── templates
├── bower.json
└── package.json

選択肢を作ってみる

先程ジェネレーターを作成していると、質問が来ていたと思います。

generator内のapp/index.jsの以下の部分が、その質問を作成している部分です。

var prompts = [{
	type: 'confirm',
	name: 'someOption',
	message: 'Would you like to enable this option?',
	default: true
}];

ここに選択肢を追加してみましょう。

どのような質問が作成可能か知りたい場合はここのサイトを参考にしてください。

var prompts = [{
  type: 'confirm',
  name: 'coffee',
  message: 'coffee scriptは使いますか?',
  default: false
},  
{   
  type: 'input',
  name: 'yourname',
  message: 'あなたの名前は?',
  default: "someuser"
},  
{   
  type: 'checkbox',
  name: 'bower',
  message: 'JavaScriptライブラリは何を使いますか?',
  choices: [{
    value: 'bootstrap',
    name: 'twitter-bootstrap',
    checked: false
  },{ 
    value: 'angularjs',
    name: 'angular.js',
    checked: false
  }]  
 },  
 {   
  type: 'list',
  name: 'cimodule',
  message: 'CIツールは何を使いますか?',
  choices: [{
    value: 'gulp',
    name: 'gulp.js',
    checked: false
  },{
    value: 'grunt',
    name: 'Grunt',
    checked: false
  }]
}];

選択肢を追加したのち、generatorの変数に選択肢の結果を格納させます。

    this.prompt(prompts, function (props) {
      var haslib = function (lib) { return props.bower.indexOf(lib) !== -1; };
      var hasci = function (lib) { return props.cimodule.indexOf(lib) !== -1; };
      this.include = this.include || {};

      this.coffee = props.coffee;
      this.yourname = props.yourname;
      this.include.angular = haslib('angularjs');
      this.include.bootstrap = haslib('bootstrap');

      this.include.gulp = hasci('gulp');
      this.include.grunt = hasci('grunt');

      done();
    }.bind(this));

選択肢の結果でモジュールをインストールする

選択肢で選んだ回答にあわせ、生成されるテンプレートを切り替えなければいけません。

bower、grunt/gulpを選択肢に合わせてインストールするように改変してみましょう。

bower

app/templates/_bower.jsonを開いて、以下のように編集します。

  • 編集前
{
  "name": "package",
  "version": "0.0.0",
  "dependencies": {}
}
  • 編集後
{
  "name": "package",
  "version": "0.0.0",
  "dependencies": {<% if (include.angular) { %> 
    "angular": ">=1.2.14",<% } if (include.bootstrap) {%> 
    "bootstrap": ">=3.1.1",<% } %>
    "jquery": ">=2.1.0"
  }
}

grunt/gulp

CIツールに合わせ、app/templates/_package.jsonを編集してgrunt/gulpを選択出来るようにします。

  • 編集前
{
  "name": "package",
  "version": "0.0.0",
  "dependencies": {}
}
  • 編集後
{
  "name": "package",
  "version": "0.0.0",
  "dependencies": {<% if (include.grunt) { %> 
    "grunt": ">=0.4.4",<% } if (include.gulp) {%> 
    "gulp": ">=3.5.5",<% } %>
    "jshint-stylish": ">=0.1.5"
  }
}

ここまで編集したら、新しいフォルダを作るか、前のテンプレートを削除するかして、もう一度ジェネレートしてみましょう。

選択肢の内容に合わせ、javascriptライブラリやgrunt/gulpがインストールされれば成功です。

yo my subgenerator

subgeneratorを作ってみる

generatorにはsubgeneratorと言う考えがあります。

代表的な例は以下です。

このgeneratorは、テンプレート生成後に、同じフォルダ内で yo angular:route hogeのように実行すると、

routeフォルダ内のindex.jsが実行されます。

route/index.jsでは内部でviewとcontrollerを生成し、それを紐付けるrouterの追加を行ってくれます。

このように、プロジェクト生成後もルールに則った規則である程度の機能追加、改変を行うようにすることができます。

作成方法はgenerator-generatorで、以下のコマンドを実行します。

yo generator:subgenerator subgen

サブジェネレータ名(今回は仮にsubgen)を決めると、以下のようなフォルダ構成になります。

.
├── README.md
├── app
│   ├── index.js
│   └── templates
│       ├── _bower.json
│       ├── _package.json
│       ├── editorconfig
│       └── jshintrc
├── node_modules
├── package.json
├── subgen
│   ├── index.js
│   └── templates
│       └── somefile.js
└── test
    ├── test-creation.js
    └── test-load.js

作成されたのち、新しいフォルダもしくは一度もう一度yo sampleを実行、その後yo sample:subgen hogeと実行してみましょう。

フォルダにsomefile.jsがコピーされれば成功です。

設定を引き継いでsubgeneratorを動かしてみる

今回、最初の選択肢にcoffee scriptの選択肢を入れました。

その最初の設定に紐subgeneratorを起動させるため、generatorの設定を保持、取得する機能を導入してみましょう。

generatorの設定の保持/取得は以下の機能を使います。

設定を保存する場合はthis.config.set();を使用します。

以下のように記述することで、generator生成時に設定されたcoffee scriptのフラグが.yo-rcファイルに保存されるようになります。

this.prompt(prompts, function (props) {
  var haslib = function (lib) { return props.bower.indexOf(lib) !== -1; };
  var hasci = function (lib) { return props.cimodule.indexOf(lib) !== -1; };
  this.include = this.include || {};

  this.coffee = props.coffee;
  this.yourname = props.yourname;
  this.include.angular = haslib('angularjs');
  this.include.bootstrap = haslib('bootstrap');

  this.include.gulp = hasci('gulp');
  this.include.grunt = hasci('grunt');

  this.config.set('coffeescript', this.coffee); // <-- ここに追加!!

  done();
}.bind(this));

合わせて、somefile.jsをコピーしてsomefile.coffeeを作成します。

generatorテンプレート作成時に保存された.yo-rcの値はthis.config.get()で取得することが出来ます。

subgen/index.jsの内容を以下の用に編集します。

generatorテンプレート作成時に選ばれたcoffee scriptの値により、somefile.jssomefile.coffeeのどちらかをコピーするという処理を追加します。

'use strict';

var util = require('util');
var yeoman = require('yeoman-generator');

var SampleGenerator = yeoman.generators.NamedBase.extend({
  init: function () {
    console.log('You called the sample subgenerator with the argument ' + this.name + '.');
    this.coffee = this.config.get('coffeescript');
    console.log('this.coffee',this.coffee);
  },

  files: function () {

  	console.log('this.name',this.name);

  	var fileext = (this.coffee?".coffee":".js");
  	var copyScript =  this.name + fileext;

	this.copy('somefile' + fileext, copyScript);
  }
});

module.exports = SampleGenerator;

また最初からgeneratorを実行すると、最初に選択された設定に紐づき、ジェネレータが生成されるようになります。

以上で今回のハンズオンの内容は終了です、以下に参考ドキュメントなどをおいてますので

これから色々いじってみましょう。

参考文献

Document

Link's

You can’t perform that action at this time.