前回記事「Gulpでファイル更新監視とエラー検知・通知でSassのコンパイルを効率化する」に引き続き、Gulpでの効率化を目指す方法をメモ。タイトルの通りですが「Browsersync」というツールを使ってブラウザの自動リロードを実現します。このBrowsersyncはローカルサーバとして起動されるので、PHPファイルの確認などにも使えますね。   前提として、プロジェクトディレクトリにあらかじめpackage.jsonとGulp本体が揃っているものとします。まずは「Browsersync」のモジュールをローカルにインストールしていきます。

$ npm i -D browser-sync

  次にgulpfile.jsにタスクとして登録していきます。このタスクではプロジェクトディレクトリ配下にあるいずれかのファイルに変更があった時にブラウザを自動でリロードさせるアクションになります。プロジェクトディレクトリは適宜環境に合わせてください。またオプションでポート番号も指定できます。 【gulpfile.js】

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

// ブラウザの自動リロード
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: '【PROJECT_DIR_PATH】',
      index: 'index.html'
    },
    port: 3000
  });
});
gulp.task('browser-reload', function () {
  browserSync.reload();
});
gulp.task('default', ['browser-sync'], function () {
  gulp.watch('【PROJECT_DIR_PATH】/*', ['browser-reload']);
});

  これで、下記のコマンドを実行するとファイルに変更があった場合にブラウザが自動でリロードされます。     ちなみに、Browsersyncのタスクを実行するとこのような表示が確認できます。

[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://***.***.**.*:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://***.***.**.*:3001
-------------------------------------
[Browsersync] Serving files from: /Users/USER_NAME/PATH/

  Browsersyncでの自動リロードは上記「Local」で表示されているローカルサーバーへアクセスすることで確認できます。また、複数のブラウザで同期もされますのでクロスブラウザチェックの時も役に立ちます。   「External」のURLはスマートフォンや外部端末のブラウザから直接アクセスすることで、端末上でもブラウザの同期が確認できます。モバイルでの表示確認も同時にできます。     UIのアドレスにアクセスするとダッシュボードが表示されますので、詳細はそちらでも確認することができます。      

Gulpのバージョン4系で推奨されている記述方法について

Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には下記のような形になります。 【gulpfile.js】

const { src, dest, watch, parallel } = require("gulp"),
 browsersync = require('browser-sync').create();

const taskServer = (done) => {
 browsersync.init({
  server: {
   baseDir: 'dist/',
   index: 'index.html'
  },
  port: 2000
 })
 done();
};
const taskReload = (done) => {
 browsersync.reload();
 done();
};

// Wacth
const taskWatch = (done) => {
 watch('dist/**/*', taskReload);
 done();
}

exports.default = parallel(taskServer, taskWatch);

  Browsersyncを使うことでコーディングの効率化がかなり期待できるのではないでしょうか、また前回記事「Gulpでファイル更新監視とエラー検知・通知でSassのコンパイルを効率化する」で紹介したSassのコンパイルと合わせて使うケースが多いようで、実際に制作現場でも使っていますので併用することをオススメします。