実務で使える！初心者からプロまで役立つgulpの基本と応用ガイド

フロントエンド開発をしていると、Sassのコンパイルや画像の最適化のようなちょっと面倒な作業って結構ありますよね。そんなときに便利なのがgulp（ガルプ）です。

みなと

私は、実務で長いことgulpを使ってきましたが、特に静的なページ制作では、効率よく作業を進めるために、なくてはならないツールだと感じています。

この記事では、教科書的な内容ではなく、実際のプロジェクトでの活用例を交えながら、現場で役に立つgulp情報をお届けします！効率よく開発を進めたい方は、ぜひ参考にしてみてくださいね。

gulpとは

まず、「gulpって何？」というところから説明します。gulpは、フロントエンド開発で使われるタスクランナーの一つです。簡単に言うと、面倒な作業を自動化してくれる便利ツールなんです。例えば、Sassのコンパイル、CSSやJavaScriptの圧縮、画像の最適化など、普段の開発作業で「これ手動でやるの面倒だなぁ」と感じる部分を、gulpに任せちゃおう！という感じです。

なぜgulpが便利かというと、これらの作業をコマンド一つでさくっと実行できるからです。プロジェクトが大きくなればなるほど、手動でやると時間がかかる作業も多くなりますよね。そんなとき、gulpがあれば作業効率が一気にアップします。

ちなみに、gulpはJavaScriptをベースにしていて、Node.jsの環境で動きます。「Node.jsとかJavaScriptとかちょっと難しそう…」と思うかもしれませんが、gulpを使うために難しい知識は必要ありません。基本的な設定さえ覚えれば、あとは簡単に自分の開発環境をカスタマイズしていけます。

gulpは時代遅れ？

最近、「gulpはもう古い」とか「オワコン」なんて声もよく聞きます。確かに、フロントエンド開発のツールやワークフローは日々進化しています。gulp自体は2013年に登場したもので、もう10年以上経ちます。でも、だからといってgulpが全然使えなくなったわけではありません。

例えば、LP（ランディングページ）やコーポレートサイトなど、静的ページが中心のコーディングでは、まだまだgulpが活躍する場面は多いです。特に、シンプルなタスクの自動化に向いているので、効率化のために知っておいて損はないかなと感じます。もちろん、WebアプリやECサイトのようにもっと複雑なプロジェクトだと、gulp以外のツールが合うこともあります。結局、環境やプロジェクト次第というところですね。

大事なのは、自分の環境に合ったツールを選ぶこと。ツールは目的じゃなくて手段なので、効率化に役立つかどうかがポイントです。SassやPugのようなコンパイル前のファイルというのは、公開するわけではないので、自分の作業がラクになればそれでOK。自分にとって便利なら使うというのが正解かと思います。

gulpでできること

では、gulpでどんな作業が自動化できるのかを見てみましょう。gulpは、自分に必要なプラグインを入れて使うスタイルで、便利なプラグインがたくさんあります。「これ、手作業だとちょっと面倒だな」という部分を自動化できるのが特徴です。ここからは、gulpで自動化できる代表的な例をいくつか紹介していきます。

みなと

私自身が現場でどのタスクを使っているのか、その理由も交えながら、実際の仕事でどう役立てているかをお伝えしていきます！

例1：Sassのコンパイル

Sassのコンパイルは、手動だと面倒ですが、gulpを使えば自動的にコンパイルできて便利です。ファイルを保存するたびに、SassがCSSに変換され、指定のフォルダに出力されるので、開発のスピードもアップ。しかも、複数のSassファイルを一度に処理できるので、大規模なプロジェクトでも効率よくスタイルを管理できます。

みなと

これは私もいつも使っている定番のプラグイン。多くの開発者にとっても、最もよく使われているタスクの一つだと思います。

Sassについてもっと詳しく知りたい方は、以下の記事も参考にしてみてくださいね。

