Table of contents

Jekyll-browsersync

Tags: browser-sync , develop , gem-based-plugins , live-reload , npm

Browsersyncを使用してライブリロードを追加するプラグイン

Homepage (github.com) [EN]
Document (rubydoc.info) [EN]
Browsersync (browsersync.io) [EN]

Browsersyncを使用してJekyll開発にライブリロードを追加します。

オプションの設定が不要な場合は、Jekyll version 3.7.0より導入された serve --livereloadで代替が可能です。

インストール

Browsersync (npm) のインストール

npm install --save-dev browser-sync
# or globally with
npm install -g browser-sync

Gemfileを編集

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

Pluginのインストール
```
bundle
```

使い方

インストールするとJekyllのコマンドにbrowsersyncが追加されます。

Usage:

  jekyll browsersync [options]

Options:
        -H, --host [HOST]  Host to bind to
        -P, --port [PORT]  Port to listen on
        -o, --open         Launch your site in a browser
        -e, --cli [PATH]   Path to browsersync CLI
            --config CONFIG_FILE[,CONFIG_FILE2,...]  Custom configuration file
        -d, --destination DESTINATION  The current folder will be generated into DESTINATION
        -s, --source SOURCE  Custom source directory
            --future       Publishes posts with a future date
            --limit_posts MAX_POSTS  Limits the number of posts to parse and publish
        -w, --[no-]watch   Watch for changes and rebuild
        -b, --baseurl URL  Serve the website from the given base URL
            --force_polling  Force watch to use polling
            --lsi          Use LSI for improved related posts
        -D, --drafts       Render posts in the _drafts folder
            --unpublished  Render posts that were marked as unpublished
            --disable-disk-cache  Disable caching to disk in non-safe mode
        -q, --quiet        Silence output.
        -V, --verbose      Print verbose output.
        -I, --incremental  Enable incremental rebuild.
            --strict_front_matter  Fail if errors are present in front matter
        -s, --source [DIR]  Source directory (defaults to ./)
        -d, --destination [DIR]  Destination directory (defaults to ./_site)
            --safe         Safe mode (defaults to false)
        -p, --plugins PLUGINS_DIR1[,PLUGINS_DIR2[,...]]  Plugins directory (defaults to ./_plugins)
            --layouts DIR  Layouts directory (defaults to ./_layouts)
            --profile      Generate a Liquid rendering profile
        -h, --help         Show this message
        -v, --version      Print the name and version
        -t, --trace        Show the full backtrace when an error occurs

[options]のあとに -- をつけてBrowsersyncのオプション ¹ を渡すことができます。

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

ブラウザでhttp://localhost:4000にアクセスすると確認できます。

Tip

URLの生成にabolute_urlフィルタを使用しているテーマではうまく動作しない。

Browsersync options(browsersync.io) ↩

ブログ記事

下記に掲載を希望される方はご連絡ください (詳細)

jekyll-browsersyncを試す (otti.xyz) Jul 23 2020