gulpが（多分）インストールできたのに、gulp: command not foundと言われるのは何故でしょう…？について

Question

###前提・実現したいこと
過去のこちらの質問（https://teratail.com/questions/13378）についての質問になります。
同じ内容で困っておりまして、gulpをインストールできてるはずなのに、「gulp: command not found」なることを解決したい。

###発生している問題・エラーメッセージ
ベストアンサーでraccyさんが回答している内容で、

$ export PATH=/Users/myname/npm/bin:$PATH

にパスを通すとあります。

こちらでうまくいかなかったので、以下で試したらgulpを認識してくれました。

$ export PATH=/Users/myname/.npm-global/bin:$PATH

gulp-v
[19:16:59] CLI version 1.4.0

ただしこれを閉じると、再度同じ作業を行わないといけません。
raccyさんのコメントで以下とあるのですが、これの意味が知識不足で理解できないです。

export PATH=/Users/myname/npm/bin:$PATHを 
~/.bash_profileファイルの末尾に追加すると、いつでも使えるようになります。 

こちらをもう少しわかりやすくどうすればよいか教えていただけないでしょうか。
よろしくお願いいたします。

Answer 1

パスを通すの意味はわかりますか？

Windows、Mac、Linux等のOS共通でターミナルを開いてPATHという変数を確認するとこのような文字列が格納されています。
例えばMacで下記のようなコマンドを入力すると:で区切られたディレクトリ名らしきものがズラッと表示されますね。

$ echo $PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

何かしらのコマンドが実行された時、
PATH変数のディレクトリリストを確認し、これの左から順番に「実行ファイルないかー」と探しにいき、
もし実行ファイルが見つかればその実行ファイルを起動します。

---

となれば、gulpコマンドが実行出来る時、
PATHで指定したディレクトリ内にファイルの実態があるはずですよね。
探してみましょう。

$ cd export PATH=/Users/myname/.npm-global/bin

$ ls
gulp

ありましたか？
質問文でgulpコマンドが利用出来たと言っているので、ファイルの実態が存在するはずです。
このディレクトリをPATHに登録すれば、gulpコマンドが使えるようになります。
（しっかし.npm-globalって凄い名前だな…ruccyさんがHomebrewで入れ直してねって言ってる理由がなんとなく分かった）

---

では、実際にパスを通しましょう。
こんな感じでパスの文字列に認識して欲しいディレクトリの文字列をくっつけてやれば、こうなるわけです。

$ PATH=/Users/myname/.npm-global/bin:$PATH

$ echo $PATH
/Users/myname/.npm-global/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

しかしこれ、パス通ったはずなのに実行してくれない…
実は単に=を使って代入しても意味がないのです。
exportというコマンドを使って、ターミナル全体(環境変数)に反映！という一手間を行う必要があります。

# これを実行すればOK
$ export $PATH

# 変数宣言と環境変数の設定を同時に行う方法
$ export PATH=/Users/myname/.npm-global/bin:$PATH

参考サイト: PATHを通すために環境変数の設定を理解する (Mac OS X)

---

ただしこれを閉じると、再度同じ作業を行わないといけません。

環境変数を書き換えても、ターミナルを閉じたりログアウトすると設定は消えます。
残念ですがこれはお約束です。

困りましたね、ターミナル開いた瞬間に読み込んで欲しいのだけど…
実はMacやLinuxはターミナルを開くと毎回~/.bash_profileを実行するという仕様があります。
~/とはホームディレクトリのことです。

$ cd ~

$ pwd
/home/myname (/Users/mynameとかだったりするかもしれません)

エディタなんかで~/.bash_profileというファイルを作ってみましょう。
今回はターミナル操作でベタッと作ってみます。

$ echo "export PATH=/Users/myname/.npm-global/bin:$PATH" > ~/.bash_profile

$ cd ~