あわせて読みたい

現場で使えるSassの8つの機能と導入ガイド！基本から実践まで

例2：CSSやJavaScriptの圧縮

CSSやJavaScriptのコードから余分なスペースやコメントを削除して、ファイルサイズを小さくします。特にJavaScriptでは、変数名を短くしたり、使われていないコードを削除することもあります。これで読み込みが速くなり、モバイルや遅い回線でも効果を発揮します。

みなと

ただ、私は最近ほとんど使わなくなりました…。圧縮しても、表示速度が速くなったと感じたことがあまりないんですよね。それより、圧縮したことで、更新作業がスムーズにいかなくなることがあります。特に、他社が修正するときに、開発用のファイルが古くなってたり、圧縮ツールのバージョンが違って同じ結果にならなかったりすると、けっこう面倒です。

一人でやってる方やチーム内で完結する場合は、メンテナンスの問題が少ないので、積極的に使ってみるといいと思います。特に、初心者の方は圧縮を試して効果を自分で確認することで、より理解が深まるかもしれません。

スワン

表示速度を上げるには、圧縮だけに頼らないのが大事。普段から効率的なコードを書くことや、リソースの読み込みを工夫するほうが効果的なことも多いです。圧縮はあくまで手段の一つとして、使うかどうかを検討してみるといいかもしれません。

例3：画像の最適化

画像のファイルサイズを小さくして、ページの表示を軽くするのが画像の最適化です。JPEGやPNG、GIFなどのファイルを圧縮することで、読み込みが速くなり、SEOやユーザー体験にも良い影響を与えます。

スワン

画像はファイルサイズが大きいので、ページの読み込み速度に非常に大きな影響を与えます。特に、最近はモバイルデバイスでサイトを見るユーザーが増えているので、画像を軽くすることがますます重要になっています。

gulpを使えば、手動で圧縮する手間を省いて、自動的に画像の最適化ができるので、作業効率がぐっと上がります。

みなと

これも以前はよく使っていたんですが、最近はほとんど使っていません。その理由は以下で詳しく説明しますが、開発プロセスに合わなくなってきたからです。

デザインを重視するWebページ作成において、画質を保ちながらギリギリまで画像を軽量化することがとても重要です。そのため、私は極力目視で確認しながら圧縮したいと考えています。最近はWebPで書き出すことが多いですが、画像の種類によっては、JPEGやPNGのほうが軽量化できる場合もあります。また、書き出しの際、画像によって適切な画質レベルが異なるため、それぞれの最適化を個別に判断したいときもあります。もちろん、手動で圧縮するのは手間がかかりますが、プロジェクトによってはそのひと手間が品質を保つために大事かと思います。

あとは、運用の案件や既存の改修では、数点の画像を差し替えるために毎回gulpを動かすのが面倒に感じてきた、というのも理由の一つです。

ただ、gulpでの画像最適化はあくまで私に合わなかっただけなので、便利だと感じたら導入してみてください。画像をよく更新するサイトや、スピード重視の環境では、自動化は特に便利かと思います。あと、画像が補助的な役割を果たすような、画質にそこまでシビアにならなくていいサイトなどでも、積極的な活用を検討してみてください！

例4：複数ファイルの結合

複数のCSSやJavaScriptファイルを一つにまとめて、パフォーマンスを改善します。

ファイルが多いと、それぞれを読み込むためにブラウザがサーバーにリクエストを送る回数が増え、ページの読み込みが遅くなることがあります。gulpを使えば、これらのファイルを簡単に結合してリクエストを減らし、読み込みを速くすることができます。

みなと

私自身は、JavaScriptの結合は使わなくなりましたが、CSSの結合は今でもときどき使います。

私がよく使うのは、新しく組んだSassをコンパイルしてCSSを出力し、それを既存のCSSに結合したいときですね。ちょっとした修正なら、わざわざgulpの結合を使わずに、既存のCSSにそのまま手を加えることが多いですが、ある程度ボリュームのあるCSSを組む際はSassのほうが効率的なので、その結果をgulpで結合する感じです。

