はじめに
web制作ではhtmlやcssでコーディングした後ブラウザで表示の確認をしますよね。
表示の確認をするにはブラウザ側を手動で更新しないといけません。
一見単純な作業ですが毎回手動で確認するのも面倒です。
今回はbrowser-syncというプラグインを使ってブラウザを自動リロードする方法について説明していきます。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではブラウザを自動リロードする方法について説明していきます。
メリット
ブラウザを自動リロードさせるだけであれば、VSCodeのプラグイン「Live Server」を使えばいいです。
しかしbrowser-syncを使えば以下3つのようなメリットがあります。
ディレクトリ構成
今回のディレクトリ構成は下記になります。
test
├ node_modules
├ dist
├ src
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.jsonsrcの中にindex.html を入れています。
browser-syncを使ってindex.html を表示させる方法について説明していきます。
browser-syncをインストールしよう
それではbrowser-syncをインストールしていきましょう。
npm i -D browser-sync
下記コマンドをターミナルで実行してbrowser-syncをインストールします。
npm i -D browser-syncbrowser-sync 公式
gulpfile.jsを編集しよう
プラグインのインストールが完了したらgulpfile.jsを編集していきましょう。
//----------------------------------------------------------------------
// モード
//----------------------------------------------------------------------
"use strict";
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch, tree } = require("gulp");
const bs = require("browser-sync");
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function bsInit(done) {
bs.init({
server: {
baseDir: "./" // browser-syncが基準とするディレクトリを指定する
},
startPath: "src/index.html", // 開きたいパスを指定する
notify: false, // ブラウザ更新時に出てくる通知を非表示にする
open: "external", // ローカルIPアドレスでサーバを立ち上げる
});
done();
}
function bsReload(done) {
bs.reload();
done();
}
function watchTask(done) {
watch(["./src/**"], series(bsReload)); // 監視対象とするパスはお好みで
}
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
exports.bs = series(bsInit, bsReload, watchTask);
/************************************************************************/
/* END OF FILE */
/************************************************************************/browser-syncオプション
browser-syncの処理を定義しました。
今回定義したオプションについてまとめておきます。
| オプション | 値 | 内容 |
| baseDir | ./ | browser-syncが基準とするディレクトリを指定する。 |
| startPath | /src/index.html | 開きたいパスを指定する。 |
| notify | false | ブラウザ更新時に出てくる通知を非表示にする。 |
| open | external | ローカルIPアドレスでサーバを立ち上げる。 browser-syncで立ち上げたブラウザのURLをスマホなどの他の端末で入力すると表示される。 |
コマンドを実行しよう
以下コマンドを実行しましょう。
npx gulp bs「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。
gulpのインストール先が異なる可能性があります。
以下のようになればbrowser-syncが正しく起動しました。
[00:00:00] Starting 'bs'...
[00:00:00] Starting 'bsInit'...
[00:00:00] Finished 'bsInit' after 43 ms
[00:00:00] Starting 'bsReload'...
[00:00:00] Finished 'bsReload' after 1.17 ms
[00:00:00] Starting 'watchTask'...
[Browsersync] Access URLs:
------------------------------------------------------
Local: http://localhost:3000/src/index.html
External: http://123.456.78.123:3000/src/index.html
------------------------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
------------------------------------------------------
[Browsersync] Serving files from: ./「Ctrl」 + 「c」でbrowser-syncを終了させることができます。
別のhtmlファイルをブラウザに表示させてみよう
index.html をbrowser-syncでブラウザに表示させる方法について説明していきました。
念のためbrowser-syncを使って別のhtmlファイルを表示させる方法について説明します。
startPathオプションを変更する
ブラウザ立ち上げ時点で表示させたいhtmlファイルを変更する方法です。
browser-syncのstartPathオプションを以下のように変更しましょう。
startPath: "src/aaa.html",browse-syncを起動させるとaaa.html が表示されると思います。
ブラウザのURLを変更する
ブラウザ立ち上げ以降で表示させたいhtmlファイルを変更する方法です。
browser-syncで立ち上げたブラウザのURLを直接変更していきましょう。
以下のようにindex.htmlをaaa.htmlに変更しましょう。
aaa.htmlが表示されれば正しく動作しています。
おわりに
以上browser-syncのプラグインを使ってブラウザを自動リロードする方法について説明しました。
いかがだったでしょうか。
ブラウザを手動で更新するのが面倒に感じている方はぜひbrowser-syncを導入してみてください。
次回はWordPress環境でブラウザを自動リロードさせる方法について説明します。
コメント