WordBench東京8月勉強会「制作現場を爆速にする妙技をシェアしあおう！！」で、タスクランナーツールのGulpについてLTをさせていただきました。browser-syncなどについても紹介しています。

1. Gulp de WordPress
Let’s Start!!
in WordBench Tokyo

2. self-introduction
TickleCode

3. What’s Gulp?
• タスクランナー
The streameing build system
• ビルドツール
• Node.js製
• 設定ファイルを、JavaScriptで記述する
ことができる！(CoffeeScriptでもOK)
• 基本的に非同期で実行

4. Whatcha gonna do for me?
• Webサーバー/ライブリロード（browser-sync）
• Sass、Compass、CoffeeScript、Jadeなどのコンパイル
• 画像圧縮（gulp-imagemin）
• CSSスプライト生成
• 画像サイズ変換（gulp-image-resize）
• コードの圧縮（gulp-minify-html）
• コード構文チェック Lint

5. browser-sync
• HTML、PHP、JS、CSSの変更が即座に
ブラウザに反映される。
• chrome、safari、firefox、タブレット等、
一つのブラウザに対する操作を他のブラウザに
も同期される。例えば、スクロールとか、フォー
ムに対する入力なども同期される。

6. set up
■node.jsのインストール
１）リポジトリ追加（64bit）
rpm -ivh http://ftp.riken.jp/Linux/fedora/
epel/6/x86_64/epel-release-6-8.noarch.rpm
２）yumでインストール
yum install nodejs npm --enablerepo=peel
■gulpのインストール
３）npm install -g gulp
CentOS6.5

7. 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を実行。

8. setting files
STEP2：gulpfile.jsの作成
・ビルド方法を、
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' }));
});
・Node.jsのStream APIを使って並列実行されるため、
Gruntより素早く動作します。（※同期実行も可能）

9. bakusoku
WordPressテーマの、
sassコンパイル、minify、自動ロードまでを
Gulpで自動化すると
爆 速 になれるかも！？

10. WordCamp Tokyo 2014
アンカンファレンス、来てね♪
ThankYou！