JekyllとBrowsersyncを連動させる jekyll-browsersync を試してみる。

jekyll-browsersyncのインストール

Browsersyncをインストール

npm install --save-dev browser-sync

Gemfileを編集

# Gemfile
group :jekyll_plugins do
  gem 'jekyll-browsersync'
end

Gemをインストール

bundle

各ファイルを編集

# _config.yml
exclude:
  - package-lock.json
  - node_modules

# .gitignore
node_modules

jekyll-browsersyncを使う

以下のコマンドでbundle exec jekyll serveしてBrowsersyncに_siteを監視させます。

実行後、http://localhost:4000/でBrowsersyncにコネクトできます。

bundle exec jekyll browsersync

jekyll serveやBrowsersyncにオプションを渡せます。

bundle exec jekyll browsersync (serve-option) -- (browsersync-option)

jekyll-browsersync (上記のserve-option)に渡せるオプションの確認

bundle exec jekyll browsersync --help

Browsersyncのオプションはファイルにまとめて、以下のように指定できます。

bundle exec jekyll browsersync -- --config browsersync.js

実際に使ってみると、bundle exec jekyll serve していた時と同じポートが使えますし、特に設定も必要がないので、 テーマのカスタムをする時などBrowsersyncの初期導入には良いのではと思います。

細かなオプションの設定はできませんが、Jekyll version 3.7.0より導入された serve --livereloadでも代替が可能です。