Shopify theme kitとBrowserSyncで、ショップテーマの開発環境を快適にする

ShopifyではLiquidというテンプレート言語を使ってECサイトのテーマ(フロントエンド)開発・カスタマイズを行う。
Shopifyの管理画面上でLiquidを直接編集する事もできるが、ローカルPC環境でファイル更新し、git管理などを実現するためのツールが、Shopify theme kitである。
※ GoogleAppScriptでいう、claspのようなもの

theme kitはShopify環境上とローカル環境のテーマファイルを同期でき、適切なgit管理を実現できるものであり、それだけで導入価値が高い。
ただ、以下の機能を利用する事で、開発時のトライ&エラーサイクルを早め、開発速度向上にもつながる

• watchコマンドによる、逐次修正
• BrowserSyncによるAutoReload

Shopify theme kitのインストール

Shopify theme kitのインストールについては、公式記事が充実している。
以下リンク参照のこと

theme kit公式
Shopify日本語ブログ

watchコマンドについて

theme kitはwatch機能が存在する。
https://shopify.github.io/themekit/commands/#watch

watchコマンドは、ローカル上で何らかのファイルを修正したら、ファイル修正を検知して逐次Shopify環境へアップロードしてくれる機能である。

都度Deployする必要がなくなるため、ローカルで開発する際にはMustで利用すべき機能である。

BrowserSyncによるAutoReload

本稿のメインはこちらである。
前述のwatchコマンドでは、--notifyオプションで指定したファイルに変更通知する事ができる。この機能を使うことで、AutoReloadを実現する事が可能である。
以下、BrowserSyncを使ったAutoReloadの実現方法について記す。

BrowserSyncのインストール

以下のコマンドで、ひとまずグローバルインストールしておく
npm install -g browser-sync

bs-config.jsの修正

watchコマンドとBrowserSyncを併用する場合、デフォルトでは各ツールが埋め込むタグが干渉しあう。
結果、以下のようにECサイト画面の上部に不要なタグが表示されてしまう。

これを解消するために、以下の手順でbs-config.jsを修正する

1. bs-config.jsの生成

以下のコマンドにて、bs-config.jsを生成する
browser-sync init

2. bs-config.jsの修正

以下のコードを、bs-config.jsに追加する。

node.js

module.exports = {
    // ここから
    snippetOptions: {
      rule: {
        match: /<\/body>/i,
        fn: function (snippet, match) {
          return snippet + match;
        },
      },
    },
   // ここまで
}

BrowserSyncとwatchコマンドの起動

あとは、以下のコマンドでBrowserSyncと、watchをそれぞれ起動する

# BroserSync起動
browser-sync start --proxy "https://〇〇〇.myshopify.com/" --files "./temp" --reload-delay 1000 --config bs-config.js

# ※ "./temp" に対して、⇓ でwatch書き出し

# watchコマンド起動
theme watch --notify=temp --allow-live 

よきShopifyライフを