ひよこ3:07のTechブログ

Node.js の Web サイト開発で goemon を試す

goemon

goemon は mattn さんが作った Web 用の開発ツール。 Go 言語製。

ファイルが更新したタイミングでコマンドを実行して、開発サーバを再起動したり livereload を実行したりできるらしい。

設定が YAML で簡単にいじれたり、特定のビルドシステムとかに依存しない感じがよさそうなので試す。自分が普段使っている Node.js と組み合わせてみる。

インストール

Go 言語製なので go get で入る。もし GOROOT を設定していなければ設定する必要がある。最初レポジトリの URL をただ指定したら、コマンドがインストールされなくて1分ぐらいハマった。 README に書かれた URL を指定すればよかった。

$ go get github.com/mattn/goemon/cmd/goemon

babel と組み合わせるので、そっちもインストール。

$ npm install babel

設定

設定は goemon.yml に書くらしい。 goemon -g で標準出力にはき出されるので最初はそれを使う。

$ goemon -g > goemon.yml

できた goemon.yml を自分の環境に合わせて書き換える。今回はこんな感じ。

livereload: :8001
tasks:
- match: './src/*.js'
  commands:
  - node_modules/.bin/babel src --out-dir lib
  - :restart
  - :livereload /
- match: './assets/*.txt'
  commands:
  - :livereload /

サーバ

Express や connect を使った Web サーバの場合、connect-livereload を使うと自動でリロードさせることができた。

connect-livereload に渡したポートと goemon.yml のポートを合わせる。

import path from 'path';
import livereload from 'connect-livereload';
import express from 'express';

const app = express();

app.use(livereload({ port: 8001 }));

app.get('/', (req, res) => {
    var assetsDir = path.resolve(__dirname, '..', 'assets' + req.url);
    var files = fs.readdirSync(assetsDir);
    res.send(`<html>Hello, World!<br>${ files.join('<br>') }</html>`);
});

app.listen(8000);

src/server.js として保存。

実際に動かす

goemon ${ 起動コマンド } で起動できる。

$ babel src --out-dir lib
$ goemon node lib/server

localhost:8000 にアクセスすると、Hello, World! と表示される。 DevTools の Network で見るとちゃんと livereload.js も読み込まれている。

試しに Hello, World! の部分を Hello, Chicken! に変えて保存すると、ワンテンポおいて画面が更新された。

また assets フォルダを作成し、中に拡張子が .txt なファイルを作成・削除すると、同じように自動で更新されファイル名が表示される。

色々やってみた感想

  • コマンドが停止(?)すると自動でもう一度実行してくれる
    • 起動のタイミングで失敗すると何度も再起動し続けて、ちょっと慌てる
  • goemon.yml を更新すると自動で設定を読み直してくれるっぽい
    • 便利
  • gulp とかでやる src/**/*.js みたいな指定をすると反応してくれない
    • ソースコードを軽く読んだ限りできそう
    • なにかが間違っているのか、バグなのか
  • 環境変数を設定できると便利そう
    • node_modules/.binPATH に加えたり
  • goemon.yml 以外の設定ファイルも読めないのかな
    • Web ブラウザの確認だけじゃなくてテストにも使えそう
    • その場合設定ファイルは分けたほうが良さそう
  • 実際に使う場合は gulp-changed と組み合わせたりって感じだろうか
  • 特定のビルドシステムに依存しないと、やっぱり楽そう
    • gulp.watchgulp 外のシステムと組み合わせようとするとかなり辛い