Shopify CLI環境で心地よい開発体験を求めて

Shopify CLIとは

オンライン ストア 2.0テーマで新しく導入された機能。
わかりやすいものでいえば「Down」なんかがそれにあたりますね。

開発環境をローカルで用意して、ホットリロードしてくれたりと普段GulpやWebpackで開発しているフロントエンドよりの人でなら恩恵を感じられるはずです。

導入方法は、ドキュメントを参照

余談ですが、最近Shpify CLI 3もリリースされたので引き続き情報収集していく必要がありますね；；

好きなパッケージをインストール

Tailwindなど使いたい場合はインストールしてみましょう。
（個人的にはDown Themeからオリジナルテーマにする際Tailwindで調整するのが快適だったのでお勧めです。）

◆例

npm install -D eslint eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-plugin-tailwind eslint-plugin-unused-imports npm-run-all prettier prettier-plugin-tailwindcss stylelint stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-prettier stylelint-scss tailwindcss --legacy-peer-deps

◆tailwindのみインストールしたい場合

npm install -D tailwindcss
npx tailwindcss init

Tailwindの設定ファイルカスタマイズしよう

@ver3系からjitモードではなくcontent[]で設定できるようになりました。
Downで開発する場合プレフィックスをつけてください。
既存のgridなどのclassNameとバッティングする可能性があります。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.liquid", "./**/*.liquid"],
  prefix: "tw-",
  theme: {
    extend: {},
    screens: {
      sm: "640px",
      md: "750px",
      lg: "990px",
      xl: "1280px",
    },
    fontFamily: {
      notosans: ["Noto Sans JP"],
    },
  },
  plugins: [],
};

自分はpackage.jsonでnpmコマンドを使用したいタイプなので、以下のようにしております。

※並列処理をするためにnpm-run-allを使用しております！
コピペしてもエラーが起きるので、まずはパッケージのインストールをしてください！
https://www.npmjs.com/package/npm-run-all

package.json

     "scripts": {
        "login": "shopify login",
        "pull": "shopify theme pull",
        "dev:css": "tailwindcss -i ./src/css/app.css -o ./assets/tailwind.css",
        "build:css": "tailwindcss -i ./src/css/app.css -o ./assets/tailwind.css --minify",
        "build": "run-s build:css build:shopify",
        "build:shopify": "shopify theme push",
        "watch:css": "tailwindcss -i ./src/css/app.css -o ./assets/tailwind.css --watch",
        "serve:shopify": "shopify theme serve",
        "serve": "run-p serve:shopify watch:css",
        "eslint:fix": "eslint src --ext .js,jsx,.ts,.tsx --fix",
        "stylelint:fix": "stylelint src/**/*.{css,scss} --fix",
        "prettier:fix": "prettier --check --write 'src/**/*.{js,jsx,ts,tsx,css,scss,md,mdx,liquid}'",
        "format": "npm run eslint:fix && npm run stylelint:fix && npm run prettier:fix"
      }

.shopifyignore

TailwindやGsapを使用したいときは node_modules をどうしても同じ階層にいれないといけないですよね。
shopify theme pull時に package.json と package-lock.json が消えてしまいます。

そこで.shopifyignoreを作成
以下を追加してあげましょう
これでpull時にファイルが消えることも無くなりました😇

.shopifyignore

.gitignore

package.json
package-lock.json

postcss.config.js
tailwind.config.js

/node_modules
/src

README.md

開発環境でサクサク開発しよう！

開発ストアとshopify CLIを繋げたら
shopify theme serve で開発環境を立ち上げて
あとはホットリロードでサクサク開発することが可能です！