[Grunt & Yeoman] grunt-contrib-connect と grunt-contrib-watch でサーバを立てて LiveReload をつかう

grunt-contrib-connect と grunt-contrib-watch を利用します。

% grunt -version
grunt-cli v0.1.10
grunt v0.4.1

インストール

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

Chrome 拡張機能も追加します。

Sublime Text を利用時の注意

LiveReload for Sublime Text プラグインを利用していると、機能がかぶってしまい意図したとおりに動きません。

% grunt
Running "connect:dev" (connect) task
Started connect web server on 127.0.0.1:8000.
Running "watch" task
Waiting...OK
>> File "src/index.html" changed.
... Reload src/index.html ...
Completed in 0.001s at Thu Nov 14 2013 19:13:44 GMT+0900 (JST) - Waiting...

当たり前ですが,地味にはまりました。
パッケージコントローラから、Disable or Remove して、アプリを再起動します。
grunt 2013-11-14 19-23-47

Gruntfile

'use strict'
module.exports = (grunt) ->
  # matchdep を利用してプラグインを読み込む
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)
  # グラントタスクの設定
  grunt.initConfig
    # config
    dir:
      src: 'src'
      dest: 'dist'
    pkg: grunt.file.readJSON "package.json"
    compass:
      dev:
        options:
          config: 'config.rb'
          environment: 'development'
          force: true
      prod:
        options:
          config: 'config.rb'
          environment: 'production'
          force: true
          cssDir: '<%= dir.dest %>/stylesheets'
    # watchの設定
    connect:
      dev:
        options:
          port: 8000
          hostname: 'localhost'
          base: '<%= dir.src %>'
          open: true
    watch:
      dev:
        options:
          livereload: true
          spawn: false
        files: [
          '<%= dir.src %>/**/*.html'
          '<%= dir.src %>/**/*.css'
        ]
        # files: ['<%= dir.dest %>/**/*']
      sass:
        options:
          livereload: false
          spawn: false
        files: ['<%= dir.src %>/sass/*.scss']
        tasks: ['compass:dev']
  # タスクコマンドの設定
  grunt.registerTask 'default', ['connect', 'watch']

実行

grunt で開始します。

% grunt
Running "connect:dev" (connect) task
Started connect web server on 127.0.0.1:8000.
Running "watch" task
Waiting...

connect で設定したポートでサーバが立ち上がります。
ドキュメントルートは base で設定したディレクトリになります。
open オプションがあるので、ディフォルトブラウザで表示されます。
ブラウザの livereload を下記のように有効(●)にしましょう。
grunt 2013-11-14 19-22-32
html を変更してみます。

OK
>> File "src/index.html" changed.
Running "watch" task
... Reload src/index.html ...
Completed in 0.006s at Thu Nov 14 2013 23:22:04 GMT+0900 (JST) - Waiting...

css を変更してみます。

OK
>> File "src/sass/style.scss" changed.
Running "compass:dev" (compass) task
identical src/stylesheets/ie.css (0.003s)
identical src/stylesheets/print.css (0.001s)
identical src/stylesheets/screen.css (0.03s)
overwrite src/stylesheets/style.css (0.007s)
Compilation took 0.043s
Running "watch" task
... Reload src/sass/style.scss ...
Completed in 0.768s at Thu Nov 14 2013 23:53:59 GMT+0900 (JST) - Waiting...
OK
>> File "src/stylesheets/style.css" changed.
>> File "src/stylesheets/screen.css" changed.
>> File "src/stylesheets/ie.css" changed.
>> File "src/stylesheets/print.css" changed.
Running "watch" task
... Reload src/stylesheets/print.css ...
... Reload src/stylesheets/ie.css ...
... Reload src/stylesheets/screen.css ...
... Reload src/stylesheets/style.css ...
... Reload src/index.html ...
Completed in 0.007s at Thu Nov 14 2013 23:53:59 GMT+0900 (JST) - Waiting...

watchfiles で監視するファイルを指定しています。
optionslivereload を有効化しています。

spawn

実際に利用すると、スピードが遅く実用的でないため調べてみたところ、spawn: false オプションがありました。

補遺

多重 Reload

console を見る限りでは、ファイルが多重リロードされることがある。

Running "watch" task
... Reload src/index.html ...
... Reload src/index.html ...

ことがあるというのは、同じ Gruntfile でも起こらない時があるようだから。
実用上、困ることはないけれど、わからないところ。
その後確認していないので、どうもタスクの組み方に問題があったように思います。

Waiting…Fatal error: Port 35729 is already in use by another process.

% lsof -iTCP:35729
% ps aux | grep node

ポートを変更してみると良さそうです。