例5：CSSの整形

CSSプロパティを設定したルールに従って並び替えたり、インデントの調整、不要な空白や改行の削除などをしてくれます。コードがきれいに整形されると、チームでの開発や、後でメンテナンスするときもスムーズに進みます。コードの一貫性を保つのに便利です。

みなと

CSSの整形はいつも使っています。Sassをコンパイルした後に、gulpで自動的にCSSの整形が行われるように設定しているので、ほとんど意識せずに整形が完了している感じです。入れて損はない便利なツールだと思います。

実際に私が使っているプラグインを、簡単に紹介しますね。

例6：エラーチェック

エラーチェックは、コードのミスや文法エラーを自動で見つけてくれる機能です。CSSやJavaScript、HTMLにエラーがあると、ページが正しく表示されなかったり、思った通りに動かなかったりすることもありますが、エラーチェックを使うと、それを未然に防げます。gulpを使ってエラーチェックを自動化することで、コードのクオリティを保ちながら効率的に開発を進められるのがメリットです。

みなと

私自身は、はじめのうちはエラーチェックを入れてましたが、使わなくなりました。理由は次でお話ししますね。

CSSに関しては、Sassのコンパイル時に文法エラーがあればすぐにアラートが出て、そこで直しています。また、プロパティの重複やパフォーマンスの問題は普段から意識しているので、今のところStylelintなどのエラーチェックを必要と感じていないのが理由です。

JavaScriptに関しては、ブラウザのエラーコンソールで確認することが多く、シンタックスエラーやバグはそこで十分対応できます。ESLintも便利ですが、すべてをカバーできるわけではないので、やっぱり普段のコーディング意識が大事かなと感じています。

HTMLに関しては、Pugで書いているため、Pugのコンパイル時に文法エラーが出ますし、最終的にはW3CのNu Html Checkerを使ってチェックしています。それで十分かなと思うことが多いです。

とはいえ、今後もエラーチェックを入れないと決めているわけではないので、必要に応じてまた導入を検討しようと思います。

まだ使ったことがない方は、一度試してみることをオススメします。特に初心者の方にとっては、エラーが発生したときに原因を特定するのが難しいことがあるかと思います。エラーチェックの機能を使うことで、そういったエラーを見逃さずに早めにキャッチできるので、最初は手間に感じるかもしれませんが、使ってみることで開発がラクになるかもしれません。

例7：ファイルの監視

ファイルの監視機能を使うと、いろんな作業を自動化できて、作業効率がぐっと上がります。監視自体はただファイルの変更を検知するだけなので、それだけでは意味がありません。他の処理と組み合わせて初めて役に立つ機能ですね。gulpでは、この監視機能を「watch」というメソッドで実行し、プラグインなしで最初から使えます。

はじめに一度コマンドを実行して監視モードにする必要がありますが、その後はファイルが変更されるたびに自動で処理が行われます。SassのコンパイルやJavaScriptの変換など、いちいち手動でコマンドを打たなくて済むので、作業がスムーズになりますよ。

では、どんな作業が自動化できるのか、具体例をいくつか紹介します。これまで紹介した例（Sassのコンパイルや画像の最適化など）も含まれていますが、ここでまとめて振り返ってみましょう。

みなと

ファイルの監視は、私ももちろん普段から使っています。

gulpユーザーであれば、この機能を使わない人はいないぐらい基本的な機能になります。ファイルが変更されるたびに自動で処理してくれるので、作業がどんどん効率的に進むのでとても便利ですよ。

例8：ローカルサーバーの起動

ローカルサーバーの起動は、自分のPC内で簡易的なサーバーを立ち上げて、ブラウザでサイトを確認できるようにするものです。いちいちサーバーにアップロードしなくても、その場でコーディングした内容をすぐにチェックできるので、開発がサクサク進むようになります。

