blog.bouzuya.net

2014-03-17 grunt-contrib-connect/grunt-contrib-watchをためした

grunt-contrib-connect/grunt-contrib-watchをためした。以前から使っているのだけれど、Cordova/PhoneGapを使ったハイブリッドアプリの開発を通じて、改めてGruntを設定しているので、そのついでに概要などを書いておく。

GruntはJavaScriptのタスクを実行する自動化ツール。JavaScript開発で標準的に使われている、とぼくは思っている。GruntのプラグインやGruntから使うツールやGruntが使われているYeomanなど関連エントリーは過去に何度か書いている。プラグインに関するものだけ適当に挙げておく。

意外と書いていない。そう感じるくらいに毎日使っている。もう当たり前になってしまって書いていないのだと思う。

ぼくの初見はかなり遅くて、2013-10-26にInnovation Egg 第一回で門脇恒平(@kadoppe)さんのHTML5セッションでYeomanを知り、それを実際に試したのがたぶん今年に入ってからだと思う。WEB+DB PRESS Vol.77で伊藤直也(@naoya_ito)さんに紹介されていた。

閑話休題。grunt-contrib-connect/grunt-contrib-watchは何か。ざっくり書くとWebブラウザーでのプレビュー表示と保存するたびにリロードされる(livereload)環境をつくるプラグイン。

もうすこし詳しく書く。まず名前について、grunt-contrib-からはじまる名前はgruntチームが提供しているプラグインのもの。なので今回紹介しているふたつは共に公式プラグイン。

grunt-contrib-connectはgruntからconnectを操作するプラグイン。connectはNode.jsで広く使われているシンプルなWeb server。expressから使われている。Rubyにおけるsinatraみたいなもの。livereloadの例であれば、livereload用のポートを開ける。

grunt-contrib-watchはファイルを監視するプラグイン。指定したファイルに変更があった場合に指定のタスクを実行する。livereloadの例であれば、ファイルを監視して、livereloadポートに通知する。

以前だとこれらにさらにgrunt-openやgrunt-contrib-livereloadを組み合わせて実現していたのだけれど、いまだと上記のgrunt-contrib-connect/grunt-contrib-watchだけで割と簡単に実現できる。

grunt環境が既にあるなら、あとはプラグインをインストールして最低限の設定だけ。

$ npm install --save-dev grunt-contrib-connect grunt-contrib-watch

grunt-contrib-watchのlivereload設定の例を見れば良い。

grunt.initConfig({
  watch: {
    server: {
      files: [
        'app/**'
      ],
      tasks: [],
      options: {
        livereload: 35729,
      }
    },
  },
  // ...
});

リンク先の例ではlivereloadにはBooleanを指定しているが、portを指定しても良い。ぼくの場合は35729を指定している。

grunt-contrib-connect側にもlivereloadオプションがあるので、それを使えば良い。

grunt.initConfig({
  connect: {
    server: {
      options: {
        port: 9000,
        protocol: 'http',
        hostname: '0.0.0.0',
        base: 'app',
        livereload: 35729,
        open: true,
      }
    },
  },
  // ...
});

あとはaliasを設定しておけば、実行するだけ。

grunt.registerTask('server', ['connect:server', 'watch:server']);

grunt server

これがあるとないとでは全然違う。ぼくはこの動作に依存している。自分でリロードなんてバカらしくてやってられない。

grunt-contrib-watchは良くないとか、そもそもgruntが良くない(gulpを使う)とか、いろいろあるんだけど、とりあえずこれがgruntが公式に提供しているプラグインでの動き。grunt-contrib-connect/grunt-contrib-watchはGrunt使っているなら使わないと損だと思うプラグイン。