[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
Contents
インストール
% npm install grunt-contrib-connect --save-dev
% npm install grunt-contrib-watch --save-dev
Chrome 拡張機能も追加します。
Sublime Text を利用時の注意
LiveReload for Sublime Text プラグインを利用していると、機能がかぶってしまい意図したとおりに動きません。
正しく grunt で Reload されていると ... Reload と表示されます。
% 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 して、アプリを再起動します。
Gruntfile
html と Compass でコンパイルされた css を監視し、変更があればリロードします。
'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 を下記のように有効（●）にしましょう。
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...
watch の files で監視するファイルを指定しています。
options で livereload を有効化しています。
spawn
実際に利用すると、スピードが遅く実用的でないため調べてみたところ、spawn: false オプションがありました。
default では true となっており、子プロセスが走るようです。
なぜディフォルトで true なのか、どんな使い方をするのかまでは理解できていません。
補遺
多重 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
ポートを変更してみると良さそうです。