gulp で livereload できる開発用サーバを立てる

gulp で開発用サーバを立てるには、gulp-connect とか、gulp-webserver とががあるんだけど、
ブラックリスト入りしていて、
gulp 的には
「入出力を伴わない処理をプラグインにすんじゃねーよバーカ」
ってことなんだと思う。

なんだか過激だなあと感じつつも、できるだけ依存の少ない gulpfile を書けという方針には、概ね賛成なので、
その辺のプラグインを使わずに、開発用サーバを立ててみる。

静的ファイルを配信するサーバを立てる

まずは、普通にサーバを立てる。
connect 使えって言われてるので、素直にその言に従います。

connect = require "connect"

gulp.task "serve", ->
  connect()
    .listen 9000

やったーー！！
立ちました、ウェッブサーバが。やった。
しかし、何のファイルも配信していないので、middleware で静的ファイルを配信します。

connect = require "connect"
serveStatic = require "serve-static"

gulp.task "serve", ->
  connect()
    .use serveStatic DOCUMENT_ROOT
    .listen 9000

やったーー！！
立ちました、静的ファイルを配信するウェッブサーバが。
なんだ簡単じゃないか。
確かにこんなことのためにプラグインなど必要ない。

livereload サーバを立てる

livereload をするためには、リロードの通知を送るための websocket サーバを立ててやる必要がある。
livereload 用のサーバとしては、tiny-lr が有名なので、
このモジュールを使ってレッツトライ！したいところだが、ほんのちょっとだけ手間（本当にほんのちょっとだけ）なので、
代わりに gulp プラグインの gulp-livereload を使う。

gulp-livereload で livereload サーバを立てるのは、こんな感じ。

connect = require "connect"
serveStatic = require "serve-static"
livereload = require "gulp-livereload"

gulp.task "serve", ->
  livereload.listen()
  connect()
    .use serveStatic DOCUMENT_ROOT
    .listen 9000

そして、ﾌﾞﾗｧｳｻﾞｰをﾘｨﾛｰﾄﾞしたいﾀｧｰｲﾐﾝｸﾞで livereload.reload() を pipe すればOK！

gulp.task "some-task", ->
  gulp
    .src SRC
    .pipe someProcess()
    .pipe livereload.reload()

このとき、リロードの指示が、pipe されてるファイルにだけ飛ぶので、
CSSとかは、ページ自体の更新をせずに、スタイルだけが逐次更新される。うれしい！

これで livereload サーバはOK！
ただし、ブラウザ側は、livereload 用のブラウザ拡張が必要。

ブラウザ拡張なしで更新できるようにする

当たり前だが、livereload を実現するには、どこかで websocket サーバに繋げるための js を実行する必要がある。
livereload 用のブラウザ拡張は、そのための JS のスニペットを自動で、全てのページに埋め込んでくれるもの。
とはいえ、そんなことのためにブラウザ拡張入れるのいやだし、スマホとかでもリロードしてほしい。
ので、connect の middleware で livereload のスニペットを埋め込む。
connect-livereload という middleware を使う。

connect = require "connect"
serveStatic = require "serve-static"
livereload = require "gulp-livereload"
connectLivereload = require "connect-livereload"

gulp.task "serve", ->
  livereload.listen()
  connect()
    .use connectLivereload()
    .use serveStatic DOCUMENT_ROOT
    .listen 9000

かくて html には livereload 用のスニペットが埋め込まれ、websocket の使えるブラウザは、誰でも自由に livereload ができる社会が生まれた。

最近よんだ漫画

あれよ星屑
超おもしろい
あっち系の人が描く漫画は面白いという法則

クジラの子らは砂上に歌う
超好き
登場人物全員かわいい系殺戮SF、続きが気になる

魔法使いの嫁
超かわいい
人生達観系ヒロインすき

ちーちゃんはちょっと足りない
超胸糞わるい
ほんと救いないし、タブーに踏み込んでく姿勢すき