WindowsでNode.js、gulp.jsをインストールして効率よい開発環境を目指す（準備編）

最近「Node.js」や「gulp.js」といったキーワードをよく耳にします。
プログラミングやコーディングの作業効率を改善する環境を構築できるようなので、モノは試し、まずはベースとなる環境を整えてみます。
この技術は基本的にCUI環境で操作するで、LinuxベースのMacなどの環境に関するドキュメントが多いですが、今回はWindowsでの環境構築を目指します。

以下、今回導入したバージョン情報です。

OS	Windows 7 Professional 64bit
Node.js	5.4.0
npm	3.6.0
gulp.js	3.9.1

今回「gulp.js」のプラグインを使用することが目的ですが、そのためにはnpmコマンドが必要で、npmを使用するために「Node.js」をインストールするといった流れです。

「Node.js」をインストール

はじめに「Node.js」をインストールします。
「Node.js」とは、JavaScriptをサーバサイドで機能させるための環境です。通常、JavaScriptはクライアントサイドのブラウザ上で実行されますが、「Node.js」を導入することにより、サーバサイドで非同期処理を実装することができます。最近ではWebアプリケーションの開発に導入されることが多いようです。
今回、サーバを構築するためではなく、「gulp.js」を導入するために用意するので、詳細については割愛します。

さて、公式サイトでWindowsインストーラをダウンロードしてインストールを実行します。
Node.js
現時点で安定したバージョン4系と、5系が公開されていますが、注目度と今後の発展を期待して5系をセレクトします。
インストールはナビゲーションに従い進めます。特にオプションなどの調整は必要ありません。

インストールが完了したら、Windowsのコマンドプロンプトを起動して、以下のコマンドを実行してみます。

> node --version
v5.6.0
> npm --version
3.6.0

このようにバージョン情報が出力されれば、インストール成功です。
ちなみにインストール時に環境パスは通っているはずです。

「Node.js」をインストールするとnpmが同時にインストールされます。
npmとは「Node Packaged Modules」の略で、ライブラリやパッケージの管理ツールです。

今回「gulp.js」のインストールにはnpmを使用します。npmがあれば、jQueryなど他のパッケージ管理にも便利です。詳細についてはまたの機会に。。

「gulp.js」をインストール

次に「gulp.js」をインストールします。
gulp.js – the streaming build system

インストールには先ほどのnpmコマンドを使用します。
ここではオプション「-g」を付けてグローバルインストールを実行します。

> npm install -g gulp

インストールには少々時間がかかります。
以下のようにコマンドプロンプトから、gulpコマンドでバージョンが出力されればインストール成功です。

> gulp --version
[00:00:00] CLI version 3.9.1

「gulp.js」を使用する

「gulp.js」を使用する具体的な手順です。

任意のWebアプリケーションやHTMLコーディング・プログラミングのプロジェクトに導入すると仮定します。
プロジェクトは新規でも、途中でもかまいません。以下の操作はプロジェクト単位で行い、管理します。

コマンドプロンプトを開き、プロジェクト作業フォルダに移動します。

> cd project1（任意）

次に、npmコマンドでプロジェクト設定情報ファイルを生成します。

> npm init

プロジェクト名、バージョンや作成者情報などの入力を求められますが、後程編集できるので、全て「Enter」でも構いません。
そうすると「package.json」というファイルが生成されます。

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

次にgulpをインストールします。先ほどはオプション「-g」を付けたグローバルインストールでしたが、各プロジェクトにローカルインストールする必要があります。

> npm install --save-dev gulp

インストールが成功すると必要なモジュールがフォルダ「node_modules」に追加され、先ほどの「package.json」に以下が追記されます。

  "devDependencies": {
    "gulp": "^3.9.1"
  }

以上でgulpのインストールは完了です。
初見の方は「終わり？」かもしれませんが、gulpは本体のみでは機能せず、必要なものをプラグインとして組み込むことで初めてその威力を発揮します。
次回にプラグイン毎に、その機能と設定方法、利用方法など紹介できればと思います。
今回は「gulp.jsを利用できる環境ができるまで」でした。

私の印象ですが、「gulp.js」はバッチやシェルコマンドに似てますね。
システムの知識がなくても、フロントエンドの知識（JavaScriptの知識）があれば、簡単なコマンドで作業効率化を図れるといったしくみでしょうか。