Sailsの内部のGruntをGulpに置き換える

Sailsって何？Railsじゃないの？

A, Node.jsではRailsに現状一番近いフレームワーク。開発が活発で、常にトレンドを追い続けてる
ex, REST APIやCLIからのgeneratorなど
(まぁpull-requestの反映も一週間ぐらい待てば誰かが応答してくれる)

Gruntってあのビルドツールでしょ？

A, そうなんです。実はSailsでは内部でGruntのビルドツールを使って静的なファイル、具体的にはassetsディレクトリの中身をビルドするのに使用しています。

静的ファイルをビルドするって何をやるの？

A,
CoffeeScriptとかSASS, LESSなどのAlt系のコンパイルや、
Imageの圧縮、JavaScript, CSSの圧縮、結合、
結合時に結合後のファイルのみをincludeするようにHTMLを書き換え
などなどやることは沢山あります。

これらの実装を楽にするために、起動時に内部的にgrunt:buildを実行しています。そのため、コンパイルするファイルが多すぎると、起動時から少し立たないと静的ファイルが落ちてこないこともよくあります。
原因はGruntの動作の遅さがあり、Gulpではそんな事は起こらないであろうと考えた。

さっそく置き換えよう

その前に、Sails v0.10からSails-generatorという機能が実装されました。
皆さんも使ったことがあるであろう、sails new appコマンドは内部的にsails-generatorを使用してひな形を生成しているものでした。
それが自由に書き換え可能になったため、最大限利用しようと思います。

How to

まずは必要なモジュールを入れます。
node.js npm sailsが導入前提です。

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

完了したら、次に~/.sailsrcがなければ作成して、編集します。

$ vim ~/.sailsrc

~/.sailsrc

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

そうです。勘の良い方は既に気づいているかもしれませんが、sails newした時に内部的に呼ばれるgrunt fileを作るgeneratorを差し替えています。
後はいつもの様に実行するだけです。
Gulpの実際のコードはtasksに入っています。タスクごとに分割されているため、読みやすいとは思います。