見出し画像

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

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

環境

Mac OS X

①Theme Kitとは?

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


②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のコード公開


ここから先は

848字

¥ 100

この記事が気に入ったらチップで応援してみませんか?