実際に使っているShopify ローカル環境開発(Theme Kit ＋ Gulp)

Shopifyのテーマ開発をTheme Kitを使用してコーディングしていて、cssをscssに自動コンパイルしたい人向けの記事です。
css → scss にはGulpというタスクランナーを使います。

環境

Mac OS X

①Theme Kitとは？

【Shopify①】ローカルで開発環境を構築する方法と使い方 | 株式会社 エヴォワークス -EVOWORX-

上記の記事を参考にTheme Kitをインストールしました。

②Gulpとは？

Gulpのインストール方法＆使い方を解説する

③Shopify のファイル構造（ローカル）

theme_name/
　├ assets/
　├ config/
　├ layout/
　├ locals/
　├ section/
　├ snippets/
　├ templates/
　├ src/
　│　└ scss/
　│　　　 └style.scss/
　└ gulpfile.js

追加したのはsrcディレクトリ内容＋gulpfile.js

④Gulpの実行

実際にscssのコードを書くのはsrcディレクトリ内のstyle.scssです。
Gulpを実行するにはターミナルで gulp と打つだけ

cd テーマファイル名に移動
$gulp

↑上記コマンドはテーマフォルダのルートに移動してから実行して下さい

⑤Gulpのコード公開