みなと

私は、こちらの機能も普段から使っています。

Webサイトをコーディングする人にとって、ローカル環境でページを確認できるようにするのは必須かと思います。いちいちテスト環境にアップしながら作業を進めるのは非効率なので、その点でgulpのローカルサーバーはとても便利です。さらに、SSI（Server-Side Includes）に対応させることもできるので、サーバーサイドの機能を使ったページもローカル環境でしっかり確認できます。リアルタイムで変更が反映されるので、開発スピードが上がり、効率的に進められるのが魅力です。

このように、いろんな作業を自動化できます。今回紹介した例は代表的なものなので、ひと通り覚えておくと便利だと思います。

私自身、最初はいろいろな機能を取り入れて開発していましたが、「これ、必要ないな」と感じるものも出てきて、今ではシンプルな開発環境を心がけています。自分に合ったツールや環境を見つけるには、まずは試してみることが大事だと思います。

私が採用・不採用を決めたツールや機能は、あくまで私にとって最適だっただけで、他の人にとっては違うかもしれません。最適な開発環境は人それぞれ違うのが当たり前なので、まずは自分でいろいろ試してみて、自分に合ったものを見つけると良いかと思います！

gulpの基本的な使い方

では、実際にgulpを使ってみましょう！初めての設定は少し戸惑うかもしれませんが、手順に沿って進めていけば大丈夫です。

手順1：gulpのインストール

まずは、gulpを使うための準備から。gulpはNode.jsの環境で動くので、まずNode.jsをインストールしておきましょう。まだインストールされていない方は、Node.jsの公式サイトからダウンロードとインストールを行ってください。

Node.jsのインストールが終わったら、次はgulpをプロジェクトにインストールします。ここでは「npm」というNode.jsに付属しているパッケージ管理ツールを使います。npmを使うことで、必要なパッケージ（ツールやライブラリ）を簡単にインストールできます。

まずは、ターミナル（Macの場合）やコマンドプロンプト（Windowsの場合）を開いて、以下のコマンドを入力します。

npm install --global gulp-cli

このコマンドで、gulpのコマンドラインツールをグローバルにインストールします。次に、プロジェクトフォルダに移動してからgulp本体をインストールします。

スワン

グローバルにインストールするgulpは、どのプロジェクトでも共通して使えるコマンドラインツールの部分です。一方、プロジェクトごとにインストールするgulpは、そのプロジェクト専用のバージョンを管理するためのもの。これで、プロジェクトごとに違うバージョンのgulpを使っていても、他のプロジェクトに影響を与えないようになります。

まずはターミナルやコマンドプロンプトでプロジェクトフォルダに移動しましょう。例えば、プロジェクトフォルダがmy-projectという名前の場合は、以下のコマンドを実行します。

cd my-project

※コマンドの基本操作がよくわからないという方は、「MacターミナルとWindowsコマンドプロンプトのコマンド一覧（Qiita）」の記事が参考になります。

その後、同じくターミナルやコマンドプロンプトで以下を実行してください。

npm install --save-dev gulp

これでプロジェクト専用のgulpがインストールされました！このコマンドを実行すると、以下のようなファイルやフォルダが生成されます。

これらのファイルは、Node.jsやnpmを使うときにおなじみのものです。はじめて見ると少し戸惑うかもしれませんが、今の時点では「そういうものなんだ」と思ってもらえればOKです。詳しく理解しておくと後々役立ちますが、今は動作確認ができていれば十分かと思います。

手順2：gulpfile.jsの作成

gulpの設定はgulpfile.jsというファイルに記述します。このファイルがgulpの「やることリスト」みたいなものです。プロジェクトのルートディレクトリにgulpfile.jsを作成して、以下を記述しましょう。

const gulp = require('gulp');

