コンテンツにスキップ

yo

  • in Yeoman, yo
  • このページは約1分で読めます

初めてのYeoman (yoを使った雛形作成)

前回 ‘Hubot –create’ は古い というエントリでYeomanを試してみたいと宣言したので試してみます。

Yeoman は以下の3要素で構成されているそうな

  • yo: 雛形作成ツール
  • Grunt: タスクランナー
  • Bower: フロントエンドパッケージマネージャ

今回は前回に引き続き yo を使ってみたいと思います。

前提としては yo をインストール済みであること。

$ npm install -g yo

また、 yo は npm のバージョン2.1.0以上が推奨なので必要に応じて npm もアップデートします。

npm update -g npm

generator-angular-fullstack を使ってみる

今回 yo で作成する雛形として generator-angular-fullstack を使ってみる

generator-angular-fullstack は MEAN なアプリケーションの雛形で、使い勝手が良いという噂

早速インストール

$ cd yeoman/angular_fullstack
$ npm install generator-angular-fullstack

インストールできたので実行してみる

$ yo angular-fullstack
     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I create an AngularJS app with an Express server.

# Client

? What would you like to write scripts with? JavaScript
? What would you like to write markup with? HTML
? What would you like to write stylesheets with? Sass
? What Angular router would you like to use? uiRouter
? Would you like to include Bootstrap? Yes
? Would you like to include UI Bootstrap? Yes

# Server

? Would you like to use mongoDB with Mongoose for data modeling? Yes
? Would you scaffold out an authentication boilerplate? Yes
? Would you like to include additional oAuth strategies? Google, Facebook, Twitter
? Would you like to use socket.io? Yes

雛形作成を実行するといくつかインタラクティブに聞かれるので答える

今回は基本的に Yes と答えてみた

実行が終わると雛形ができていた

$ ls
Gruntfile.js  bower.json  client  e2e  karma.conf.js  node_modules  package.json  protractor.conf.js  server

つづく

次回は grunt を使って実際にアプリケーションを動かしてみる

参照

  • in Hubot, Yeoman, yo
  • このページは約1分で読めます

'hubot --create' は古い

このブログで過去に何度かHubotについて書いたときに、新しいbotを作るときのコマンドは hubot --create bot_name だったのですが、このコマンドが非推奨になったようなのでメモ。

hubot --create が使えない

新しいbotを作ろうとして hubot --create コマンドを打つと以下のように怒られた

$ hubot --create test_bot
'hubot --create' is deprecated. Use the yeoman generator instead:
    npm install -g yo generator-hubot
    mkdir -p test_bot
    yo hubot
See https://github.com/github/hubot/blob/master/docs/README.md for more details on getting started.

ところがseeとなっているREADMEファイルは存在しない模様...

yo と generator-hubot とは何か

よくわからないが yo と generator-hubot をインストールしろと言われているのはわかるので調べてみる

yo と generator-xxx

yoはYeomanというGoole社が開発した統合開発ツール群に属するツールの一つで、「雛形作成ツール」であるらしい

そしてその雛形は "generator-xxx" という形でさまざま用意されており、そのHubot版が generator-hubot と言う訳である

つまり上記エラーメッセージは

  • 雛形作成ツールである yo と、Hubotの雛形である generator-hubot をインストールし
  • 新規ディレクトリ上で yo を実行してHubotの雛形を作るべし

ということのようである

yo と generator-hubot のインストール

指定された通り以下のようにインストールする

$ npm install -g yo generator-hubot

（余談：私の場合はNode.jsのインストールされたpathとnpmのrootが違っていたため少々上手くいかなかった。エラーメッセージは素直によく読むべきだ。。。）

yo の実行

インストールが成功したら、新しいbotのディレクトリを作ってそこで yo を実行する

$ mkdir test_bot
$ cd test_bot
$ yo hubot  # これは generator-hubot の雛形を作る、という意味

yo hubot を実行するとHubotのAAが表示され、いくつかのやり取りが立ち上がる

$ yo hubot
                     _____________________________  
                    /                             \ 
   //\              |      Extracting input for    |
  ////\    _____    |   self-replication process   |
 //////\  /_____\   \                             / 
 ======= |[^_/\_]|   /----------------------------  
  |   | _|___@@__|__                                
  +===+/  ///     \_\                               
   | |_\ /// HUBOT/\\                             
   |___/\//      /  \\                            
         \      /   +---+                            
          \____/    |   |                            
           | //|    +===+                            
            \//      |xx|                            

? Owner: sojiro
? Bot name: slack-test-bot
? Description: Slack Bot test
? Bot adapter: (campfire) slack
? Bot adapter: slack
   create bin/hubot
   create bin/hubot.cmd
   create Procfile
   create README.md
   create external-scripts.json
   create hubot-scripts.json
   create .gitignore
   create package.json
   create scripts/example.coffee
   create .editorconfig
                     _____________________________  
 _____              /                             \ 
 \    \             |   Self-replication process   |
 |    |    _____    |          complete...         |
 |__\\|   /_____\   \     Good luck with that.    / 
   |//+  |[^_/\_]|   /----------------------------  
  |   | _|___@@__|__                                
  +===+/  ///     \_\                               
   | |_\ /// HUBOT/\\                             
   |___/\//      /  \\                            
         \      /   +---+                            
          \____/    |   |                            
           | //|    +===+                            
            \//      |xx|      
...
...

各項目それぞれデフォルト値が設定されており、なにも入力せずEnterを押していくとその通りになる

今回はSlack用のbotだったので Bot adapter: の欄で slack と入力した

他にも用途に合わせてadapterが用意されているようである

この yo 実行により、Hubotの雛形が作成され、 hubot --create と同様にセットアップが完了する

なおかつadapterを予め設定できる分、セットアップが楽になっている

最後に

今回はHubotに絡んで偶発的に yo を知りましたが、かなり便利そうなのでYeoman含めて今後も使ってみたいところです

参照