絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順

絶対つまずかないGulp 5入門
インストールとSassを使うまでの手順

5月15日メンテナンス済み / 株式会社 ICS

ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。

導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。

この記事で学べること

イマドキのGulpの導入手順
Gulp 5に対応した書き方
Sassサスの導入手順

GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。

※この記事では、Node.js v24で動作検証をしています。

※Gulp 5が2024年3月にリリースされました。本記事は最新版のGulp 5で説明しています。以前のバージョンGulp 4でも本記事と互換性があります。

※SassにはDart Sass、node-sass、Ruby Sassと複数の種類がありました。現在は、Dart Sass（通称sassモジュール）が標準であり、この記事はsassモジュールで紹介しています。

作業を自動化できるタスクランナーとは？

ウェブ制作におけるさまざまな処理を「タスク」という単位で扱い、このタスクを自動化するツールのことを「タスクランナー」と呼びます。一般的にウェブ制作の現場では、Sassサスを編集すればコンパイルを実行し、画像を編集すれば画像を圧縮するというように多くの手間がかかります。

タスクランナーを使うとこのようなウェブ制作での煩雑な処理がすべて自動で行われるため、開発の工数の短縮につながります。また、一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになります。

タスクランナーのメリット

Gulpのメリットは簡易な記述と高速な処理

タスクランナーはGulpだけでなくGruntグラントというツールもありました。どちらもNode.jsノード・ジェイエスをベースに作られたタスクランナーです。どちらが優れているというわけではありませんが、GulpはGruntに比べていくつか使いやすい点があります。

たとえば、GruntではJSONジェイソン形式で独特の記述方法であるのに対し、GulpはJavaScriptで記述可能です。また、Gruntでは基本的に同期処理であるためタスクは1つずつ実行されますが、Gulpでは基本的に非同期処理なのでタスクが高速に処理できます。

gulp（ガルプ）のメリット

Gulpの導入は5分でできる

Node.jsとGulpをインストールしましょう。コマンドライン（Windowsでは「コマンドプロンプト」、macOSでは「ターミナル」)を使う場面がありますが、コピペだけで簡単にインストールできます。Windows、macOS共通の方法で導入可能です。ページの最後に導入手順の動画も掲載してありますので、あわせてご参照ください。

1. Node.jsをインストール

Gulpを使うためにはNode.jsが必要なので、公式サイトよりNode.jsのインストーラーをダウンロードします。ダウンロードページには「推奨版」と「最新版」の2種類がありますが、「推奨版」をダウンロードください。ダウンロードしたら手順にしたがってインストールします。

Node.jsインストール画面

2. コマンドラインを起動しよう

Windowsにはコマンドプロンプトがインストールされています。起動方法は、検索バーにcmdを入力すると「コマンドプロンプト」が出現するので、選択して起動します。

macOSには「ターミナル.app」というソフトウェアがインストールされています。［アプリケーション］フォルダー→［ユーティリティ］フォルダーに移動し、［ターミナル］を起動します。

ターミナル.appを起動

コマンドラインを起動したらnode -vと実行し、Nodeのバージョンが表示されていることを確認します。これでNode.jsのインストールは成功です。

※ WindowsにてNodeのバージョンが表示されていない場合は、コマンドプロンプトを再起動ください。

3. package.jsonファイルの作成

ウェブサイトのファイル一式が保存されるフォルダー（以下、プロジェクトフォルダーと呼びます）を任意の場所に作成し、コマンドラインでその場所に移動します。今回は、myprojectというフォルダーを使う前提で解説します。あらかじめフォルダーを作成しておき、次のコマンドで移動します。

▼ Windowsでのフォルダーの移動のコマンド

cd C:\Users\★★★\myproject

▼ macOSでのフォルダーの移動のコマンド

cd /Users/★★★/myproject

cdとはチェンジ・ディレクトリーの略で、フォルダーの階層を移動するコマンドです。cdの後ろに半角スペースを入力ください。また、★★★の部分はOSのユーザー名を入力ください。完了したら、Enterキーを押します。

次のコマンドを実行すると、設定情報の記述されたpackage.jsonファイルが生成されます。

npm init -y

package.jsonファイルの中身は次のようになっています。

Node.jsのpackage.jsonの中身

4. Gulpのインストール

Gulpを実行するために、プロジェクトフォルダー内へGulp本体をインストールします。

npm install -D gulp

※ package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されているのを見ることができます。

※ Gulpのインストールにはオプション指定として--save-dev、もしくは省略形の-Dという指定をするのが一般的です。

以上の手順でGulpが使える状態になりました。

記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。現在ではそれは少数派です。Gulpはグローバルではなく、ローカルだけにインストールするのがフロントエンド界隈では一般的です。環境差異で動作しないなどトラブルのもとになるので、グローバルにインストールしないほうが望ましいでしょう。

Gulp導入手順のビデオ

WindowsとmacOSのそれぞれのインストール手順を録画しています。導入の手順でつまづくことがあれば、次の動画と見比べて手順に間違いがないか確認ください。インストールが成功している場合は読み飛ばして構いません。

WindowsでのGulp導入手順

Windowsでは、公式サイトからNode.jsをインストールした後、コマンドプロンプトを使用してGulpを導入します。

macOSでのGulp導入手順

macOSでは、公式サイトからNode.jsをインストールした後、ターミナルを使用してGulpを導入します。

