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

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

[markdown]
> * [gruntjs/grunt-contrib-connect · GitHub](https://github.com/gruntjs/grunt-contrib-connect)
> * [gruntjs/grunt-contrib-watch · GitHub](https://github.com/gruntjs/grunt-contrib-watch)

“`prettyprinted
% grunt -version
grunt-cli v0.1.10
grunt v0.4.1
“`

## インストール

“`prettyprinted
% npm install grunt-contrib-connect –save-dev
% npm install grunt-contrib-watch –save-dev
“`

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

> * [Chrome ウェブストア – LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)

### Sublime Text を利用時の注意

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

> * [dz0ny/LiveReload-sublimetext2 · GitHub](https://github.com/dz0ny/LiveReload-sublimetext2)

正しく grunt で Reload されていると `… Reload` と表示されます。

“`prettyprinted
% 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

> * [GruntのLiveReloadを試してみたら想像以上に便利だった。 – タチコマ好きなエンジニアのブログ](http://yukihir0.hatenablog.jp/entry/2013/08/08/204055)

html と Compass でコンパイルされた css を監視し、変更があればリロードします。

> * [Grunt: Compass のコンパイルと監視を行う | deadwood](https://www.d-wood.com/blog/2013/11/13_5027.html)

“`
‘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` で開始します。

“`prettyprinted
% 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 を変更してみます。

“`prettyprinted
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 を変更してみます。

“`prettyprinted
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 ` オプションがありました。

> * [grunt watch が遅い時の改善方法 | 1000g](http://1000g.5qk.jp/2013/10/20/grunt-watch-%e3%81%8c%e9%81%85%e3%81%84%e6%99%82%e3%81%ae%e6%94%b9%e5%96%84%e6%96%b9%e6%b3%95/#more-1631)
> * [gruntjs/grunt-contrib-watch · GitHub](https://github.com/gruntjs/grunt-contrib-watch#optionsspawn)

default では `true` となっており、子プロセスが走るようです。
なぜディフォルトで `true` なのか、どんな使い方をするのかまでは理解できていません。

## 補遺

### 多重 Reload

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

“`prettyprinted
Running “watch” task
… Reload src/index.html …
… Reload src/index.html …
“`

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

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

> * [Failed to start: port occupied – LiveReload Help & Support](http://feedback.livereload.com/knowledgebase/articles/86181-failed-to-start-port-occupied)

“`prettyprinted
% lsof -iTCP:35729
% ps aux | grep node
“`

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

> * [Yeoman: フロントエンド開発のワークフローを提供するツール | deadwood](https://www.d-wood.com/blog/2014/02/12_5469.html)
[/markdown]