Skip to content →

Browser-Syncの使い方

こもりが「Browser-Sync」のことを書いて半年が経ちました。遅れてきた皆さん、こんにちは。

browser-sync

先の記事でもちょっと触れたKDDIウェブコミュニケーションズさんの記事は、GoogleのWeb Starter Kitに端を発して「gulp」や「browser-sync」の使い方を紹介されてるものだと思います。

ただ、ここに書いてあるぐらいの任意のディレクトリやファイルを監視してリロードするぐらいのことなら、わざわざgulpを入れることもないしグローバルにBrowser-Syncを入れる必要もありません。

残念ながら、単体で動きます。

別にヤリとかマサカリを投げてるつもりはありませんし、書いてあることが間違えてるわけでもないのですが、そのぐらいのことならわざわざgulpとか使わなくてもなぁ…と思っただけです。もちろん、他の処理と組み合わせたりしてリロードするとかになった場合は、gulpとかと連動させた方が良いでしょう。

任意のディレクトリでBrowser-Syncを動かす

ローカルの任意のディレクトリを対象としてそこでサーバを起動したければいろいろな方法が採れます。AnvilみたいなGUIのアプリもありますし、PHPやRuby、Pythonが動かせるのなら、コマンドラインで一個打てばOKでしょう。たとえばこの記事「Simple One-Line Local HTTP Servers」にあるように。

ただまぁ、監視しながらリロード、それも複数デバイスで同期させて…となったらBrowser-Syncの出番です。npmでbrowser-syncをインストールしてそれを起動しましょう。

※別にグローバルに入れる必要はありません。グローバルで入れたらいつでもどこでもコマンドさえ覚えてれば起動できますね。

ゼロからやるならこんな感じで。

npm init

質問に適当にこたえて「package.json」を用意。

npm i browser-sync --save-dev

とりあえずインストール。package.jsonに以下を追加。

{
"scripts": {
"start": "browser-sync start --server --files='./*.html'"
}
}

「npm start」を実行すれば、そこにある「~.html」をターゲットとしてサーバが起動します。グローバルでインストールしていれば別にnpmやgulpを介して実行しなくてよくなります。

browser-sync start --server --files='./*.html'

つまり、どこでも気が向いた時にローカルサーバを立ち上げられる、と言うわけですね。

bs-config.jsを編集

Browser-Syncは、実行時にオプションを渡してサーバの起動やProxyの起動、監視対象のファイルの指定などができますが、「browser-sync init」を実行して「bs-config.js」というファイルを生成して設定を書いておくことができます。

設定ファイルの記述は別に難しいものではなく、どこのディレクトリ(ファイル)を対象にするか、サーバのルートディレクトリをどこにするか、ポートは何番か、通知はどうする?みたいなことを記述するだけです。詳しいことは、最近キレイになったBrowser-Syncのオプションページで。

{
"scripts": {
"postinstall": "browser-sync init",
"start": "browser-sync start --config bs-config.js"
}
}

とか書いておけば、bs-config.jsを読み込んでサーバなり何なりが起動します。

GitHubにあげてるサンプルは、initしてファイルを作成した後に、KDDIウェブコミュニケーションズさんの記事に合わせる感じで、あらかじめ用意しておいた「bs-config.sample.js」をコピーしてます。このサンプルを使うとするなら、

npm install && npm start

だけ打てば、まぁ良きに計らいます。

gulp経由で起動するなら

もちろん、KDDIウェブコミュニケーションズさんの記事のようにgulp経由で起動することもできます。まぁ、だいたいあんな感じで書いておけばいいのですが、起動時のオプション指定は、gulpfile.jsの中に書いておけば大丈夫。

gulp.task('bs', function() {
browserSync.init(null, {
server: {
baseDir: './', // ルートディレクトリ
index: 'index.html'
},
notify: true
});
});

といった感じです。

とまぁ、わざわざグローバルに入れてごにょごにょしなくてもいいですし、起動方法よりはオプションとかの指定方法が大事なのかもしれませんね、なんて思ったので書いておきました。ご参考まで。

Published in articles