Gulpの導入は5分でできる

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

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

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

Node.jsインストール画面

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

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

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

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

ターミナル.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ファイルの中身は次のようになっています。

Node.jsの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を導入します。

次のページではGulpとSassの使い方を解説します。