browsersyncの導入

browserSyncを利用すると、テーマファイルが更新された時に、自動でブラウザーが更新されるようになります。（今回は、gulp-plumberを導入し、sassのコンパイルに失敗してもwatchが中断されないように設定しています。）

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync');
const plumber = require('gulp-plumber');

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest('./dest/css'))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('browser-sync', function(){
  browserSync({
    proxy: "[vccwのIPアドレスまたはホスト名]"
  });
});

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

gulp.task('default', ['browser-sync'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./**/*.php', ['bs-reload']);
})