今回は、VCCWとgulpとBrowsersyncでブラウザ同期をおこなう方法を紹介します。

以前紹介した「Node.js #023 – gulpとBrowsersyncでブラウザ同期」の記事を参考にVCCWで構築したWordPressのローカル環境をブラウザ同期します。


VCCW
WordPress_013_20


事前にVCCWでWordPressのローカル環境を構築して、gulpとBrowsersyncをVCCWで作成した任意のプロジェクトのディレクトリにインストールします。
WordPress_015_01


事前準備が完了したら、「gulpfile.js」を作成します。proxyの部分にはVCCWの「site.yml」などで設定したhostnameもしくはIPを記載します。

gulpfile.js



var gulp = require('gulp');
var browserSync = require("browser-sync").create();
var reload = browserSync.reload;

gulp.task("BrowserSyncOn", function () {
browserSync.init({
proxy: "hostnameもしくはIPを記載"
});
gulp.watch("./**/*").on("change", reload);
});

gulp.task('default', ['BrowserSyncOn']);


gulpfile.jsを作成したら、gulpとBrowsersyncをインストールしたプロジェクトのディレクトリでコマンドを実行します。


gulp

WordPress_015_03


VCCWとgulpとBrowsersyncを組み合わせると、プロジェクトディレクトリ内のファイルが更新されるとブラウザが自動でリロードされます。そのため今までのように手動でリロードすることがなくなります。




Q&A