gulp.task('hello', (done) => {
  console.log('gulpさん、こんにちは！');
  done();
});

まずはこんな感じのシンプルなタスクを作ってみます。これは、「hello」というタスクを定義して、ターミナルやコマンドプロンプトに「gulpさん、こんにちは！」と表示するだけのものです。ここで使っているdone()は、タスクが完了したことをgulpに知らせるためのものです。タスクが終わったことを明示的に伝えることで、gulpが次の処理に進めるようになります。

手順3：タスクの実行

gulpfile.jsにタスクを作成したら、再度ターミナルやコマンドプロンプトで以下のコマンドを実行してみましょう。

gulp hello

これで、ターミナルやコマンドプロンプトに「gulpさん、こんにちは！」と表示されれば成功です。これが、gulpの基本の使い方の第一歩です。

実用的なタスクの設定例

では、もう少し実用的な例に進みましょう。例えば、SassをコンパイルしてCSSを生成するタスクを設定してみます。

まず、Sassを使うためのプラグインをインストールします。これもターミナルやコマンドプロンプトで実行します。

npm install --save-dev gulp-dart-sass

このコマンドを実行すると、package.jsonにgulp-dart-sassが追加されます。実際にファイルを開いて確認してみましょう。

スワン

他の記事では、gulp-sassやnode-sassを使う方法が紹介されていることもありますが、2024年現在、これらは非推奨になっています。内部で使われているLibSassがもうサポートされていないためです。今は、Sassの公式実装であるDart Sassの使用が推奨されています。なので、ここではgulp-dart-sassをインストールしておきましょう！

次に、gulpfile.jsを以下のように編集します。

const gulp = require('gulp');
const sass = require('gulp-dart-sass');

gulp.task('sass', (done) => {
  gulp.src('src/scss/**/*.scss') // Sassファイルの場所
    .pipe(sass().on('error', sass.logError)) // Sassのコンパイル
    .pipe(gulp.dest('dist/css')); // コンパイル後のCSSの保存先
  done();
});

このタスクでは、src/scss/以下にある全ての.scssファイルをコンパイルして、dist/css/に出力しています。

スワン

「**」は、フォルダの中にあるすべての.scssファイルを対象にしています。

pipe()についても少し触れておきますね。これはファイルを処理する「流れ（ストリーム）」に対して、次にやりたい処理をつなげるためのメソッドです。ここでは、SassをコンパイルしてCSSに変換する処理を、pipe()でつなげています。このようにpipe()を使って処理をつなげていく形は、gulpの設定ではよくある定番の書き方なので、覚えておくと便利です。

スワン

もうひとつ、src と dist というディレクトリについても簡単に説明しますね！

src は「source」の略で、元のファイル（SassやPug、最適化前の画像など）が入っているディレクトリを指し、dist は「distribution」の略で、処理後のファイルを保存するディレクトリです。つまり、src には開発用のファイルが置かれ、dist には最終的に公開するためのファイルが出力される、と考えればOKです。ちなみに、この src と dist という名前は慣習的によく使われているだけで、好きな名前をつけても大丈夫です。でも、みんながよく使う名前なので、特に理由がなければこのままでOKですよ。

また、sass().on('error', sass.logError)は、コンパイル中にエラーが発生しても、エラー内容をログに出力して作業を続行できるようにしています。

ここで、このタスクをすぐに試せるように、簡単なSassファイルの例を用意しました。以下の内容をsrc/scss/style.scssというファイルに保存してみてください。

$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: white;
}

このSassファイルでは、$primary-colorという変数を使って背景色を指定しています。これをコンパイルすると、CSSファイルが生成され、背景がブルーに設定されたページが作られます。

では、再度コマンドで以下を実行してみましょう。

gulp sass

これで、指定したディレクトリにCSSファイルが生成されるはずです！

gulpの実践的な活用例

