誰でもできる!Gulpのインストール手順まとめ

新しいツールに興味を持ったとき、インストールは最初にして一番高い壁ではないでしょうか。
Gulpが気になっているけれどなかなか手を出す機会のなかった人に、ぜひインストールだけしてみてほしいと思って書きます。
PCが苦手でも大丈夫。最初の壁を乗り越えられれば、きっとGulpを使いたくなるはず。

Node.jsのインストール

Gulpを動かすためには、Node.js(npm)というものが必要になります。まずはそのインストールから。

以下のサイトからインストーラーをダウンロードします。
https://nodejs.org/

サイトは日本語に対応していないみたいですが、自動翻訳でも十分意味がわかるはず。
Node.jsについての説明があるので以下引用。説明できるほど理解できていないけれど、Node.jsってすごいんです。

Node.js®は、ChromeのV8 JavaScriptエンジンで構築されたJavaScriptランタイムです。Node.jsは、軽量で効率的なイベントドリブンの非ブロッキングI / Oモデルを使用します。Node.jsのパッケージエコシステムnpmは、世界のオープンソースライブラリの中で最大のエコシステムです。

自分のPC環境に合わせたインストーラーをダウンロードしたら、実行します。
途中でオプションの選択とかがでてきますが、基本的にはデフォルトのままでOK。

ちなみに、Node.jsのインストールには世間ではバージョン管理ツールを導入するケースが多いみたい。この辺りは、詳しく書かれているブログやサイトが多数あるのでお好みで。今回はとにかくGulpをインストールしてみる、という目的なので省略します。

なお、Node.jsの活用方法はGulpに限らず幅広いため、他の用途ですでにインストールしていることもあります。
(私はGulpを利用するようになる前から、Selenium WebDriverを動かすためにNode.jsをインストールしていました。)

Gulpのグローバルインストール

ここから先は、Macならターミナル、Windowsならコマンドプロンプトを使用してコマンドで操作します。
まずは以下のコマンドでGulpをPCのグローバル環境にインストールします。

npm install --global gulp-cli

使用するディレクトリへ移動

ローカル環境でGulpを動作させることを前提として進めます。
Gulpを動作させるディレクトリに移動します。
作業ディレクトリの移動はcdコマンドを使います。チェンジディレクトリの略だそうです。私のようにコマンドに不慣れな方も、よく使うので覚えておきましょう。

cd {移動先ディレクトリのパス}

指定するディレクトリの例)私の場合は、制作・運営しているサイトを一つの単位とし、以下のようなディレクトリ構造で管理しています。
下記の「サイト1」ディレクトリ内のデータに対してGulpを使いたい場合(Sassコンパイルの自動化を行いたい等)、「サイト1」の直下に、後述するpackage.jsonファイルやGulp本体を作成・インストールします。

  • サイトデータ
    • サイト1
      • develop
        • contact
        • css
        • images
        • index.html
        • etc…
      • release
      • backup
      • etc…
    • サイト2
    • サイト3

package.jsonファイルの作成

Gulpでは、package.jsonという設定ファイルを用いて、インストールした拡張機能の管理を行います。
以下のコマンドで、このpackage.jsonファイルが作成されます。

npm init

上記のコマンドを実行すると、設定に関することをいろいろ聞かれます。
よくわからなければエンターで進めていけばOK。package.jsonは後から直接編集することもできます。

gulp本体のインストール

最後に、以下のコマンドでGulp本体をインストールします。

npm install --save-dev gulp

これでGulpのインストールが完了しました!
インストールを終えたら、あとは目的に合わせて必要なプラグインをインストールし、タスクを記述するだけです。

今回はここまで。