dayjournal | WordPress #015 – VCCWとgulpとBrowsersyncでブラウザ同期

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

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

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

事前準備が完了したら、「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

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

参考文献
VCCW Browsersync gulp Vagrant + VCCW の環境でBrowserSyncを使いWordPressのCSS開発環境を整える GulpでBrowserSyncと動的ページ(PHPなど)の連携

dayjournal memo

WordPress #015 – VCCWとgulpとBrowsersyncでブラウザ同期

Yasunori Kirimoto 2016/9/2

gulpfile.js