ここからは、gulpを実際のプロジェクトでどう活用できるかを見ていきましょう。基本的な使い方は分かったけれど、「で、実際どうやって使うの？」と思っている方に向けて、いくつかの活用例を紹介します！

例1：Sassのコンパイルとブラウザの自動リロード

まずは、よく使われる組み合わせの例です。Sassのコンパイルとブラウザの自動リロードを同時に行うタスクを設定してみましょう。

まず、必要なプラグインをインストールします。コマンドでプロジェクトフォルダに移動してから、以下を実行してください。

npm install --save-dev gulp gulp-dart-sass browser-sync

インストールが完了すると、package.jsonにgulp-dart-sassとbrowser-syncが追加されていることが確認できます。また、node_modulesフォルダにこれらのパッケージがインストールされていれば正常に処理されています。

次に、テスト用のHTMLファイルを用意しましょう。以下のコードをdist/index.htmlとして保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>gulp自動リロードテスト</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>ブラウザの自動リロードを試してみよう！</h1>
  <p>このページを編集して保存してみてください。自動でリロードされるはずです。</p>
</body>
</html>

次に、テスト用のSassファイルを用意しましょう。以下のコードをsrc/scss/style.scssとして保存してください。

$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: white;
}

次に、gulpfile.jsを編集して、Sassのコンパイルとブラウザの自動リロードを連携させます。

const gulp = require('gulp');
const sass = require('gulp-dart-sass');
const browserSync = require('browser-sync').create();

// Sassのコンパイル
gulp.task('sass', (done) => {
  gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.stream()); // リロードをトリガー
  done();
});

// ブラウザの自動リロード
gulp.task('serve', (done) => {
  browserSync.init({
    server: './dist'
  });

  gulp.watch('src/scss/**/*.scss', gulp.series('sass')); // Sassファイルの監視
  gulp.watch('dist/*.html').on('change', browserSync.reload); // HTMLファイルの監視
  done();
});

// デフォルトタスク
gulp.task('default', gulp.series('sass', 'serve'));

実際にタスクを実行してみよう

これで準備が整いました。それでは、以下のコマンドを実行して、設定したタスクを動かしてみましょう。

gulp

gulpと入力すると、まずsassタスクが実行され、SassファイルがCSSにコンパイルされます。その後、serveタスクが実行され、ローカルサーバーが起動し、ブラウザでdist/index.htmlが表示されます。

• Sassファイルのコンパイル
  src/scss/style.scssがコンパイルされて、生成されたstyle.cssがdist/cssに保存されます。
• ローカルサーバーの起動とブラウザ表示
  ローカルサーバーが起動して、localhost:3000でブラウザが自動的に開きます。ここで、さっき作ったdist/index.htmlが表示されるので、リアルタイムでページを確認できます。