Sassコンパイルを通して学ぶタスク処理の基本

ここからは、Sassファイルをコンパイルする手順を解説します。SassとGulpの連携を通して、Gulpの理解を深めていきましょう。

次の動画はSassのコンパイル手順をまとめたものです。もしわからないことがあれば動画を見直してください。

※ 動画はGulp v3時代のものです。現在は本文のGulp 5向けコードを利用してください。

解説の概略

cssフォルダーに配置したSassファイル（SCSSファイル）を、CSSファイルに変換（コンパイル）してみましょう。Sassには二種類の記法があり、Sass記法とSCSS記法がありますが、この記事ではSCSS記法で紹介します。

css/style.scssファイルを用意しましょう。

▼ 変換前のSCSSファイル（css/style.scss）

// ネストのテスト
div {
  p {
    font-weight: bold;
  }
}

// 変数のテスト
$fontColor: #525252;

h1 {
  color: $fontColor;
}

タスクの作成

必要なモジュールをnpm install -Dコマンドを使って、ローカルにインストールしましょう。SassをGulpでコンパイルするためには次の3つのモジュールをインストールします。

Gulp本体のgulpモジュール
Sassコンパイラ（Dart Sass）のsassモジュール
SassモジュールとGulpモジュールを連携するgulp-sassモジュール

npm install -D gulp sass gulp-sass

タスクを作成するには、プロジェクトファイル直下にgulpfile.jsというファイルを作成する必要があります。gulpfile.jsファイルでの処理は、JavaScriptで記述します。

Sassのコンパイル処理は、gulpfile.jsファイルに下記のコードを記述します。

▼ gulpfile.jsファイル

// gulpプラグインの読み込み
const { src, dest } = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass")(require("sass"));

// style.scssをタスクを作成する
function defaultTask() {
  // style.scssファイルを取得
  return (
    src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(
        sass({
          style: "expanded"
        })
      )
      // cssフォルダー以下に保存
      .pipe(dest("css"))
  );
}

exports.default = defaultTask;

この記述の中で使われているGulpの処理を解説します。

require('プラグイン名') 使用するプラグインを読み込みます
src('取得するファイル') タスクの対象となるファイルを取得します。複数のファイルも指定できます
pipe() 1つひとつの処理をつなげます。たとえば前述のコードでは、src()で取得したSassファイルをコンパイルし、それをdest()で書き出しています。pipe()メソッドはいくらでもつなげることができるので、連続した複数の処理を実装できます
dest('保存先フォルダー') 処理を行ったファイルを指定の場所に保存します
exports.default npx gulpコマンドを実行したときに呼び出されるタスクを指定します

タスクの実行

作成したタスクを実行するには、コマンドラインでnpx gulpと入力してEnterを押します。

npx gulp

※ npxはNode.jsに同梱されているコマンドです。

タスクを実行すると、cssフォルダーにコンパイルされたCSSファイルが書き出されます。

▼ 変換されたCSSファイル（css/style.css）

div p {
  font-weight: bold;
}

h1 {
  color: #525252;
}

ちなみにexports.default以外の名前でタスクを出力した場合は、npx gulp (タスク名)で実行します。

オプションの指定

上記コードでは、sass()メソッドでコンパイル時のオプションを{style: "expanded"}と指定しています。

プラグインはオプション指定で細かく設定できます。どのようなオプションが設定できるかは、プラグインによって異なります。

※ Sassの出力スタイルはexpandedの他に、全CSSコードを1行にするcompressedがあります。

解説したサンプルは、次のGitHubから確認できます。不安な方はダウンロードしてお試しください。

Sassコンパイルタスクのソースコード

以上で、Gulpを使ったSassのコンパイルができました。

watch機能を使えばファイルの更新後に自動で処理を実行できる

Sassファイルの更新頻度は少なくないため、Sassファイルを更新する度にタスクを手動で実行するのは面倒です。ファイルの更新があったらそのタイミングでタスクを自動で実行できるwatch機能を使うと便利です。

watch機能を使ってSassファイルを自動コンパイルしてみよう

「Sassファイルに変更があった場合に、自動的にCSSにコンパイルするタスク」を例に紹介します。

次の動画はSassファイルの自動コンパイル手順をまとめたものです。もしわからないことがあれば動画を見直してください。

※ 動画はGulp v3時代のものです。現在は本文のGulp 5向けコードを利用してください。

watch機能で使用するのがwatch()メソッドで、「監視するファイル」に変更があった場合、設定された「処理」が実行されます。

watch('監視するファイル', 処理)

style.scssの更新があったら、style.scssをコンパイルするタスクは次のコードです。

▼ gulpfile.jsファイル

// gulpプラグインの読み込み
const { src, dest, watch } = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass")(require("sass"));

function compileStyles() {
  // style.scssファイルを取得
  return (
    src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(
        sass({
          style: "expanded",
        })
        // Sassのコンパイルエラーを表示
        // (これがないと自動的に止まってしまう)
        .on("error", sass.logError)
      )
      // cssフォルダー以下に保存
      .pipe(dest("css"))
  );
}

// style.scssの監視タスクを作成する
function defaultTask() {
  // ★ style.scssファイルを監視
  return watch("css/style.scss", compileStyles);
}

exports.default = defaultTask;