【Gulp】browser-syncでブラウザリロードを自動化させてみた（所要時間3分）

2024年11月29日

みなさんGulp使ってますか？

Gulpは、Node.jsのパッケージ管理ツールnpmで利用可能なパッケージです。Gulpは、タスクランナーとして開発作業を自動化するためのツールです。特に、フロントエンド開発において、さまざまな処理をスクリプト化して自動で実行できます。

たとえばフロントエンド開発している時に、JSなりCSSなりHTMLなりをエディターで編集するたびにブラウザで再読み込みするとかよくやりますよね。でも再読み込みのたびに Command + R するのは面倒です。

弊社でもよく使用するNext.jsなどのReact系のフレームワークやモダンなJSライブラリならホットリロード機能（
Hot Module Replacement [HMR]）が搭載されているので必要ないかもしれませんが、それ以外のプロジェクトではGulp の browser-sync が使えます。browser-syncはgulpのプラグインで、コードを更新して保存したら勝手に再読み込みしてくれます。browser-sync単独でもインストール可能ですが、今回はgulpの紹介も交えてご紹介します。

Gulpでできること

ざっと以下です。今回はファイルの監視と自動リロードのみの解説です。

タスクできること
ファイルの監視と自動リロードCSS/JSの変更を監視し、自動的に処理
CSSやJavaScriptのコンパイルSASSやLESSなどのCSSプリプロセッサをコンパイル。
TypeScriptやBabelを使ってJavaScriptをトランスパイル。
ファイルの圧縮CSSやJavaScriptを圧縮
ファイルの統合複数のCSS/JSファイルを自動で1つのファイルに統合
画像の最適化画像ファイル（.jpg / .png / .gif / .svg）を圧縮してファイルサイズを削減
開発用サーバーの起動開発中のサイトをブラウザで確認
キャッシュバスティングキャッシュの影響を防ぐために、ファイル名にバージョン番号やハッシュを付加。
ファイルのコピー・移動必要なファイルを指定のディレクトリに複製または移動。
タスクの連続実行や並列実行複数タスクの順番実行や同時実行

package.json

まずはNode.js、npmを使えるようにしておいてください。手元では以下のバージョンです。

% node -v
v20.16.0
% npm -v
10.8.1

gulpをインストールします。

#グローバル
npm install gulp -g
#ローカル
npm install gulp --save-dev

Gulpはグローバルインストール（デバイス全体）とローカルインストール（プロジェクトのみ）があります。グローバルは非推奨らしいのでローカルインストールにしときましょう。

次にプロジェクトのディレクトリのpackage.jsonを作成して以下のようにしてください。package.jsonがある場合は、追記しましょう。

{
  "devDependencies": {
    "browser-sync": "^3.0.3",
    "gulp": "^4.0.2"
  }
}

依存関係をインストールします。

npm install

gulpfile.js

次にpackage.jsonと同じ階層で gulpfile.js という名前でファイルを作成してください。これはGulpのタスクを定義するファイルです。

// gulpの読み込み
const gulp = require('gulp');
// browser-syncの読み込み
const browserSync = require('browser-sync');

//監視対象
const srcPath = {
  css: './public/static/css/*.css',
  js: './public/static/js/*.js',
};

const browserSyncFunc = () => {
  browserSync.init(browserSyncOption);
};

// browser-syncのオプション
const browserSyncOption = {
    proxy: 'localhost',
    notify: false,
    port: 3000,
    watchOptions: {
      debounceDelay: 1000,
    },
    reloadOnRestart: true,
    middleware: function (req, res, next) {
        // Browser-Sync 用にリダイレクトループを防止
        req.headers['x-forwarded-proto'] = 'http';
        next();
    }
};

const browserSyncReload = (done) => {
  browserSync.reload();
  done();
};

const watchFiles = () => {
  gulp.watch(srcPath.css, gulp.series(browserSyncReload));
  gulp.watch(srcPath.php, gulp.series(browserSyncReload));
};

// seriesで順番に実行
exports.default = gulp.series(
  gulp.parallel(watchFiles, browserSyncFunc)
);

手元だと、Dockerを使用しているのでDockerコンテナにはlocalhost:80でアクセスできる状態になっていて、これを localhost:3000でlistenしてプロキシの設定をしています。

設定はこれだけです。

動かしてみよう

プロジェクトのディレクトリで以下のコマンドを実行。

gulp

するとgulpがブラウザを起動・新しいタブを作成してプロジェクトの内容が表示されます。ためしに監視対象のファイルを変更してブラウザが更新されることを確認してみてください。

最後に

Gulpを使ったブラウザの再読み込み自動化をご紹介しました。ふだん開発作業で何度も繰り返すタスクはこうしたタスクランナーを使うと便利です。ちょっとの手間で自動化できることは積極的に採用すると捗ります。よかったら別のオプションにもチャレンジしてみてください。

参考サイト

gulp.js 公式サイト クイックスタート – https://gulpjs.com/docs/en/getting-started/quick-start