• 自動リロード
  src/scssやdist/*.htmlのファイルに変更を加えると、すぐにその変更がブラウザに反映されて自動でリロードされます。手動でページを更新しなくていいので、スムーズに開発が進みますよ！

自動でブラウザが開くのをオフにしたいとき

みなと

gulpを実行するとブラウザが自動的に開くと説明しましたが、個人的には勝手に開くのが煩わしいと感じるので、この機能はオフにしています。

というのも、ローカルサーバーはブラウザにブックマークしてあって、普段から開発中はそのタブを開いていることが多いんです。毎回新しいタブが勝手に開くより、自分で管理した方がスムーズに進められるので、そうしています。

もしブラウザが自動的に開くのをオフにしたい場合は、browserSync.initのオプションにopen: falseを追加するだけで設定できます。

browserSync.init({
  server: './dist',
  open: false // 自動でブラウザが開かないように設定
});

これで、ブラウザが勝手に開くことなく、手動で管理できるようになります。自分のワークフローに合わせて設定してみてください。

自動リロードをオフにしたいとき

みなと

ファイルを更新すると自動的にリロードされると説明しましたが、私はこの機能もオフにしています。

理由は、タブを2つ開いて変更前と後を見比べたいことが多いからです。見た目の細かいところまでこだわりたいときなど、自動リロードだと不便なこともあるんですよね。画面幅を変えたり、デザインカンプと行き来したりすることがよくあるので、手動でリロードする方がやりやすいと感じています。

さらに、キャッシュが残ることもあるので、スーパーリロードを使いたいときが多いというのも理由のひとつです。キャッシュに悩まされず、確実に変更を反映したいときには、手動でリロードした方が安心感があります。

もし自動リロードをオフにしたい場合は、以下のように設定を変更します。

まず、Sassのコンパイルタスクから自動リロード部分を削除します。

// Sassのコンパイル（自動リロードなし）
gulp.task('sass', (done) => {
  gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css')); // リロードをトリガーせず、CSSファイルのみ生成
  done();
});

また、HTMLファイルの自動リロードをオフにするには、serveタスクのbrowserSync.reloadをコメントアウトまたは削除します。

// ブラウザの自動リロードなし
gulp.task('serve', (done) => {
  browserSync.init({
    server: './dist'
  });

  gulp.watch('src/scss/**/*.scss', gulp.series('sass')); // Sassファイルの監視
  // gulp.watch('dist/*.html').on('change', browserSync.reload); // HTMLファイルの自動リロードを無効にする

  done();
});

このようにすることで、ブラウザの自動リロードを無効にして、手動でリロードを行いながら作業ができます。自分の作業スタイルに合わせて設定をカスタマイズしてみてください。

例2：WebP形式への画像変換

次は、画像をWebP形式に変換するタスクを設定してみましょう。WebPは、JPEGやPNGに比べてファイルサイズが小さく、画質を保ちながらページの読み込みを速くすることができます。

まず、必要なプラグインをインストールします。先ほどと同様に、コマンドでプロジェクトフォルダに移動してから、以下を実行してください。

npm install --save-dev gulp gulp-webp

このプラグインを使って、JPEGやPNG画像をWebP形式に変換します。

ESモジュール対応と{ encoding: false }の設定

最近は、プラグインやモジュールがESモジュール（ESM）形式という最新の形式に対応していることが多く、require()じゃなくてimportを使う必要があります。JavaScriptの新しいルールに沿っている感じですね。今回使うgulp-webpもその形式に対応しているので、それに合わせて設定を変えておかないとエラーが出てしまいます。

以下の手順で、ESモジュール形式に対応させましょう。

package.jsonに"type": "module"の設定を追加して、ESモジュール形式を有効にします。

{
  "devDependencies": {
    "gulp": "^5.0.0",
    "gulp-webp": "^5.0.0"
  },
  "type": "module"  // これを追加
}

gulpfile.jsを以下のように編集します。

import gulp from 'gulp';
import webp from 'gulp-webp';

gulp.task('webp', (done) => {
  gulp.src('src/images/*.{jpg,png}', { encoding: false }) // JPEGやPNG形式の画像を対象、画像をバイナリで処理
    .pipe(webp()) // WebP形式に変換
    .pipe(gulp.dest('dist/images')); // 出力先のディレクトリ
  done();
});

このタスクでは、src/images/にあるJPEGとPNG形式の画像をWebP形式に変換して、dist/images/に出力します。また、{ encoding: false }を指定することで、画像をバイナリとして扱い、正しく変換できるようになります。

実際にタスクを実行してみよう

src/images/フォルダに変換したいJPEGやPNG形式の画像を入れて、次のコマンドを実行すると、WebP形式に変換された画像がdist/images/に出力されます。

gulp webp

dist/images/フォルダにWebP形式の画像が出力されます。これで、画像のファイルサイズを減らしつつ、WebP形式で表示する準備が整います。

ちなみに、以下は私がテストした画像の結果です。

スワン

