はじめに

この記事では、npm及びgulpのインストールが完了していない、もしくは昔チャレンジしたけれど、完了しているかわからない人向けの解説を行います。

GIFアニメで動きを解説しておりますので、参考にしていただければと思います。

gulpを使用するにあたり、ローカルとは別に、global環境にもgulpをインストールする必要があります。

（厳密にはなくても動かす方法がありますが、あくまで公式の推奨事項に則って説明します。）

以下の記述にしたがって環境構築を行いましょう。（Mac向けの解説です）

流れ

• 1.npmのインストール
• 2.gulpのインストール

npmのインストール

1.ターミナルを開く

「command」キーと「space」キーを同時に押すとSpotlight検索が画面に現れます。検索フォームに「Ter」のように入力していくと、Terminal.appがサジェストされます。


2.npm(node package maneger)がインストールされているかをチェック

ターミナルで以下のコマンドを実行します。

npm -v

3.10.9のように数字が表示されたらokです。

それが今現在インストールされているnpmのバージョンです。

数字が出なかった場合

npmがインストールされていません。

node.jsをインストールするとnpmが使えるようになるので、インストールします。

1.下記のサイトのにアクセス

node.js

2.v6.9.2 LTS 推奨版(2016/12/13時点)をクリック

（※「この種類のファイルは〜」という警告が出ることがあります）

3.保存したファイルをクリックしてインストール

言われるがままにインストールしていきましょう。

（途中、続ける、を押していないように見えますが、押してます）

ここまでやったらターミナルで以下のコマンドを実行します。

npm -v

3.10.9のように数字が表示されたらokです。

それが今現在インストールされているnpmのバージョンです。

gulpのインストール

いろいろな手法がありますが、今回はgulp公式の推奨する方法で「gulp-cli」というものをインストールします。

1.gulpがインストールされているかをチェック

ターミナルで以下のコマンドを実行します。

gulp -v

CLI version 1.x.xのような表示が出た人は、gulp-cliがインストールされています。

gulpをインストールするのが初めての人は以下のようになると思います。
これらの人は、3にすすみます。

また、CLI version 3.x.xのような表示が出た場合、古いバージョンのgulpがグローバルにインストールされてしまっているので、アンインストールのち改めてインストールを行う必要があります。2に進みます。

（現状のnpmに登録されているgulpはバージョンが3系なので、CLI version 3.x.xでも問題はありませんが、開発が進んでいる4系を導入する際に不具合が発生しますので、ここでは最新のCLIをダウンロードします。また、何故か4系のCLIはCLI version 1.x.xのように、4ではなく1と表示されますが問題ありません。）

2.古いgulpをアンインストール

下記のコマンドを実行します。

sudo npm uninstall -g gulp

古いgulpがアンインストールされます。

3.gulp-cliをインストール

下記のコマンドを実行します。

sudo npm install -g gulp-cli

また、2で古いgulpをアンインストールしてgulp-cliのインストールを行っている場合、下記のようなエラーが出る場合があります。

nayucolony:~ demo$ sudo npm install -g gulp-cli
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp-cli/bin/gulp.js
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "gulp-cli"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! path /usr/local/share/man/man1/gulp.1
npm ERR! code EEXIST

npm ERR! Refusing to delete /usr/local/share/man/man1/gulp.1: ../../../lib/node_modules/gulp/gulp.1 symlink target is not controlled by npm /usr/local
npm ERR! File exists: /usr/local/share/man/man1/gulp.1
npm ERR! Move it away, and try again.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/demo/npm-debug.log
nayucolony:~ demo$ gulp -v
-bash: /usr/local/bin/gulp: No such file or directory
nayucolony:~ demo$

これは、アンインストールの際に削除できないファイルがあったことにより競合が起こり発生するエラーです。

下記のコマンドで競合ファイルを削除する必要があります。

sudo rm /usr/local/share/man/man1/gulp.1

その後、再度下記のコマンドを実行しましょう。

sudo npm install -g gulp-cli

成功した場合は下記のようになります。

これで、gulpがglobalにインストールされました。

おわりに

以上で、npm及びgulpを実行する環境が整いました。
各解説記事に出てくるnpm installなどのコマンドが使えるようになります。

ツールを使って、効率的な作業を行っていきましょう。