@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

Sublime TextのLiveReloadとgrunt-contrib-wacthの同時使用でエラーが出る

Sublime TextにLiveReloadというパッケージを入れた状態で
grunt-contrib-watchを実行すると下記のようなエラーが出ます。

Running "watch" task
Waiting...
Fatal error: Port 35729 is already in use by another process.

調べたところ、LiveReloadパッケージとGruntで使用しているポート番号が同じために衝突を起こしているのが問題みたいです。
解決方法は以下の3つが挙げられます。

  1. LiveReloadを削除する
  2. LiveReloadを無効化する
  3. grunt-contrib-watchで使用するポート番号を変更する

それぞれの詳細は次で説明いたします。
因みに今回の環境は以下通りです。

エラーが起こった環境

  • Mac: OSX v10.9.4
  • Sublime Text: v3
  • grunt: v0.4.4
  • grunt-contrib-watch: 0.6.1

1. LiveReloadを削除する

Package Controlのコマンドを使って削除します。

  1. Package Control: Remove Package を選択します。
  2. パッケージのリストが表示されますので、LiveReloadを選択します。

2. LiveReloadを無効化する

削除するのはちょっと...もしかしたら使うかもだし...というかたはこの方法がいいんじゃないでしょうか。

  1. Package Control: Disable Package を選択します。
  2. パッケージのリストが表示されますので、LiveReloadを選択します。

3. grunt-contrib-watchで使用するポート番号を変更する

grunt-contrib-watchのページにある通り、 Gruntfile.js内に「options.livereload」を指定します。
追加すると、下記のような感じになります。

watc: {
  css: {
    files: '**/*.sass',
    tasks: ['sass'],
    options: {
      livereload: 1337
    }
  }
}

「true」または「1337」を指定しなさいと書いていたのですが、「true」だと相変わらずエラーが出たので数値を指定するのが良さそうです。

いずれの方法でも、作業が終わったらSublime TextとTerminalの再起動を行いましょう。
これでエラー無く動くかと思います。