実際に使っている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
この記事が気に入ったらチップで応援してみませんか?