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.

of

Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 1 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 2 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 3 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 4 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 5 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 6 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 7 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 8 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 9 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 10 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 11 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 12 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 13 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 14 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 15 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 16 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 17 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 18 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 19 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 20 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 21 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 22 Gulp WordPress @Grand-Frontend-Osaka 2015 Summer Slide 23
Upcoming SlideShare
Word press workflows and gulp
Next
Download to read offline and view in fullscreen.

3 Likes

Share

Download to read offline

Gulp WordPress @Grand-Frontend-Osaka 2015 Summer

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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. あとは実際に見てみよう
  • taizofujita7

    Aug. 24, 2015
  • kazukiakiyama90

    Aug. 24, 2015
  • AtsushiAndo1

    Aug. 24, 2015

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

Views

Total views

2,103

On Slideshare

0

From embeds

0

Number of embeds

164

Actions

Downloads

5

Shares

0

Comments

0

Likes

3

×