sails new コマンドをhookして独自環境を構築するSails Generatorについて

Sails.js は v0.10系から、Sails Generator を使った環境構築方法を提供しています。
(※ currently experimental の記述あり)

今回は、そのSails Generatorを使った構築方法を 2通り紹介したいと思います。

sails new hook 方式

sails new コマンド実行時の Scaffold は sails-generate-xxx を複数実行して生成しています。

例えば、Viewテンプレートを ejs から jade に変更する場合、コマンドのオプションで sails-generate-views を sails-generate-views-jade に差し替えて、生成するファイル構成を変えています。

この使い分けと同じ仕組みを 自身の環境用に定義します。

Sails.js はデフォルトで grunt を使っていますが、これを gulp を使える構成に変更してみます。

npm に登録されている 各種 sails-generate と設定ファイル .sailsrc を使ってそれらを実現します。

参考記事

sails-generate-new-gulp
https://www.npmjs.org/package/sails-generate-new-gulp
Gulp Generators - Google Group
https://groups.google.com/forum/#!topic/sailsjs/WoR1qcQSm-8

sails-generete をインストールします。

$ npm install -g sails-generate-backend-gulp
$ npm install -g sails-generate-gulpfile
$ npm install -g sails-generate-frontend-gulp
$ npm install -g sails-generate-new-gulp

.sailsrc を作成します。
もしくは sails new コマンド実行したフォルダ内にも .sailsrc ファイルが生成されているのでコピーしてもオッケーです。

vim $HOME/.sailsrc

{
  "generators": {
    "modules": {}
  }
}

gulp 用に設定を追加します。


{
  "generators": {
      "modules": {
      "new": "sails-generate-new-gulp",
        "frontend": "sails-generate-frontend-gulp",
        "backend": "sails-generate-backend-gulp",
        "gruntfile": "sails-generate-gulpfile"
      }
 }
}

この状態で sails new コマンドを実行すると gulp を実行出来る環境を構築してくれます。

(Root)
├── README.md
├── api
│   ├── controllers
│   ├── hooks
│   │   └── gulp
│   │       └── index.js
│   └── (省略)
├── app.js
├── assets
│   └── (省略)
├── config
│   └── (省略)
├── gulpfile.js
├── node_modules
│   └── (省略)
├── package.json
├── tasks
│   ├── README.md
│   ├── config
│   │   ├── clean.js
│   │   ├── coffee.js
│   │   ├── concat.js
│   │   ├── copy.js
│   │   ├── cssmin.js
│   │   ├── images.js
│   │   ├── jst.js
│   │   ├── less.js
│   │   ├── sails-linker-gulp.js
│   │   ├── uglify.js
│   │   └── watch.js
│   ├── pipeline.js
│   └── register
│       ├── build.js
│       ├── buildProd.js
│       ├── compileAssets.js
│       ├── default.js
│       ├── linkAssets.js
│       ├── linkAssetsBuild.js
│       ├── linkAssetsBuildProd.js
│       ├── prod.js
│       └── syncAssets.js
└── views
    └── (省略)

ここで注意したいのは、$HOME/.sailsrc に環境構築用の設定を行ってしまうということで、例えば実行するPCが違うと sails new で生成されるファイルが全く異なる構成になるということです。
実際に私はマシン毎に生成されるフォルダが異なり、v0.10の RC版を追っていた時期だったので RC のバージョンが上がるごとに(実際にはマシンが違っていて) sails new すると、ビルドツールが gulp と grunt 入れ替わり混乱した時期がありました。

実際には new コマンドを実行する working directory に .sailsrc を配置する方が安全かもしれません。

sails generate add-on 方式

sails new によって生成された Scaffold に必要な機能を追加します。

ここでは oAuth などのログイン認証の機能を提供する passportモジュールを使うファイル群を追加します。

必要なモジュール(sails-generate)を追加します。

$ npm i -g sails-generate-auth

sails newで生成されたファイルのルートディレクトリに移動します。
($HOME/.sailsrc は削除すること)

$ sails new sails-add-on
$ cd sails add-on
生成された .sailsrc ファイルを編集します
{
  "generators": {
    "modules": {
         "auth": "sails-generate-auth"
    }
  }
}
(2014/08/13追記) ``sails generate auth`` を使うだけなら ``.sailsrc`` の編集は不要でした (2014/08/13追記終わり)

sails generate auth を実行します。

$ mv config/locales/en.json config/locales/_en.json
# 重複回避。sails generate に -f オプションが欲しい所です…. 

$ sails  generate auth
Running generator (sails-generate-auth) @ `/Volumes/D/Copy/work/test`...
info: Created a new auth!

api/controllers/AuthController.jsapi/models/Passport.js などのファイルが追加されていることが分かります。

この様に Saisl Generator を使うことでデフォルトの構成や機能拡張が楽に行える様になるので、皆さんも使ってみてはいかがでしょうか?

Happy Sailing !!!