gulp プラグイン『gulp-webserver』 を使ってライブリロードする方法

phi phi on gulp

gulp のプラグイン『gulp-webserver』を使ってライブリロードする方法メモ.

ライブリロードって?

ライブリロードとは, html とかそれに関連する js, css などを修正した際に その変更をキャッチしてブラウザのページをリロードしてくれる機能のことです.

最近の Web 開発では必須ですね♪

gulp を使ってライブリロードしよう

下記の流れで実際に試せます.

1. ライブリロードさせたいページを用意する

app フォルダを作ってその中に index.html を作ります.
中身はこんな感じ

<!DOCTYPE html>

<html>  
    <head>
    </head>
    <body>
        <h1>ライブリロードするよー</h1>
        <p>
            最近ちょっと太ったのでワンダーコア買おうか迷ってます...
        </p>
    </body>
</html>  

ディレクトリ構造はこんな感じです.

.
├── app
│   └── index.html
├── gulpfile.js
└── package.json

2. npm で gulp-webserver をインストールする

下記コマンドでインストール

$ npm install --save-dev gulp-webserver

3. gulpfile.js にタスクを追加

gulpfile.js に下記のようにタスクを追加します.

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

gulp.task("default", function() {  
  gulp.src('app')
    .pipe(webserver({
      livereload: true, // ライブリロードを有効に
      open: true,       // タスク実行と同時にページを開く
    }))
    ;
});

4. gulp を実行

$gulp を実行してみてください.
下図のような文言が表示され, ページが開くのがわかるかと思います.

Webserver started at http://localhost:8000  

これでサーバーが立ち上がってファイルの更新を監視し, 更新があればブラウザをリロードしてくれるようになります.

試しに app/index.html の内容を書き換えてみてください.

最近ちょっと太ったのでワンダーコア買おうか迷ってます...
↓
買ったけど結局使っていない件...

ファイルを保存すると自動でブラウザがリロードされたのが わかるかと思います.

サンプル

実際のサンプルを作って github にアップしたので よかったら動かしてみてください.

[github] - [download]

また, 下記のコマンドでも簡単に試すことができます.

$ git clone -b demo/livereload https://github.com/phi-jp/gulp-test.git
$ cd gulp-test
$ npm install
$ gulp

参考になれば幸いです.