Gulp WordPressWordPress のテーマ開発に Gulp を導入

Grand-Frontend-Osaka 2015 Summer

KiteFacebook: kite.koga

Twitter: @ixkaito

GitHub: @ixkaito

Designer

Programmer

CEO & funder of KITERETZ inc.

Wocker developer

http://wckr.github.io/

WordPress 4 バージョン連続

コアコントリビューターは日本初

WordPress と Ruby on Rails 両

方のコントリビューターは世界初！※オレ調べ

WordPress のテーマ開発に

Gulp を導入したい

やりたい

ことSass、Compass のコンパイル

JavaScript の minify

Browserify

画像の圧縮

ブラウザのリロード

環境を一から構築するの

面倒くさい…

安心してください

ありますよ

Blank WordPress Theme for Gulp

https://github.com/ixkaito/bathe

Features Gulp

Sass

Compass

Bourbon

Neat

Bitters

Imagemin

Browserify

Watchify

UglifyJS

Browser-Sync

Get Started!

1. Node.js をインストール

https://nodejs.org/

or

$ brew install node

2. Gulp をグローバルにインストール

$ npm install --global gulp

3. Sass / Compass をインストール

$ gem install compass

4. bathe をダウンロード

$ git clone https://github.com/ixkaito/bathe.git && cd bathe

or

https://github.com/ixkaito/bathe/archive/master.zip

5. Node module をインストール

$ npm install

6. `siteurl` の編集

gulpconfig.json 内の `siteurl` を

ご自身の環境にあわせて編集します。

（デフォルト： wocker.dev）

7. Gulp を実行

$ gulp

あとは実際に見てみよう