Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Gulp 2018.06.14

Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す

Tags: ,,,
最終更新日:Update

前回記事「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']);
});

 

これで、下記のコマンドを実行するとファイルに変更があった場合にブラウザが自動でリロードされます。

 

Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す

 

ちなみに、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はスマートフォンや外部端末のブラウザから直接アクセスすることで、端末上でもブラウザの同期が確認できます。モバイルでの表示確認も同時にできます。

 

Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す

 

UIのアドレスにアクセスするとダッシュボードが表示されますので、詳細はそちらでも確認することができます。

 

Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す

 

 

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のコンパイルと合わせて使うケースが多いようで、実際に制作現場でも使っていますので併用することをオススメします。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?