Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gulp WordPress @Grand-Frontend-Osaka 2015 Summer

1,592 views

Published on

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).

Published in: Engineering
  • Be the first to comment

Gulp WordPress @Grand-Frontend-Osaka 2015 Summer

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

×