キタジマタカシ 
Gulp はフロントエンドまわりのあれこれを自動化してくれるタスクランナー、ビルドツールです。同じようなツールとして Grunt がありまして、僕はいつも Grunt のほうを使っていたのでこれまでにもいくつか記事を書いています。
どうも最近 Grunt よりも Gulp のほうが軽くて良いぞという声をちらほら聞いていたのでちょっと試してみました。
準備など…
僕はVCCWでローカルの WordPress 環境を作成しており、Gulp を含めたファイルの配置は以下のようになっています。
- /PATH/TO/DIR
- vccw/
- www/
- wordpress/
- wp-content/
- themes
- mytheme
- scss/
- style.scss
- style.css
- gulpfile.js
- mysql/ < gulp でデータベースをエクスポートしたときに自動的に作成される
Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが、VCCW 環境の WordPress データベースのエクスポートには wp-cli も必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。
Gulp のインストール
とりあえず公式サイトに書いてあるとおりインストールしましょう。グローバル領域と、実際に使用するディレクトリにそれぞれインストールが必要なようです。
# グローバルに Gulp をインストール $ npm install --global gulp # 作業ディレクトリに Gulp をインストール $ npm init $ npm install --save-dev gulp gulp-watch gulp-ruby-sass gulp-shell del gulp-combine-media-queries gulp-minify-css
上記のgulp-watch gulp-ruby-sass gulp-shell del gulp-combine-media-queries gulp-minify-cssは自分が使うプラグインのインストールを指定する部分になります。僕は Sass を監視してコンパイル、かつ Media Query の記述を自動的にまとめたいのと、ローカルの WordPress のデータベースをダンプさせたかったので、それらの動作に必要なものを指定しています。
gulp -vとコマンドをうって下記のようにグローバルと現ディレクトリの2つの gulp が表示されればインストール完了です。
$ gulp -v [02:39:28] CLI version 3.8.10 [02:39:28] Local version 3.8.10
gulpfile.js の作成
インストールが完了したら、gulpfile.jsという、Gulp に自動化させたいタスクを記述するファイルを作成します。gulpfile.js は下記のような内容で作成しました。パスの設定をお使いの環境に合わせれば、コピペでいけるのではないかと思います。
// プラグインのロード
var gulp = require( 'gulp' );
var watch = require( 'gulp-watch' );
var sass = require( 'gulp-ruby-sass' );
var cmq = require( 'gulp-combine-media-queries' );
var cssmin = require( 'gulp-minify-css' );
var shell = require( 'gulp-shell' );
// 各ディレクトリパスの設定
var dir = {};
dir.root = '/PATH/TO/DIR';
dir.vagrant = dir.root + '/vccw';
dir.develop = dir.vagrant + '/www/wordpress';
dir.theme = dir.develop + '/wp-content/themes/mytheme';
dir.mysql = dir.root + '/mysql';
// WordPressデータベースの設定
var mysql = {};
mysql.database = 'wordpress';
mysql.user = 'wordpress';
mysql.password = 'wordpress';
// Sass の設定
// Sass で /scss/*.scss のファイルをコンパイル > Media Query の記述をまとる > minify
gulp.task( 'sass', function() {
return sass( dir.theme + '/scss' )
.pipe( cmq() )
.pipe( cssmin() )
.pipe( gulp.dest( dir.theme ) );
} );
// WordPress データベースのエクスポート
gulp.task( 'wp_export', shell.task(
[
'rm -rf ' + dir.mysql,
'mkdir ' + dir.mysql,
'wp db export "' + dir.mysql + '/' + mysql.database + '.sql' + '"'
],
{
cwd : dir.develop
}
) );
// /scss/*.scss を監視し、変更があったら Sass タスクを実行
gulp.task( 'watch', function() {
gulp.watch( dir.theme + '/scss/*.scss', ['sass'] );
} );
gulp.task( 'タスク名', 実行する関数 )のような感じで実行するタスクを記述していきます。実際に実行させるには、Gulp をインストールしたディレクトリ内で下記のコマンドを実行します。
# WordPress データベースをエクスポートする場合 $ gulp wp_export # /scss/*.scss を監視して変更があったら sass タスクを実行 $ gulp watch # この後で監視状態に入り、変更があったら自動的にコンパイルが走ります。 [22:40:38] Using gulpfile /PATH/TO/DIR/gulpfile.js [22:40:38] Starting 'watch'...
パフォーマンス
Grunt も Gulp も、watch 中に Sass のコンパイルが走ると秒数が表示されるのですが、Grunt の場合、同等の内容で平均して1回あたり2sくらいかかっていたのですが、Gulp だと15msくらいと表示されていたので、かなり速くなったみたいです。Grunt の場合は「詰まる」感じがいつもあったのですが、Gulp だとスッといく感じで、体感的にもかなり速く感じました。
