みなさん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"
}
}
依存関係をインストールします。
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.js 公式サイト クイックスタート – https://gulpjs.com/docs/en/getting-started/quick-start