gulpでlivereloadしたい時の書き方

gulp-connect が deprecate されたので記事を更新します。
(過去記事は過去記事として残しておきます)

gulp-webserver というのが出て来ました。

オプションが2つほど追加された感じですね。
(地味に嬉しい directoryListing と open)

また記述がかなり少なくなりました。

gulpfile.js

var gulp = require('gulp');
var webserver = require('gulp-webserver');

gulp.task('webserver', function() {
  gulp.src('./')
    .pipe(webserver({
      livereload: true,
      port: 8001,
      fallback: 'index.html',
      open: true
    }));
});

gulp.task('default', ['webserver']);

(雑なgifアニメだし、分かりづらいですね。。)

で、試してみた結果、reloadのspeed自体1〜2秒程かかっており、gulp-connectよりも遅い感じがあります。
そして、 directoryListing を使ってみて戻してみた所reloadしないという状態です。
記述が非常に短くなったのは良いと思うのですが、ミニマムな最小構成で組んでみて1〜2秒ほどかかるので、結構この差はデカいかもしれません。

構成

[lion-man]$ tree . -I node_modules
.
├── gulpfile.js
├── index.html
├── lib
│   └── index.js
└── package.json

1 directory, 4 files

監視するファイル自体を ./ ではなく、 lib にしてみたりしたのですが、やはりあまり変わらずと言った所です。

gulp-webserver

0.96 real         0.57 user         0.08 sys

gulp-connect

1.10 real         0.58 user         0.10 sys

あくまで参考程度にUNIXの time コマンド使ってみました。
そこまでの違いないんですが、このreloadの遅さはどこから来るんでしょうね。

下記は過去記事です(2015/1/29編集時点)

よく忘れるのでメモです。

クライアントサイドJS書こうとした時にすぐ「これは別ファイルでー」とかやろうとしたらセキュリティに引っかかって「あー、忘れてた」って時に手っ取り早くgulpを使ってローカルサーバ作るかと思います。
そんな時にgulp-connect使うと思うのですが、単純に書こうとしてもファイル監視してリロードしてくれなくて、うーんどうだったっけって前にやったやり方とか漁るかと思いますが、時間が勿体無いですね。

なので、メモ書きをしておこうと思った次第です。

gulpfile.js

var gulp = require("gulp");
var connect = require("gulp-connect");
var path = require("path");

var paths = [
  "./*.md",
  "./*.html",
  "./*.js"
];

gulp.task("connect", function() {
  connect.server({
    livereload: true,
    port: 8001,
    root: path.resolve("./")
  });
});

gulp.task("watch", function() {
  gulp.watch(paths, ["reload"]);
});

gulp.task("reload", function() {
  gulp.src(paths)
    .pipe(connect.reload());
});

gulp.task("default", ["connect", "watch"]);