CSSやJSを圧縮して最適化したり、htmlにインラインでCSSを書きだしたり・・・そんなことをするためには、私は「Gulp」を使っています。便利ですよね～。

私個人的には、新しいPCを買った時や制作環境の見直しなどのタイミングで導入することが増えてきましたので、この機会にGulpのインストール方法について書きました。（インストール方法はよく忘れることが多くて・・・毎回方法をあちこちで調べてて、時間を食ってしまうのを避けたいという思いです）

インストール後の具体的な使い方などは、自分用のメモも兼ねて今後少しずつまとめようと考えています。

使い方の基本として、Gulpを使ったタスクを動かす方法を知りたいかたは以下のページに書きましたのでご参考ください。

また、さらに詳しく「Gulpを使うと何ができるか、どう使うといいのか」など今すぐ知りたい方は「gulp メリット」「gulp 使い方」などでGoogle検索するとたくさん情報が出てきますので、そちらをご参考ください。

前準備：node.jsをはじめにインストールしよう

Gulpを使うためには「node.js」をインストールしていることが前提条件になります。今回初めてGulpを使う方は「node.jsをインストールしないといけないんだな～」と覚えておけばいいと思います。

node.jsのインストーラーをダウンロードしよう

ではさっそくやりましょう。

node.jsをインストールする方法はいくつかありますが、インストーラーから行う方法がとっつきやすいと思います。「https://nodejs.org」にアクセスして、インストーラーをダウンロードしましょう。

「https://nodejs.org」にアクセスすると、下の画像のように自分が使っている端末のOSを判別してダウンロードできるインストーラーが案内されます。（64ビットのWindows端末でアクセスしました）

どのバージョンのnode.jsをダウンロード・インストールすればいいの？

特別な理由がない限りは最新の「Stable(安定板)」をダウンロード・インストールしましょう。上の画像の例ではバージョン5.5.0ですね。

インストーラーを実行して、表示される案内に従ってインストールしましょう。インストール先のフォルダ指定や環境変数にパスを追加するなどの設定はそのまま変更せずに、流れに沿ってインストールを進めたとします。

node.jsのバージョンを確認するには

現在使っているnode.jsのバージョンを確認するには、以下のコマンドでできます。node.jsがうまくインストールされているかどうかの確認も兼ねて、コマンドプロンプトを起動して実行しましょう。

node -v

出力例

v5.5.0

最新のバージョンと比較するために、このコマンドを使うこともあると思います。覚えておいて損はないコマンドですね。

node.jsのインストールについては以上です。このページでは、Gulpを使うためにnode.jsをインストールする方法のみ必要最小限で案内しています。さらに深く知りたい方は、日本語で解説された「Node.js 日本ユーザグループ」をご参考ください。

node.jsのインストールが無事に完了したら、いよいよ本題のGulpのインストールを行います。

Gulpをインストールする

node.jsをインストール済みとして進めます。Gulpのインストール方法はこちらGetting Started（英文）に書かれていますので、そのままやってみます。

Gulpを使うためには、まずはgulp-cliをインストールする必要があります。（2016/02/06現在確認したところ、インストール方法が変わったようです）

gulp-cliをインストールする

Windowsの場合はコマンドプロンプト、Macの場合はターミナルを開いて以下のコマンドを実行します。Macの場合は「sudo」を付けてコマンドを実行しましょう。（以降、ご使用の環境にあわせて読み替えてください）

npm install --global gulp-cli

「‐‐global」はグローバルにインストールするっていうオプションです。このオプションは必ずつけておきましょう。

gulpをインストールする

次はgulpをインストールしますが、インストールする場所に注意してください。コマンドプロンプト（ターミナル）でcdなどのコマンドを使ってgulpをインストールしたいフォルダまで移動して、以下のコマンドを実行しましょう。

npm install --save-dev gulp

例えばフォルダごとに別々のWebサイトの開発環境を作っている場合などは、都度フォルダまで移動してgulpをインストールすることもある、ということですね。

また、gulpは開発する時だけに使うもので、依存関係のあるものをインストールするため「‐‐save‐dev」のオプションをつけておきます。

Gulpのバージョンを確認するには

コマンドプロンプト（ターミナル）を起動して、以下のコマンドで確認できます。こちらもnode.jsと同様に、うまくインストールできたかどうかの確認も兼ねて、gulpをインストールしたフォルダ内で実行してみましょう。

gulp -v

出力例

[11:58:20] CLI version 1.2.0
[11:58:20] Local version 3.9.0

gulp-cliのバージョンが1.2.0で、gulpが3.9.0ってことですね。

先ほども少し触れましたが、Gulpのインストール方法が以前と変わっていて、古い方法でGulpをインストールしている方は、この2つのバージョンが揃っていることもあるみたいです。

今回新しいインストール方法（gulp-cliをインストールする方法）に変わったタイミングで、CLIのバージョンについても採番し直されたのかな～という理解をしています（解釈が間違っていたらすみません。）

まとめ

Gulpをインストールする方法について書きました。具体的にGulpを使うところまで解説するのもアリかなと思ったんですが、一度にたくさん覚えることをせず、まずはインストールに集中したほうがいいと考えています。

インストールが成功したら、次はタスクを動かしてみましょう。以下のページにその流れを書きましたので、ご参考ください。

Gulpでやれることは便利なものが多いです。今後は少しずつ解説ページを増やしていきますので、興味がある方はまた読みに来てください。