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

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

最終更新日:2020.4.9 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のコンパイルと合わせて使うケースが多いようで、実際に制作現場でも使っていますので併用することをオススメします。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram