Gulp 4入門チュートリアル：SassとJavaScriptのビルドワークフローを構築する方法

このGulp 4チュートリアルでは、Gulpを開発ワークフローに組み込み、SassとJavaScriptのファイルをコンパイルする手順を、初心者向けにステップバイステップで解説します。

まだGulpを使ったことがない方は、ぜひ一度試してみてください。Gulpを使えば、SassファイルのCSSへのコンパイル、JavaScriptファイルの処理、ファイルの最適化など、さまざまな便利なタスクを自動化できます。

このチュートリアルで扱うGulpのインストールと実行の基本ステップは以下の通りです：

1. コマンドラインで npm install gulp-cli -g を実行し、gulp-cliをグローバルにインストールする
2. npm install gulp を実行してGulp本体をインストールする
3. Gulpワークフローに必要なその他のnpmパッケージをインストールする
4. プロジェクトのルートに gulpfile.js ファイルを作成する
5. gulpfile内でnpmパッケージをモジュールとして読み込む
6. SCSS/JSファイルをコンパイルするタスクと、変更を監視するwatchタスクをgulpfileに追加する
7. gulp コマンドを実行してすべてのタスクを起動する

Gulpとは何か？何ができるのか？

Gulpは、Web開発のワークフローにおいてさまざまなタスクを自動実行してくれるツールです。バンドラーやビルドツール、タスクランナーなどと呼ばれることもあります。類似のツールにはWebpackやGruntがあります（ただしGruntは急速に廃れつつあります）。

このチュートリアルでは、Gulpに以下の処理を担当させます：

1. SassファイルをCSSにコンパイルする
2. CSSにベンダープレフィックスを付与する
3. 最終的なCSSファイルを圧縮（ミニファイ）する
4. 複数のJSファイルを1つに結合（連結）する
5. 最終的なJSファイルを難読化・圧縮（Uglify）する
6. 完成したCSS/JSファイルを /dist フォルダに出力する

かなり便利そうですよね？

Gulpの仕組みはシンプルです。すべての設定とタスクは gulpfile.js ファイルに記述し、コマンドラインからGulpを実行します。

嬉しいポイントは、gulpfileを一度整えてしまえば、他のプロジェクトでも簡単に使い回せること。作業時間を大幅に節約できる強力な味方になります。

それでは、パソコンにGulpをインストールしてセットアップしていきましょう。

Gulp 4のインストール方法

Gulpを実行する前に、以下のものが必要です：

• Node.js — まだインストールしていない場合は、公式サイトからインストールしてください
• Gulpコマンドラインユーティリティ — npm install --global gulp-cli を実行してインストールします

Gulpが動くようになったら、私が作成したGulp使用のデモプロジェクトもチェックしてみてください。

これはフロントエンドのボイラープレート（ひな形）プロジェクトで、シンプルなフロントエンドサイトを素早く立ち上げるためのスターターキットとして設計しています。

（このチュートリアル自体にもコードスニペットを多数掲載しているので、そちらだけ参照しても問題ありません！）

フロントエンドボイラープレートプロジェクトのセットアップ手順：

• プロジェクトのGitリポジトリをクローンまたはダウンロードして、自分のPCに配置する
• プロジェクトを開き、ルートフォルダでコマンドラインから npm install を実行する。これにより package.json ファイルに記載されたnpmパッケージ（特にGulp 4）がインストールされます

これでプロジェクトファイルの準備が整い、Gulpタスクの実行に必要なnpmパッケージもすべて揃いました。

リポジトリのファイルはすぐに使える状態になっているので、コマンドラインで gulp と入力すると、次のような出力が表示されるはずです：

