WordPress のテーマ開発に Gulp を導入。BrowserSync、Sass / Compassのコンパイル、画像の圧縮、Browserify などのタスクを自動化。bathe (blank WordPress theme for Gulp) を使えば、とても簡単に始めることができます。 How to use Gulp for WordPress theme development. What we need are BrowserSync, compile of Sass and Compass, minify images and JavaScript, Browserify, etc... However, it's very simple to do it if using bathe (a blank WordPress theme for Gulp).

1. Gulp WordPress
WordPress のテーマ開発に Gulp を導入
Grand-Frontend-Osaka 2015 Summer

2. Kite
Facebook: kite.koga
Twitter: @ixkaito
GitHub: @ixkaito
Designer
Programmer
CEO & funder of KITERETZ inc.
Wocker developer

5. WordPress 4 バージョン連続
コアコントリビューターは日本初

7. WordPress と Ruby on Rails 両
方のコントリビューターは世界初！
※オレ調べ

8. WordPress のテーマ開発に
Gulp を導入したい

9. やりたい
こと
Sass、Compass のコンパイル
JavaScript の minify
Browserify
画像の圧縮
ブラウザのリロード

10. 環境を一から構築するの
面倒くさい…

11. 安心してください

12. ありますよ

13. Blank WordPress Theme for Gulp
https://github.com/ixkaito/bathe

14. Features Gulp
Sass
Compass
Bourbon
Neat
Bitters
Imagemin
Browserify
Watchify
UglifyJS
Browser-Sync

15. Get Started!

16. 1. Node.js をインストール
https://nodejs.org/
or
$ brew install node

17. 2. Gulp をグローバルにインストール
$ npm install --global gulp

18. 3. Sass / Compass をインストール
$ gem install compass

19. 4. bathe をダウンロード
$ git clone https://github.com/ixkaito/bathe.git && cd bathe
or
https://github.com/ixkaito/bathe/archive/master.zip

20. 5. Node module をインストール
$ npm install

21. 6. `siteurl` の編集
gulpconfig.json 内の `siteurl` を
ご自身の環境にあわせて編集します。
（デフォルト： wocker.dev）

22. 7. Gulp を実行
$ gulp

23. あとは実際に見てみよう