かなりの圧縮結果ですよね！これだけファイルサイズが小さくなれば、読み込み速度も大幅に向上しますし、見た目の劣化もほとんどありません。WebP形式のメリットをしっかり感じられるかと思います。

元の画像とWebP形式の画像を比べて、どれくらいファイルサイズが小さくなったか確認してみましょう。それから、画像の見た目がひどく劣化していないかもチェックしておくと安心です。WebPは高圧縮なので、画像によっては品質が落ちることもありますが、必要に応じて設定を調整して使ってみてください。

WebP形式の設定オプション

デフォルトの webp() メソッドのままでも十分ですが、必要に応じて圧縮率や品質を調整するためのオプションを使うこともできます。特に以下の3つのオプションがよく使われます。

これらのオプションを使った例がこちらです。

.pipe(webp({
  quality: 75,      // 75%の品質で圧縮
  lossless: false,  // 非劣化を無効化
  method: 4         // 圧縮効率を中程度に設定
}))

このように、画像の品質や圧縮率も自分で調整できるので、WebP変換をもっと自由にカスタマイズできます。使う場面に合わせて、いろいろ試してみてくださいね！

例3：JavaScriptの圧縮

最後に、JavaScriptの圧縮です。JavaScriptファイルを圧縮すると、余計な空白やコメントを取っ払うだけでなく、変数名や関数名を短くしたり、使われていないコードを削除してファイルサイズを小さくします。これでページの読み込みが速くなり、サイトのパフォーマンスアップにつながります。

まず、JavaScriptを圧縮するためのプラグインをインストールします。コマンドでプロジェクトフォルダに移動してから、以下を実行してください。

npm install --save-dev gulp gulp-uglify

次に、gulpfile.jsにJavaScriptの圧縮タスクを追加します。

const gulp = require('gulp');
const uglify = require('gulp-uglify');

gulp.task('scripts', (done) => {
  gulp.src('src/js/**/*.js') // 圧縮対象のJavaScriptファイル
    .pipe(uglify()) // JavaScriptを圧縮
    .pipe(gulp.dest('dist/js')); // 圧縮後のファイルを出力
  done();
});

このタスクでは、src/js/にあるJavaScriptファイルを圧縮し、dist/js/に出力します。これで、JavaScriptの圧縮も自動化できます。

実際にタスクを実行してみよう

タスクを実行する前に、サンプルのJavaScriptファイルを用意しましょう。以下のコードをsrc/js/app.jsとして保存してください。

function greet(name) {
  console.log(name + 'さん、こんにちは！');
}

greet("gulp");

次に、以下のコマンドを実行します。

gulp scripts

このコマンドを実行すると、src/js/ディレクトリにあるJavaScriptファイルが圧縮され、dist/js/に出力されます。出力されたファイルを確認すると、空白やコメントが削除されてコンパクトになったコードが生成されているはずです。

上の例のように、開発用のJavaScriptファイルは今後も更新できるようにそのまま残しておき、圧縮されたファイルはdist/js/などの専用フォルダに保存しておくと、管理がしやすくなります。

このように、gulpはさまざまな作業を自動化できるので、実際のプロジェクトで活用することで開発効率がアップします。今回紹介した活用例をベースに、自分のプロジェクトに合ったタスクを作成してみてください！

まとめ

この記事では、gulpでできることや、実際にどう活用できるかを紹介してきました。Sassのコンパイルや画像の最適化、ブラウザの自動リロードなどを自動化できるので、開発がだいぶラクになります。

ツールはあくまで使い方次第。自分のプロジェクトに合った使い方を見つけるのがポイントです。

私自身、長年使ってきて思うのは、結局どのツールを使うかは自分次第ということ。gulpも、うまくハマればとても便利です。ぜひ自分の環境で試してみて、どんな感じで使えるか体験してみてください！

みなと

フロントエンドエンジニア

X

東京のWeb制作会社で15年以上働いているフロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。