gulp wordpress @grand-frontend-osaka 2015 summer
TRANSCRIPT
![Page 1: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/1.jpg)
Gulp WordPressWordPress のテーマ開発に Gulp を導入
Grand-Frontend-Osaka 2015 Summer
![Page 2: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/2.jpg)
KiteFacebook: kite.koga
Twitter: @ixkaito
GitHub: @ixkaito
Designer
Programmer
CEO & funder of KITERETZ inc.
Wocker developer
![Page 4: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/4.jpg)
![Page 5: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/5.jpg)
WordPress 4 バージョン連続
コアコントリビューターは日本初
![Page 6: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/6.jpg)
![Page 7: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/7.jpg)
WordPress と Ruby on Rails 両
方のコントリビューターは世界初!※オレ調べ
![Page 8: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/8.jpg)
WordPress のテーマ開発に
Gulp を導入したい
![Page 9: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/9.jpg)
やりたい
ことSass、Compass のコンパイル
JavaScript の minify
Browserify
画像の圧縮
ブラウザのリロード
![Page 10: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/10.jpg)
環境を一から構築するの
面倒くさい…
![Page 11: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/11.jpg)
安心してください
![Page 12: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/12.jpg)
ありますよ
![Page 13: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/13.jpg)
Blank WordPress Theme for Gulp
https://github.com/ixkaito/bathe
![Page 14: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/14.jpg)
Features Gulp
Sass
Compass
Bourbon
Neat
Bitters
Imagemin
Browserify
Watchify
UglifyJS
Browser-Sync
![Page 15: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/15.jpg)
Get Started!
![Page 17: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/17.jpg)
2. Gulp をグローバルにインストール
$ npm install --global gulp
![Page 18: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/18.jpg)
3. Sass / Compass をインストール
$ gem install compass
![Page 19: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/19.jpg)
4. bathe をダウンロード
$ git clone https://github.com/ixkaito/bathe.git && cd bathe
or
https://github.com/ixkaito/bathe/archive/master.zip
![Page 20: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/20.jpg)
5. Node module をインストール
$ npm install
![Page 21: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/21.jpg)
6. `siteurl` の編集
gulpconfig.json 内の `siteurl` を
ご自身の環境にあわせて編集します。
(デフォルト: wocker.dev)
![Page 22: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/22.jpg)
7. Gulp を実行
$ gulp
![Page 23: Gulp WordPress @Grand-Frontend-Osaka 2015 Summer](https://reader033.vdocuments.net/reader033/viewer/2022051122/5877597d1a28ab4e4f8b4ff3/html5/thumbnails/23.jpg)
あとは実際に見てみよう