> gulp
[22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js
[22:29:48] Starting 'default'...
[22:29:48] Starting 'scssTask'...
[22:29:48] Starting 'cacheBustTask'...
[22:29:48] Finished 'cacheBustTask' after 39 ms
[22:29:48] Starting 'jsTask'...
[22:29:48] Finished 'jsTask' after 340 ms
[22:29:48] Finished 'scssTask' after 347 ms
[22:29:48] Starting 'watchTask'...

これでGulpの実行に成功しました！

gulpコマンド実行時にプロジェクト内で何が起きているのか？

プロジェクトが正常に動作することを確認できましたね。ここからは、プロジェクトの中身とその仕組みについて詳しく見ていきます。

まず、プロジェクトのファイル構成を簡単におさらいしておきましょう：

• index.html — メインとなるHTMLファイル
• package.json — npm install 実行時にインストールされるnpmパッケージの一覧
• gulpfile.js — 設定を記述し、すべてのGulpタスクを実行するファイル
• /app — 作業用フォルダ。SCSS/JSファイルはここで編集します
• /dist — Gulpが出力ファイルを書き出すフォルダ。中身は直接編集しません

実際のワークフローでは、HTML・SCSS・JSファイルを編集すると、Gulpが変更を検知して自動的にコンパイルを行います。そして最終的なCSS/JSファイルを /dist フォルダから index.html 内で読み込む流れになります。

Gulpが動くようになったところで、次はGulpの仕組みをもう少し詳しく掘り下げてみましょう。

gulpfile.jsの中身を徹底解説

ここからは、gulpfileの各セクションがそれぞれ何をしているのか、詳しく解説していきます。

ステップ1：npmモジュールを読み込む

gulpfile.js の先頭部分では、require() 関数を使って、事前にインストールしたnpmパッケージ群を定数として読み込んでいます。

各パッケージの役割は以下の通りです。

Gulp本体のパッケージ：

• gulp — gulpfile.js内のすべてを動かす中核パッケージ。src、dest、watch など、実際に使う関数だけを個別にエクスポートしています。こうすることで gulp.src() ではなく src() のように、プレフィックスなしで直接関数を呼び出せます

CSS関連のパッケージ：

• gulp-sourcemaps — ブラウザの開発者ツール上で、CSSスタイルを元のSCSSファイルにマッピングする
• gulp-sass — SCSSをCSSにコンパイルする
• gulp-postcss — autoprefixerとcssnanoを実行する（後述）
• autoprefixer — CSSにベンダープレフィックスを自動付与する
• cssnano — CSSを圧縮（ミニファイ）する

JS関連のパッケージ：

• gulp-concat — 複数のJSファイルを1つに結合する
• gulp-uglify — JSを圧縮・難読化する

さらに、index.html内のCSS/JSファイル参照に対して文字列置換を行い、キャッシュバスティング（キャッシュ無効化）を実現しています。これにより、ファイルを更新した際に、サイトが必ず最新版のファイルを読み込むようになります。

文字列置換のパッケージ：

• gulp-replace — CSS/JSの参照URLに文字列パラメータを追加し、キャッシュバスティングを実現する

必要なモジュールが揃ったところで、早速使っていきましょう！

ステップ2：モジュールを使ってGulpタスクを作成する

Gulpにおける「タスク」とは、特定の目的を持った関数のことです。

ここでは、SCSSとJSファイルをコンパイルするユーティリティタスクと、それらのファイルの変更を監視するタスクをいくつか作成します。そして、コマンドラインで gulp と入力したときに、これらのユーティリティタスクがデフォルトタスク経由で実行される仕組みを作ります。

ファイルパス用の定数を作成する

タスクを書く前に、まずファイルパスを定数として保存する数行のコードを用意します。これは必須ではありませんが、パス変数を使っておけば毎回手打ちする必要がなくなり便利です。

このコードでは scssPath と jsPath という定数を作成し、Gulpにファイルの場所を教えるために使います。

Sassタスク

Sassタスクのコードはこちらです：

function scssTask(){    
    return src(files.scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('dist')
    );
}

scssTask() という名前のこのSassタスクでは、複数の処理を行っています。Gulpでは、最初の関数の後に pipe() 関数を続けることで、複数の関数をチェーン（連結）できます。

まず src() でSCSSファイルのソースディレクトリを読み込みます。ここでは先ほど作成した定数 files.scssPath を使用しています。

その後、src() に続けて残りの処理をパイプでつないでいきます。イメージとしては、既存のパイプにどんどん新しいパイプのセクションを継ぎ足していく感じです。

実行している関数は以下の通りです：

• sourcemaps.init() — ソースマップは src() の直後に最初に追加する必要がある
• sass() — すべてのSCSSファイルを1つのCSSファイルにコンパイルする
• postcss() — さらに2つのプラグインを実行する：
  • autoprefixer() — CSSにベンダープレフィックスを付与する
  • cssnano() — CSSファイルを圧縮する
• sourcemaps.write() — 同じディレクトリにソースマップファイルを出力する
• dest() — 最終的なCSSファイルとソースマップファイルを /dist フォルダに出力するようGulpに指示する

JSタスク

JSファイルをコンパイルするタスクのコードはこちらです：

function jsTask(){
    return src([files.jsPath])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('dist')
    );
}

jsTask() という名前のこのJavaScriptタスクでも、複数の関数を実行しています：

• src() — files.jsPath からJSファイルを読み込む
• concat() — すべてのJSファイルを1つのJSファイルに結合する
• uglify() — JSファイルを圧縮・難読化する
• dest() — 最終的なJSファイルを /dist フォルダに出力する

キャッシュバストタスク

キャッシュバストタスクのコードはこちらです：

var cbString = new Date().getTime();
function cacheBustTask(){
    return src(['index.html'])
        .pipe(replace(/cb=\d+/, 'cb=' + cbString))
        .pipe(dest('.'));
}

index.htmlファイルでは、CSSとJSファイルを次のように参照しています：

<link rel="stylesheet" href="dist/style.css?cb=123">

<script src="dist/all.js?cb=123"></script>

キャッシュバスティングが有効な理由は、ブラウザやWebホストのサーバーが、CSSやJSといったアセットファイルのコピーをキャッシュ（保存）することが多いからです。同じページを再度読み込む際、サーバーから再ダウンロードするよりも、ローカルにキャッシュされたコピーを読み込む方が高速になります。

