WindowsにGulpをグローバルにインストールする方法【初心者向け完全ガイド】

この記事では、Windows環境にGulpをグローバルにインストールする手順をわかりやすく解説します。Macでも基本的な流れはほぼ同じですが、コマンドの構文が多少異なる場合があります。

Node.jsとnpmのダウンロード・インストール

まず最初に、お使いのパソコンにNode.jsとnpm(Node Package Manager)がインストールされている必要があります。

Node.jsがインストールされているかどうかわからない場合は、コマンドラインで node -v または node --version を実行してみてください。インストール済みであれば、v8.17.0 のようなバージョン番号が表示されます。

Node.jsがまだインストールされていない場合は、公式サイトNodeJS.orgにアクセスし、お使いのオペレーティングシステムに対応したインストーラーをダウンロードしましょう。ダウンロードが完了したら、ファイルを実行してNode.jsをインストールします。

なお、Node.jsをインストールすると、npmも同時に自動的にインストールされるので便利です。

Gulp CLI(コマンドラインユーティリティ)のインストール

Gulpは大きく分けて2つの部分で構成されています。1つはパソコン全体にグローバルにインストールされる「Gulp CLI(コマンドラインユーティリティ)」、もう1つは各プロジェクトごとに個別にインストールされる「ローカルのGulpパッケージ」です。

この分離構造はGulp v4から導入されたもので、プロジェクトごとに異なるバージョンのGulpを実行できるようになっています。この変更について詳しく知りたい方は、GulpチームのMedium記事を参照してください。

Gulp CLIをグローバルにインストールするには、コマンドラインで以下のコマンドを実行します。

npm install gulp-cli -g

-gフラグを付けると、npmはパッケージをグローバルのnpmディレクトリにインストールします。これにより、どのディレクトリからでもgulpコマンドを実行できるようになります。

ローカルプロジェクトへのGulpのインストール

Gulp CLIをグローバルにインストールできたら、次はGulpを使用したい各プロジェクトのディレクトリに対して、ローカルインストールを行います。

ローカルにインストールするには、プロジェクトのディレクトリに移動して npm install gulp を実行します。package.jsonの依存関係として保存したい場合は、npm install gulp --save-dev を実行しましょう。

ローカルへのGulpのインストールが完了したら、プロジェクト内にgulpfile.jsを作成し、独自のGulpタスクを定義していきましょう。Sass/SCSSとJavaScriptのワークフローをGulpで構築する具体的な方法については、専用のチュートリアル記事もぜひ参考にしてください。