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 ができる社会が生まれた。