絶対つまずかないGulp 4入門(2019年版)
インストールとSassを使うまでの手順

351
241
254

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

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

この記事で学べること
・イマドキのGulpの導入手順
・2018年12月リリースのGulp 4に対応した書き方
Sassサスの導入手順

GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では2018年現在もっとも現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。Google検索結果の上位の記事を参照にしたら古いバージョン3以下の内容ばかり。本記事は常に最新版に対応させているので、安心して読み進めてください

SassはRubyルビーでインストールする手順で解説しているサイトがいまだに多いですが、2018年現在、その手順で使っている人は少数です。Node.jsノード・ジェイエスとGulpでSassをインストールして使うのが一般的です。Node.jsを使う方法であれば、WindowsでもmacOSでも同じ手順でインストールできるといった利点があります。

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

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

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

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

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

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

Gulpの導入は5分でできる

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

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

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

※Node.jsの最新版(npm v5.2以上)だと、npxというコマンドが使えます。npxコマンドを使うと、Gulpを少ない手順で使えるようになります。

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

Windowsにはコマンドプロンプトがインストールされています。起動方法は、ファイル名を指定して実行 Windowsキーを押しながらRキーを押すと、「ファイル名を指定して実行」ウィンドウが表示されます。 名前欄にcmdを入力し、[OK]をクリックします。 すると、「コマンドプロンプト」ウィンドウが起動します。

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

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

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

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

Webサイトのファイル一式が保存されるフォルダー(以下、プロジェクトフォルダーと呼びます)を任意の場所に作成し、コマンドラインでその場所に移動します。今回は、myprojectというフォルダーを使う前提で解説します。

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

cd C:¥Users¥★★★¥myproject

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

cd /Users/★★★/myproject

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

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

▼コマンドライン

npm init -y

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

4. Gulpのインストール

Gulpを実行する為に、Gulp本体をローカル環境に(プロジェクトフォルダー以下で使えるように)インストールします。

▼コマンドライン

npm install -D gulp

package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されているのを見ることができます。
––save-dev、もしくは省略形の–Dという指定をするのが一般的です。

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

記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。2017年現在、それは少数派です。この記事で説明しているように、グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的です。

Gulp導入手順のビデオ

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

WindowsでのGulp導入手順

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

macOSでのGulp導入手順

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

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

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

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

※ 動画内で使用しているGulpはv3のものですが、v4も手順は同じです。gulpfile.js内のコードのみ一部異なりますので、後述するコードに置き換えてください。

解説の概略

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

タスクの作成

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

  • Gulp本体のgulp
  • Sassファイルをコンパイルする為のプラグインgulp-sass

▼コマンドライン

npm install -D gulp gulp-sass

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

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

▼gulpfile.jsファイル

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

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

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

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

タスクの実行

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

▼コマンドライン

npx gulp

※ 記事の冒頭で紹介した通り、Node.jsの最新版をお使いください。npxはnpm v5.2(最新版のNode.jsに同梱されている)から使える新しいコマンドです。参照記事「npxでローカルパッケージを手軽に実行しよう - Qiita」。

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

▼ 変換前のSCSSファイル(css/style.scss)

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

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

h1 {
  color: $fontColor;
}

▼ 変換されたCSSファイル(css/style.css)

div p {
  font-weight: bold;
}

h1 {
  color: #525252;
}

ちなみにタスク名をdefaultで指定しましたが、それ以外の名前をつけた場合は、npx gulp (タスク名)で実行します。

オプションの指定

出力されたCSSファイルを見ると、宣言の最終行と中括弧(})が、同一行になっていますが、普段見慣れているのは最終行の中括弧が改行された形式かと思います。出力時の設計のコードを整形するには、次の★部分のようにsass()メソッドでコンパイル時のオプションを{outputStyle: 'expanded'}と指定します。

▼gulpfile.jsファイル

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

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

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

※ Sassの出力時のコードはexpandedの他にも、nested(ネストがインデントされる)、compact(規則集合毎が1行になる)、compressed(全CSSコードが1行になる)などがあります。

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

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

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

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

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

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

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

※ 動画内で使用しているGulpはv3のものですが、v4も手順は同じです。gulpfile.js内のコードのみ一部異なりますので、後述するコードに置き換えてください。

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

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

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

▼gulpfile.jsファイル

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

// style.scssの監視タスクを作成する
gulp.task("default", function() {
  // ★ style.scssファイルを監視
  return gulp.watch("css/style.scss", function() {
    // style.scssの更新があった場合の処理

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

▲ 図の★部分がwatch()メソッドを用いている部分です。

タスクを実行すると、Sassファイルの監視と自動コンパイルが始まります。自動コンパイルについては冒頭の動画を見ると挙動がわかりやすいでしょう。

▼コマンドライン

npx gulp

ファイルの監視を終了する場合は、コマンドラインでCtrlとCキーを同時に押します。

解説したサンプルコードは、次のURLからも確認できます。

タスクランナーGulpを積極的に使いこなそう

Gulpの導入はこのような手順となります。今回紹介した基本的なことをおさえておけば、開発目的に応じたタスクを柔軟に作成できます

今回はGulp入門の内容でしたが、続編記事「最低限おさえておきたいタスクランナーの書き方まとめ (GruntとGulpの両方のコードを掲載)」ではGulpを使いこなすためのTipsをまとめています。Gulpはいろんな使い方ができるので、必要に応じて調べて使っていくことになるでしょう。そのときに参照してもらえたら幸いです。是非この機会にタスクランナーの便利さに触れてみてください。

オンライン動画でも解説してます

また筆者は無料動画学習のSchoo(スクー)で「Gulp入門(全3回)」の講師をしています。Schooの授業では、1つ一つの手順を詳しく動画で解説しているので、コマンドラインが不慣れな方でも安心して学習できます。

※ Schooで解説している内容はGulp v3のものです。

※この記事が公開されたのは4年7ヶ月前ですが、 平成30年12月11日に内容をメンテナンスしています。