しかし問題なのは、古い保存済みバージョンを読み込んでほしくない場合があることです。CSSやJSファイルに変更を加えてサーバーに再デプロイした際には、ユーザーに強制的にファイルを再ダウンロードさせたいはずです。

強制的に再ダウンロードさせる方法のひとつが、ファイル参照の末尾に ?cb=123 のようなクエリ文字列を追加することです。ブラウザがページを再読み込みした際、クエリ文字列が前回と異なっていれば、ファイルを更新して読み直してくれます。

ここではGulpの replace() 関数を使って、「cb=」＋任意の数字という文字列を検索し、その数字を「1970年からの経過ミリ秒」に基づいて生成された新しい数値に置き換えています。

こうすることで、Gulpが実行されるたびにクエリ文字列が変わり、ユーザーのブラウザに確実に新しいCSS/JSファイルが読み込まれるようになります。

Gulpのwatchタスク

Gulpの watch() 関数は非常に便利な機能です。実行すると常駐し、ファイルの変更を監視し続けます。変更を検知すると、指定した任意のタスクを実行してくれます。

これのおかげで、コードを変更するたびに手動で gulp を実行し直す必要がなくなります。

watchタスクのサンプルコードはこちらです：

function watchTask(){
    watch(
        [files.scssPath, files.jsPath],
        parallel(scssTask, jsTask)
    );
}

watch() 関数は3つの引数を受け取りますが、ここでは2つだけ使っています：

• globs（ファイルパスの文字列）
• オプション（今回は未使用）
• タスク（実行したいタスクの指定）

このwatchタスクでは、scssPath と jsPath ディレクトリ内のファイルを監視し、どちらかに変更があれば scssTask と jsTask を同時に実行するように設定しています。

これでユーティリティタスクの準備が整ったので、次はメインのGulpタスクを設定しましょう。

デフォルトのGulpタスク

これがメインとなるGulpタスクで、コマンドラインで gulp と入力すると自動的に実行されます。

exports.default = series(
    parallel(scssTask, jsTask), 
    watchTask);

gulp コマンドを使用すると、Gulpはgulpfile.js内の default タスクを自動的に探します。そのため、デフォルトタスクをエクスポートしておく必要があります。

このデフォルトタスクは以下の処理を行います：

• parallel() を使って scssTask と jsTask を同時に実行する
• その後 watchTask を実行する

また、すべてのタスクが series() 関数の中に格納されていることにも注目してください。

これはGulp 4におけるタスクの扱い方の大きな変更点のひとつです。Gulp 4では、単一のタスクであっても、すべてのタスクを series() か parallel() のいずれかでラップすることが必須となっています。

Gulp 4での変更点

以前から task() 関数を使ってタスクを登録していた方なら、仕様が変わったことに気づいたかもしれません。

gulp.task() ですべてのタスク関数を包む代わりに、scssTask() や watchTask() のような実際のJavaScript関数を作成する方式になっています。

これはGulp公式のタスク作成ガイドラインに従ったものです。

Gulpチームは task() ではなく exports の使用を推奨しています。

task() 関数は今でも使えますが、各タスクをJavaScript関数として作成し、それをエクスポートする方式の方が現在の推奨スタイルです。可能であれば記法を更新しておくことをおすすめします。将来的に task() が非推奨（deprecate）になる可能性もあるからです。

Gulp 3からの移行で問題が発生したら？

Gulp 3を使っていて、とにかくGulp 4で動くようにしたいという方には朗報です！

主な破壊的変更は、タスクの実行方法に関するものです。

Gulp 4では、タスクを実行するための2つの新しい関数 series() と parallel() が導入されました。これにより、複数のタスクを並行して実行するか、順番に実行するかを選べるようになりました。

以前のGulp 3では、単一の関数や配列形式で複数の関数を単純に列挙するだけでOKでした。しかしGulp 4では、series() か parallel() でラップせずにそうすると、エラーが発生します。

例えばこんなエラーです：

AssertionError [ERR_ASSERTION]: Task function must be specified

このエラーは次のようにすれば簡単に修正できます。

（旧）Gulp 3の記法でのタスク

Gulp 3では、タスクを次のように実行していたかもしれません：

gulp.task('default', ['sass', 'js', 'watch']);
gulp.watch('app/scss/*.scss', ['sass']);

Gulp 4の記法でのタスク

これらのタスクを、次のように series() 関数に入れます：

gulp.task('default', gulp.series('sass', 'js', 'watch'));
gulp.watch('app/scss/*.scss', gulp.series('sass'));

これだけで最小限の修正でタスク関数のエラーを解消できます！🙂

プロジェクトファイルのダウンロード

この記事で紹介したコードはすべて、フロントエンドボイラープレート用のGitHubリポジトリから引用したものです。シンプルなフロントエンドWebサイトプロジェクトのためのクイックスターターキットとして設計しています。

ぜひチェックして、自由にカスタマイズして、自分のプロジェクトで活用してみてください！

GitHubリポジトリはこちらから確認できます。