Gulpの導入は5分でできる

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

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

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

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

ターミナル.appを起動

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

Gulpを使うためにはNode.jsが必要なので、公式サイトよりインストーラーをダウンロードし、手順にしたがってインストールします。インストール後、コマンドラインにてnode -vと実行し、Nodeのバージョンが表示されていればインストール成功です。

※ WindowsにてNodeのバージョンが表示されていない場合は、パスが通っていない可能性があるのでパソコンを再起動ください。

Node.jsインストール画面

2.Gulpをグローバルにインストール

コマンドラインを立ち上げ、以下のコマンドを実行してGulpをグローバルに(どの場所にいてもgulpコマンドが使えるように)インストールします。インストール後、コマンドラインにてgulp -vと実行した時に、Gulpのバージョンが表示されていればインストール成功です。

npm install -g gulp-cli

※ macOSでインストール中にエラーが出る場合は、sudo npm install -g gulp-cliと指定して管理者権限で実行します。

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

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

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

cd C:¥Users¥MyName¥myproject

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

cd /Users/MyName/myproject

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

次のコマンドを実行すると、プロジェクトの設定情報が記述されたpackage.jsonファイルが生成されます。途中で、プロジェクト名や著作権の設定をどうするかというダイアログが表示されますが、設定が不要ならば全てYes(Enterキー)で構いません。

npm init

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

Node.jsのpackage.jsonの中身

4. 必要なプラグインのインストール

Gulpでは、Gulp本体そのものにファイルのコピー機能やSCSSのコンパイル機能があるわけではなく、プラグイン(処理を行う個々のプログラム)を通じて各々の処理が行われます。個別のプラグインは、次のコマンドでインストールが可能です。––save-devという指定をすることで、インストールしたプラグインのバージョンが、自動的にpackage.jsonファイルに追記されます。

// プラグインのインストール
npm install --save-dev (プラグイン名)

※ macOSでインストール中にエラーが出る場合は、sudo npm install ––save-dev (プラグイン名)と指定して管理者権限で実行します。
package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されているのを見ることができます。

Gulpを実行する為に、Gulp本体をローカル環境に(プロジェクトフォルダー以下で使えるように)インストールします。グローバル環境にはステップ2でインストール済ですが、ローカル環境にもインストールする必要があります。

npm install --save-dev gulp

※ macOSでインストール中にエラーが出る場合は、sudo npm install --save-dev gulpと指定して管理者権限で実行します。

Gulp以外のプラグインは、プロジェクトで実行したいタスクに応じて適宜インストールします。以上の手順でGulpが使える状態になりました。

Gulp導入手順のビデオ

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

WindowsでのGulp導入手順

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

macOSでのGulp導入手順

macOSでは、公式サイトからNode.jsをインストールした後、ターミナルを使用してGulpを導入します。多くの場合、sudo(管理者権限)をコマンド冒頭につける必要があります。

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