Let’s Start!!

Gulp de WordPress

in WordBench Tokyo

self-introduction

TickleCode

What’s Gulp?• タスクランナー

The streameing build system

• ビルドツール

• Node.js製

• 設定ファイルを、JavaScriptで記述することができる！(CoffeeScriptでもOK)

• 基本的に非同期で実行

Whatcha gonna do for me?

• Webサーバー/ライブリロード（browser-sync）

• Sass、Compass、CoffeeScript、Jadeなどのコンパイル

• 画像圧縮（gulp-imagemin）

• CSSスプライト生成

• 画像サイズ変換（gulp-image-resize）

• コードの圧縮（gulp-minify-html）

• コード構文チェック Lint

browser-sync

• HTML、PHP、JS、CSSの変更が即座にブラウザに反映される。

• chrome、safari、firefox、タブレット等、一つのブラウザに対する操作を他のブラウザにも同期される。例えば、スクロールとか、フォームに対する入力なども同期される。

set up■node.jsのインストール

１）リポジトリ追加（64bit） rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm

■gulpのインストール

２）yumでインストール yum install nodejs npm --enablerepo=peel

３）npm install -g gulp

CentOS6.5

setting files{ "name": "twentyfourteen", "version": "1.0.0", "dependencies": {}, "devDependencies": { "gulp": "~3.8.7", "gulp-autoprefixer": "0.0.6", 　　　　̶ 省略 ̶ "gulp-minify-css": "~0.3.0", "gulp-rename": "~0.2.2", "gulp-ruby-sass": "~0.3.0", "gulp-compass": "~1.1.8" } }

STEP1：最初にnode.jsの パッケージを管理する package.jsonを作成して npm installを実行。

setting filesSTEP2：gulpfile.jsの作成

・Node.jsのStream APIを使って並列実行されるため、 　Gruntより素早く動作します。（※同期実行も可能）

・ビルド方法を、 　JavaScriptで 　記述していきます。

gulp.task('stylesheets', function() { return gulp.src('assets/stylesheets/*.sass') .pipe(plugins.compass({ sass: 'assets/stylesheets', image: 'assets/images' })) .pipe(plugins.minifyCss({ keepSpecialComments: 1 })) .pipe(gulp.dest('./')) .pipe(plugins.livereload(server)) .pipe(plugins.notify({ message: 'Styles task complete' })); });

bakusoku

WordPressテーマの、 sassコンパイル、minify、自動ロードまでを

Gulpで自動化すると になれるかも！？爆速

ThankYou！

WordCamp Tokyo 2014 アンカンファレンス、来てね♪