# 先頭がドットの隠しファイルを見るには-aオプションが必要
$ ls -a
.bash_profile

ざっと流しましたが以上です。
これを元に更に色々調べてみたり、あれこれ動かして確認してみてください。

Comments

[ayatori]

miyabi-sunさん
わかりやすい回答、解説ありがとうございました。
パスを通す意味が理解できておりませんでした。

ですが教えていただいた、以下の実行をするとターミナルを閉じめてもgulpを認識してくれるようになりました。ありがとうございました。
echo "export PATH=/Users/MacMyName/.npm-global/bin:$PATH" > ~/.bash_profile

ただいくつか疑問点があり根本的な解決ができませんでした。知識不足で申し訳ないです。

■そもそもなんでgulpを認識してくれないのか？
「Web制作者のためのSassの教科書 改訂2版」という書籍で勉強中なのですが、検索など行ってもあまり同じ問題に出くわしている方がいないように感じます。

■「.bash_profile」ファイルは元々ありました。

■「$ echo $PATH」でディレクトリリストが表示されたのですが、参考で書いていただいているより以上に長いです。
----------
/Users/MacMyName/.npm-global/bin:/Users/MacMyName/.npm-global/bin:/Users/MacMyName/.npm-global/bin:/Users/myname/.npm-global/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
----------

■gulpコマンドが実行出来る状態で「$ cd export PATH=/Users/MacMyName/.npm-global/bin」＞「$ ls」とすると「-bash: ls: command not found」になりました。Finderで確認すると対象箇所にgulpのファイルは存在しました。そのファイルには以下の記述がありました。
----------
#!/usr/bin/env node

'use strict';

require('../')();
----------

[miyabi-sun]

> ■そもそもなんでgulpを認識してくれないのか？
これはMacやLinuxのOSの使い方といった根本の話なので、エンジニアならばある種知ってて当然です。
Sassの教科書ならば、スタート地点がNode.js、npmが入っている所だから話を盛り込むと蛇足になっちゃいますね。
Node.js自体にフォーカスを当てた書籍なら書いてあるかもしれませんね。

> ■「.bash_profile」ファイルは元々ありました。
ターミナルを立ち上げた時は常にまっさらな状態に戻ります。
つまり、他のプログラム等で使うような様々な初期設定も全てこのファイルが請け負う形になります。
.bash_profileはクリーンインストールしたとかでなければ存在してて当然です。

> ■「$ echo $PATH」でディレクトリリストが表示されたのですが、参考で書いていただいているより以上に長いです。
これも長くて当然です。
好きなように作り変えてね、という意味で`export PATH=xxxx」で環境変数を好き勝手に書き換えられる設定ですからね。
沢山のプログラムをインストールしたパソコンならばかなり長いのも普通です。
…ってコラ！「/Users/MacMyName/.npm-global/bin」が4つくらいあるでしょ！
.bash_profileに同じ事書きすぎだよ！一回確認して重複消して！！

> $ cd export PATH=/Users/MacMyName/.npm-global/bin
こら！cdはチェンジディレクトリの別コマンドだよ！
exportコマンド実行できてるわけじゃないからね。
exportディレクトリが存在しないからディレクトリ移動出来ないじゃないかエラーとか出てない？

[ayatori]

miyabi-sunさん

>…ってコラ！「/Users/MacMyName/.npm-global/bin」が4つくらいあるでしょ！
>.bash_profileに同じ事書きすぎだよ！一回確認して重複消して！！

ありがとうございます。こちら重複削除して再度順番に行うと綺麗な形でgulpも認識しました。

>> $ cd export PATH=/Users/MacMyName/.npm-global/bin
>こら！cdはチェンジディレクトリの別コマンドだよ！
>exportコマンド実行できてるわけじゃないからね。

こちらについてはディレクトリ移動できてなくエラーになってましたがこちらもうまく移動できるようになりました。

非常にわかりやすく助かりました。ありがとうございます。