Gruntのlivereloadポート変更

Gruntを使ってるときに、なんらかの事情でサーバを複数立ち上げて、監視対象も複数にしたい場合の設定メモ。

grunt-contrib-connetの設定でhttpのポートとlivereloadのポートを設定する。

middlewareオプションで、connect-livereloadモジュールをportオプションを指定して実行。
httpのほうは、tmpディレクトリをルートディレクトリに指定。pathはpathモジュールだけど、path.resolveしなくても動くと思う。

Gruntfile.js

connect : {
    develop : {
        options : {
            port: 9002,
            middleware : function(connect,options){
                return [require('connect-livereload')({
                    port : 35730
                }),(function (connect,p){
                    return connect.static(p);
                })(connect,path.resolve('tmp'))];
            }
        }
    }
},

grunt-contrib-watchのほうの設定でも同じポートに設定する。

watchタスクで監視設定。connectで設定したlivereloadのポートと同じにする。

Gruntfile.js

watch : {
    develop: {
        options : {
            livereload : {
                port : 35730
            }
        },

        files : [
            '<%= config.src %>**/*.js',
            '<%= config.scssPath %>**/*.scss',
            '<%= config.viewsPath %>**/*.jade'
        ],
        tasks : ['build']
    }
},

例で使ってるconfigはこんな感じで設定。

Gruntfile.js

config: {
  src :  'src',
  scssPath : 'sass',
  viewsPath : 'views'
},

追記

sasaplus1のご指摘でGitHubみたらv0.4.0からgrunt-contrib-connectにlivereloadオプションが追加されたらしい。

Gruntfile

connect : {
  options: {
    hostname : '<%= config.hostname %>'            
  },         

  test : {
      options : {
          port: 9001,
          livereload : 35730,
          base : 'public'
      }
  }
},

おわり。