Vagrant + VCCW の環境でBrowserSyncを使いWordPressのCSS開発環境を整える

Vagrant + VCCWの開発環境（WordPressのテーマ・プラグイン開発環境をVagrantを使い簡単に構築する方法）が整っている環境でBrowserSyncを使えるようにする方法を紹介。

各種インストール

Vagrant + VCCWの環境でBrowserSyncを使うために必要なものをインストール。

Node.jsのインストール

Node.jsをインストール。インストールされているかわからない場合は

$ node -v

で確認し、バージョンが表示されればインストール済み。表示されない場合はHomebrewでインストール。

$ sudo brew install node

パスワードを聞かれるのでパソコンのパスワードを入力し、Node.jsのインストール完了。

gulp.jsのインストール

ここから先はプロジェクト用にインストールしていくので、プロジェクトの最上位ディレクトリに移動する。僕の場合はVCCWのフォルダ構造をそのまま使っているので

$ cd ~/vccw

でvccwフォルダに移動。

Node で作られたパッケージモジュールを管理するためのツールnpmを使う。Node.jsをインストールすれば一緒に入っているのでnpmを個別にインストールする必要はない。
タスク自動化のためのビルドツールの「gulp.js」をインストール。

$ sudo npm install --save-dev gulp

「–save-dev」はプロジェクトごとにプラグインをインストールする。「vccw」フォルダに「node_modules」フォルダが作成され、その中にプラグインがインストールされていく。

因みに「–save-dev」ではなく「-g」を使うとどこからでも使えるグローバルな環境にインストールすることができる。

BrowserSync

BrowserSyncのインストール。

$ sudo npm install --save-dev browser-sync

その他プラグインのインストール

sassなどのコンパイルエラーが出た時にgulpが落ちるのを防ぐプラグイン「gulp-plumber」をインストール。

$ sudo npm install --save-dev gulp-plumber

Sassを使うための「gulp-sass」をインストール。

$ sudo npm install --save-dev gulp-sass

作成されたCSSファイルを圧縮する「gulp-cssmin」をインストール。

$ sudo npm install --save-dev gulp-cssmin

ファイル名をリネームするプラグイン「gulp-rename」をインストール。

$ sudo npm install --save-dev gulp-rename

@mediaの記述をまとめてくれる「gulp-combine-media-queries」をインストール。

$ sudo npm install --save-dev gulp-combine-media-queries

gulp-combine-media-queries/index.jsの152目の以下の箇所がエラーになるのでコメントアウト。

// file.contents = new Buffer(cssJson);

gulpfile.jsの作成

「gulpfile.js」は自動で作成されないので自分で作る必要がある。「node_modules」フォルダと同じ階層に作成する（今回の場合だと「vccw」フォルダ内に作成）。

var gulp = require('gulp');
var sass = require('gulp-sass');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');
var cmq = require('gulp-combine-media-queries');

gulp.task('sass', function () {
    gulp.src('/path/to/src/css/*.scss')
        .pipe(sass())
        .pipe(cmq({log: false}))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('/path/to/css'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('browser-sync', function () {
    browserSync({
        proxy: "wordpress.local"
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch("/path/to/src/css/*.scss", ['sass']);


    gulp.watch("/path/to/wordpress/theme/theme_name/*.php", ['bs-reload']);
});

「/path/to/src/css/」はscssが入っているフォルダまでのパス。

「/path/to/css」は作成されたCSSを保存するフォルダまでのパス。

「/path/to/wordpress/theme/theme_name/」はWordPressのテーマファイルまでのパスに変更する。

「proxy: “wordpress.local”」はVCCWで設定したドメインを入力。
BrowserSyncを実行すると独自のサーバが立ち上がるが、こうすることでVCCWで立ち上がっているサーバ経由で実行することができる。

実行

「gulpfile.js」がある場所までターミナルで移動し、VCCWで作成したプロジェクトのサーバを立ち上げる。

$ vagrant up

同じ場所で「gulp」を実行。

$ gulp

自動でブラウザが「http://localhost:3000/」にアクセスしWordPressが表示される。

後は「scss」ファイルやテーマの「php」ファイルを編集し保存したら表示されたブラウザ画面が自動で再読み込みして最新の状態になる。

「gulp」を止めるにはターミナル画面で「control + c」を押すだけ。

おわりに

CSSやPHPファイルが変更されると自動更新されるので、保存する度に「command + tab」でブラウザに移動し、「F5（あるいはcommand + R）」でブラウザの更新、「command + tab」でエディタに戻る、という動作をしなくなりました。

これメッチャ楽！！